Dark mode
Choose light, dark, or system mode. The selection persists and updates every preview.
Configure and use it
This is the smallest useful starting point. Copy it into the indicated application file or run it from the project root, then adjust the documented values for your product.
theme: {
default: "system",
palette: "violet",
}What changes after this
The initial server document and hydrated client agree on light, dark, or system mode without a theme flash.
Choose a default
Set light, dark, or system in wrnexus.config.ts. System mode follows the operating-system preference until the user selects an explicit value.
Persist preference
Use PreferenceSwitcher or your own control to update the document theme. The selected value persists and is applied before interactive components hydrate.
Author with tokens
Use semantic --wire-* variables instead of hard-coded light colors. Tokens switch surfaces, text, borders, focus, and status colors together.
Test both modes
Check content, overlays, charts, disabled controls, focus rings, and browser autofill in both modes. Do not treat dark mode as a simple color inversion.
Verify the result
Type-check the application, inspect the resolved package and styles, and build the production artifact. Test the page at a narrow viewport, with keyboard navigation, and in both color modes before shipping.
bunx wrnexus typecheck .
bunx wrnexus inspect packages .
bunx wrnexus inspect styles .
bunx wrnexus build .Expected result
The commands exit successfully, the build reports the installed UI components and active theme, and the rendered page remains usable before and after hydration.