multi-theme

Multi theme solution based on CSS Custom Properties

---

DEMO

---

install

npm i multi-theme

Glossary

• Usage
• ThemeProvider
• useTheme

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