React wrapper of dark/light theme mode manager for web
- Generate
mode.jsusing@-ft/mode-codegenpackage.
{
"variableName": "__theme_mode"
}- Load
mode.jsBEFORE load react app.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ./mode.js is generated by @-ft/mode-codegen package -->
<script src="./mode.js"></script>
<script type="module" src="./index.tsx"></script>
</head>
</html>- Then wrap your app with
ModeContextProvider
import { ModeContextProvider, ModeContext } from '@-ft/mode-react';
function Provider({ children }) {
return (
<ModeContextProvider variableName="__theme_mode">
{children}
</ModeContextProvider>
);
}
function ModeBar() {
const { mode, setMode } = useContext(ModeContext);
return (
<Bar>
Current theme mode is {mode}.
<Select
onChange={useCallback((mode) => setMode(mode), [setMode])}
>
{['system', 'light', 'dark']}
</Select>
</Bar>
)
}