multi-theme

Path builder

Usage no npm install needed!

<script type="module">
  import multiTheme from 'https://cdn.skypack.dev/multi-theme';
</script>

README

multi-theme

Multi theme support based on CSS Custom Properties

DEMO


install

npm i multi-theme

Glossary

Usage

/* 1. Set up provider */

import { ThemeProvider } from 'multi-theme';

...

/* 2. Define all styles container */
const styles = {
    light: {
        fontColor: '#000000', // => '--fontColor'
        backgroundColor: '#ffffff' // => '--backgroundColor'
    },
    dark: {
        fontColor: '#ffffff', // => '--fontColor'
        backgroundColor: '#000000' // => '--backgroundColor'
    }
}

/* 3. Set up locale name */
<ThemeProvider theme="light" styles={styles}>
/* App */
</ThemeProvider>

/* 4. Define styles using CSS Custom Properties. Names should be equal to container's properties */
.container {
    color: var(--fontColor);
    background-color: var(--backgroundColor);
}

ThemeProvider

Provider to wrap the application or specific element

Name Description
theme Theme name
defaultTheme Default theme name, means that if current theme does not have a value for specific style the default one will be used.
styles Theme style container
elementRef Reference to element where provider will be applied

useTheme

Hook to access theme context properties.

import { useTheme } from 'multi-theme';

...

const { theme, style } = useTheme();
Name Description
theme Current theme name
style Curent style set