--- title: Theming description: Token namespaces, the theme-dumb principle, color scheme, and Material You dynamic color. sidebar: label: Theming icon: palette --- touchcn styling lives entirely in the Tailwind token layer (`@touchcn/tailwind`). Components apply **semantic classes** (`.tcn-btn-primary`, `.tcn-material`) and **semantic tokens** (`var(--color-*)`) — never theme-specific values — so a single component works on both platforms in light and dark. ## Token namespaces Every token is defined per platform namespace, with light and dark values: | Namespace | Applies when | | ---------- | ----------------------- | | `.ios` | iOS liquid-glass theme | | `.md` | Material 3 theme | | `.dark` | Dark color scheme (combined, e.g. `.md.dark`) | The core `AppearanceManager` toggles the `ios` / `md` and `dark` classes on ``. Because every token has an `.ios`, `.ios.dark`, `.md`, and `.md.dark` value, components reference `var(--color-surface)` and get the right value for the active platform and color scheme automatically. ## Customizing the look Three ways to change how touchcn looks, from broadest to most surgical: 1. **Re-tint from a brand color** — generate a full scheme from a seed at runtime; see [Material You](#material-you) and [Accent color (iOS)](#accent-color-ios) below. 2. **Override tokens in your CSS.** Token blocks are plain (unlayered) `.ios` / `.md` selectors, so the same selectors in your own stylesheet — imported after `@touchcn/tailwind` — win by source order. Always set all four namespace × scheme combinations so the dark scheme stays correct: ```css styles.css .md { --color-primary: #6d28d9; } .md.dark { --color-primary: #a78bfa; } .ios { --color-primary: #5856d6; } .ios.dark { --color-primary: #5e5ce6; } ``` 3. **Style or edit a single component.** Utility classes you put on a component always beat touchcn's chrome (it lives in a low-specificity `@layer`), and for anything deeper the component source is in your repo — edit it. Just follow the [rules below](#rules-when-editing-copied-components) so platform adaptation keeps working. ## Color scheme The dark scheme is a class (`dark`) on ``, combined with the active platform namespace. The provider manages it from the `AppearanceManager`; you toggle it through the framework binding: ```ts Angular import { inject } from '@angular/core'; import { TouchcnAppearance } from '@touchcn/angular'; const appearance = inject(TouchcnAppearance); appearance.setScheme('dark'); // or 'light'; null follows the system ``` ```tsx React import { useTouchcnAppearance } from '@touchcn/react'; const { setScheme } = useTouchcnAppearance(); setScheme('dark'); // or 'light'; null follows the system ``` ```vue Vue ``` ## Material You On Android you can generate a Material 3 dynamic color scheme from a single seed color and apply it at runtime. `generateMaterialTheme(seed)` expands the seed into MD3 tonal roles (light and dark); `applyMaterialTheme()` injects a single `