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><htmllang="en"><head><!-- ./mode.js is generated by @-ft/mode-codegen package --><scriptsrc="./mode.js"></script><scripttype="module" src="./index.tsx"></script></head></html>- Then wrap your app with
ModeContextProvider
import{ModeContextProvider,ModeContext}from'@-ft/mode-react';functionProvider({ children }){return(<ModeContextProvidervariableName="__theme_mode">{children}</ModeContextProvider>);}functionModeBar(){const{ mode, setMode }=useContext(ModeContext);return(<Bar>
Current theme mode is {mode}.
<SelectonChange={useCallback((mode)=>setMode(mode),[setMode])}>{['system','light','dark']}</Select></Bar>)}