themes #

fuz_css supports both the browser's color-scheme and custom themes based on variables, which use CSS custom properties.

fuz_css works with any JS framework, but it provides only stylesheets, not integrations. This website uses the companion Svelte UI library fuz_ui to provide the UI below to control the fuz_css color scheme and themes.

fuz_css supports color-scheme with dark and light modes. To apply dark mode manually, add the dark class to the root html element.

The Fuz integration detects the default with prefers-color-scheme, and users can also set it directly with a component like this one:

The builtin themes support both dark and light color schemes. Custom themes may support one or both color schemes.

A theme is a simple JSON collection of variables that can be transformed into CSS that set custom properties. Each variable can have values for light and/or dark color schemes. In other words, "dark" isn't a theme, it's a mode that any theme can implement.

These docs are a work in progress, for now see theme.ts and themes.ts.