- 🌈 Auto transition css
- 🌀 Auto css variable injection
- 🕋 Auto saved for last theme
- 🚀 High performance
Using npm:
$ npm install @tilemoon/react-theme-manager
Using yarn:
$ yarn add @tilemoon/react-theme-manager
first create your own ThemeConfig
import { ThemeConfig } from '@tilemoon/react-theme-manager'
interface ThemeColors {
fontColor: string,
backgroundColor: string,
}
export interface MyThemeConfig extends ThemeConfig<ThemeColors> {
name: string
}
// colors will auto inject into css like `--font-color: black;`
const ThemeLight: MyThemeConfig = {
name: 'light',
colors: {
fontColor: 'black',
backgroundColor: 'white',
},
}
export const themes = {
light: ThemeLight,
} as const
then wrap your App by ThemeManagerProvider
like this
import { ThemeManagerProvider } from '@tilemoon/react-theme-manager'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<ThemeManagerProvider onThemeInit={localTheme => {
return themes[localTheme] ?? themes.light
}}>
<App />
</ThemeManagerProvider>
</React.StrictMode>
)
use useTheme
to access current Theme,
you need to pass your own ThemeConfig for strict type derivation.
function App() {
const { theme, setTheme } = useTheme<MyThemeConfig>()
return (
<div className="App">
<button
onClick={() => setTheme((theme) => theme.name == 'light' ? themes.dark : themes.light)}>
theme is {theme.name}
</button>
</div>
)
}
use color in css
html {
/* all variables is generated by the colors writed in ThemeConfig */
color: var(--font-color);
background-color: var(--background-color)
}
use function v
to translate color in to css variable
import { v } from '@tilemoon/react-theme-manager'
<button
style={{
color: v(theme.colors.fontColor),
backgroundColor: v(theme.colors.backgroundColor),
}}
onClick={() => setTheme((theme) => theme.name == 'light' ? themes.dark : themes.light)}>
theme is {theme.name}
</button>
<ThemeManagerProvider
onThemeInit={localTheme => {
// localTheme is theme string name last saved to localStorage
return YOUR_THEME_CONFIG ?? DEFAULT_THEME
}}
>
</ThemeManagerProvider>
const Component = () => {
const { theme, setTheme } = useTheme<YOUR_OWN_THEME_CONFIG>()
// use current theme data
}
yarn && yarn --cwd ./example-site
first run yarn link
in root dir and you will get response like this:
success Registered "@tilemoon/react-theme-manager".
info You can now run `yarn link "@tilemoon/react-theme-manager"` in the projects where you want to use this package and it will be used instead
then run yarn link @tilemoon/react-theme-manager
in subdir example-site
finally just run yarn dev
in root dir, now every changes in root dir or in example site will hot reload both.