Theme and density
The switches that change how the components look, and how your own CSS follows them.
Three switches change how the components look, and a fourth changes their form. Each works wherever it's set, so a page can hold a dark section or a compact table.
The switches
| Switch | How it is set | Values |
|---|---|---|
| Theme | data-theme on any element. Without it, the reader’s system setting. | data-theme="light", data-theme="dark" |
| Palette | data-palette on the root element, the same for the whole page. Without it, default. | data-palette="default", data-palette="cockpit" |
| Density | data-density on any element. Without it, comfortable. | data-density="comfortable", data-density="compact" |
| Text size | The window’s width. It has no attribute. | The smaller steps below 768px, the larger at and above it. |
| Layout | The window’s width. It has no attribute. | The smaller steps below 768px, the larger at and above it. |
| Layout | data-layout on any element. Without it, the window’s width: narrow below 768px. | data-layout="narrow", data-layout="wide" |
Who chooses
The reader chooses the theme: a page follows their system setting until it sets data-theme, and the Theme switch component lets them pick. You choose the density, once for a page or a part of it; it's never the reader's choice. The text size follows the window, and so does the layout until data-layout sets it: components that have a phone form take it in a narrow space.
Your own CSS
Your own CSS reads the same design tokens, as CSS custom properties that start with --smbk-, and changes with the switches too. Use them for the page itself: its background, its text color and its typeface. The Color and Typography pages list the tokens for each, and every foundation's page lists its tokens with their names.