Shared settings and more storage. Compare plans.
Properties
Set these on :root for the whole page. The color, spacing, corner, and code-font properties also
work on any element, to scope them to that part of the page. Font, font size, and measure set the page's text
and column, so they only work on :root. Spacing, type, and every color variant derive from them.
| Property | Default | Controls |
|---|---|---|
--m-primary |
oklch(55% 0.19 40) |
Links, buttons, focus rings, checked controls, and every hover and tint variant |
--m-on-primary |
Black or white, for contrast | Text on primary backgrounds |
--m-density |
1 |
All spacing and line height |
--m-radius |
0.5rem |
Corner rounding |
--m-font-size |
1rem |
Body text size |
--m-measure |
100ch |
The width of the main column |
--m-font-sans |
system-ui, sans-serif |
Body and heading font |
--m-font-mono |
ui-monospace, …, monospace |
Code font |
Try them
These controls set the properties on the example below only, which is how you'd theme one part of a page. Font size, fonts, and measure only work for the whole page: try them in Settings.
/* Move a control to see the CSS. */Light and dark
The page follows the system preference. data-theme="light" or "dark" forces a scheme
for the whole page or for any section, like these two cards.
Motion and contrast
m.css follows prefers-reduced-motion and prefers-contrast: more. To force them on
for a page or a section, set data-motion="reduce" or data-contrast="more".
To test the system settings, emulate them in your browser's developer tools. In Chromium, open the Rendering
panel and set "Emulate CSS media feature" for prefers-reduced-motion,
prefers-contrast, or forced-colors.
See it applied
The showcase has whole pages themed with only these properties and attributes, such as a long-read magazine essay. Each one shows its complete theme at the bottom.
Token explorer
The internal --_m-* tokens m.css derives from the properties, at the root and in two themed
subtrees. They can change between versions, so set the public properties instead.
Motion:
Dark subtree, green primary, density 1.25
Light subtree, red primary, custom on-primary, density 0.75