42 lines
1.4 KiB
Markdown
42 lines
1.4 KiB
Markdown
# Theming (theme/platform/skin)
|
||
|
||
Tria UI использует три измерения конфигурации:
|
||
|
||
- `theme`: `light | dark`
|
||
- `platform`: `web | vk | tg`
|
||
- `skin`: `web | ios | android`
|
||
|
||
Комбинация управляет *CSS пресетами* и компонентными токенами.
|
||
|
||
## UIProvider
|
||
|
||
```tsx
|
||
import { UIProvider } from "@tria/ui";
|
||
|
||
<UIProvider config={{ theme: "dark", platform: "vk", skin: "ios" }}>
|
||
...
|
||
</UIProvider>
|
||
```
|
||
|
||
UIProvider устанавливает `data-theme`, `data-platform`, `data-skin` на `document.documentElement`
|
||
(или на `config.root`), и может применить `config.vars` — набор CSS variables.
|
||
|
||
## Runtime switching
|
||
|
||
```tsx
|
||
const [theme, setTheme] = useState<"light"|"dark">("dark");
|
||
<UIProvider config={{ theme, platform, skin }} />
|
||
```
|
||
|
||
## Which combos matter
|
||
|
||
- `platform="vk" + skin="ios"` — VK iOS‑вид (Cupertino‑ощущение)
|
||
- `platform="vk" + skin="android"` — VK Android‑вид (Material‑ощущение)
|
||
- `platform="tg"` — более “telegram‑ui” акценты
|
||
- `platform="web"` — нейтральный web preset
|
||
|
||
## Troubleshooting
|
||
|
||
Если визуально не меняется “skin”, значит компоненты ещё используют жёсткие px.
|
||
Нужно заменить размеры на токены (`--btn-*`, `--input-*`, `--cell-*`, `--tabbar-*`) и т.п.
|