A theme token manager for React that uses tokens to style and theme applications.
Try the demo.
npm install theme-token-manageror
yarn add theme-token-managerWrap your app with ThemeProvider:
import { ThemeProvider, defaultTheme } from "theme-token-manager";
<ThemeProvider theme={defaultTheme}>
<App />
</ThemeProvider>;You can also provide your own theme object (see Theme).
Use the useTheme hook to access the current theme:
import { useTheme } from "theme-token-manager";
const MyComponent = () => {
const { theme } = useTheme();
return (
<div
style={{
backgroundColor: theme.palette.light.surface["primary-default"],
}}
>
{/* ... */}
</div>
);
};To inject CSS variables and baseline styles, use CssBaseline:
import 'theme-token-manager/css-baseline/styles.css'
import { CssBaseline } from "theme-token-manager";
<CssBaseline mode="light">
<App />
</CssBaseline>;This will inject CSS variables based on your theme. Import the src/css-baseline/styles.css to work as tailwind-css classes.
To manage multiple themes, use the ThemeCollectionProvider:
import { ThemeCollectionProvider } from "theme-token-manager";
<ThemeCollectionProvider themes={[theme1, theme2]}>
<App />
</ThemeCollectionProvider>;ThemeProvider: Provides a theme context.useTheme: Access the current theme.CssBaseline: Injects CSS variables and baseline styles.ThemeCollectionProvider: Manage multiple themes.defaultTheme: The default theme object.Theme: Type definition for a theme.
Contributions are welcome! Please open issues or pull requests on GitHub.