```
### Dark Theme Toggle
```javascript
function toggleTheme() {
const html = document.documentElement;
const current = html.dataset.newUiTheme;
html.dataset.newUiTheme = current === 'light' ? 'dark' : 'light';
}
```
---
## Best Practices
### Using New UI Tokens
1. **Use semantic tokens** — Prefer `--content-primary` over `--grey10` for automatic theme support.
2. **Leverage utility classes** — Use `nu-u-*` classes for consistent spacing and typography.
3. **Set themes at root** — Apply `data-new-ui-theme` on `` for full page theming.
4. **Responsive typography** — Heading and body classes automatically scale for mobile.
5. **Accessible colors** — OKLCH color system ensures perceptual consistency across themes.
### Focus States
- Interactive elements need visible focus: use `--focus-default`, `--focus-accent`, or `--border-focus`
- Apply focus with `box-shadow: var(--focus-default)` or the `.sh-default` utility class
- Never use `outline: none` without providing a focus replacement
- Use `:focus-visible` over `:focus` (avoids focus ring on click)
- Group focus with `:focus-within` for compound controls
### Forms
- Inputs need `autocomplete` and meaningful `name` attributes
- Use correct `type` (`email`, `tel`, `url`, `number`) and `inputmode`
- Labels must be clickable (`for` attribute or wrapping control)
- Errors displayed inline next to fields; focus first error on submit
- Placeholders should show example patterns and end with `…`
### Animation
- Honor `prefers-reduced-motion` (provide reduced variant or disable)
- Animate `transform` and `opacity` only (compositor-friendly)
- Never use `transition: all`—list properties explicitly
- Use `--default-transition-duration` and `--default-transition-timing-function`
### Typography
- Use `…` not `...` (ellipsis character)
- Use curly quotes `"` `"` not straight `"`
- Non-breaking spaces for units: `10 MB`, `⌘ K`
- Loading states end with `…`: `"Loading…"`, `"Saving…"`
- Use `font-variant-numeric: tabular-nums` for number columns
- Use `text-wrap: balance` on headings (prevents widows)
### Images
- Always provide explicit `width` and `height` (prevents CLS)
- Below-fold images: `loading="lazy"`
- Above-fold critical images: `fetchpriority="high"`
### Dark Mode & Theming
- Set theme using `data-new-ui-theme` attribute on ``
- Use `color-scheme: dark` on `` for dark themes (fixes native scrollbar, inputs)
- `` should match `--background` token
- Native `