react-theme-manager
A simple and clean theme manager for react based on react context api.
Screen Recording
Features
🌈 Auto transition css🌀 Auto css variable injection🕋 Auto saved for last theme🚀 High performance
Install
Using npm:
$ npm install @tilemoon/react-theme-managerUsing yarn:
$ yarn add @tilemoon/react-theme-managerUsage
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 constthen 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>API
ThemeManagerProvider Props
<ThemeManagerProvider
onThemeInit={localTheme => {
// localTheme is theme string name last saved to localStorage
return YOUR_THEME_CONFIG ?? DEFAULT_THEME
}}
>
</ThemeManagerProvider>useTheme
const Component = () => {
const { theme, setTheme } = useTheme<YOUR_OWN_THEME_CONFIG>()
// use current theme data
}Dev
install
yarn && yarn --cwd ./example-sitelink package
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 insteadthen run yarn link @tilemoon/react-theme-manager in subdir example-site
run dev
finally just run yarn dev in root dir, now every changes in root dir or in example site will hot reload both.