multi-theme v1.1.3

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

useTheme

Hook to access theme context properties.

import { useTheme } from 'multi-theme';

...

const { theme, style } = useTheme();