ui/docs/getting-started/theming.md

Theming (theme/platform/skin)

Tria UI использует три измерения конфигурации:

• theme: light | dark
• platform: web | vk | tg
• skin: web | ios | android

Комбинация управляет CSS пресетами и компонентными токенами.

UIProvider

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

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-*) и т.п.