# 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](https://design.simbolik.ai/foundations/color/) and [Typography](https://design.simbolik.ai/foundations/typography/) pages list the tokens for each, and every [foundation's page](https://design.simbolik.ai/foundations/) lists its tokens with their names.

Next: [Tokens in Tailwind and code](https://design.simbolik.ai/docs/tokens/): The design tokens as Tailwind utilities, and read from TypeScript and JSON.