A 44 px button that switches between the dark and light themes and remembers the choice.
import { ThemeToggle } from "@meowerse/ui"; · source packages/ui/src/components/ThemeToggle.tsx
variants and states
server render — shows the dark-theme icon until it hydrates
try it
switches this whole site's theme, like the one in the header
[wait]working: loading the demo…
demo source
tsx
import { ThemeToggle } from "@meowerse/ui";
export default function Demo() {
return <div className="demo btn-row"><ThemeToggle /><span className="mw-muted">switches this whole site's theme, like the one in the header</span></div>;
}
props
prop
type
default
required
className
string extra class names to append.
—
no
css custom properties
variable
dark
light
--c-fg
#ededeb
#1a1a1c
--c-fg-muted
#b3b3af
#46464a
--c-line
#232326
#cfcec8
--c-surface
#151517
#dfded9
--r-m
4px
same
Classes: .mw-themetoggle. Set any of these variables on an ancestor (or wrap a subtree in .mw-theme--dark / .mw-theme--light) to restyle just that part of a page.
usage
server render
tsx
import { ThemeToggle } from "@meowerse/ui";
<ThemeToggle />
accessibility
Its name says what pressing it does: "switch to light theme" or "switch to dark theme".