Multi theme solution based on CSS Custom Properties
npm i multi-theme/* 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);
}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 |
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 |