Темизация

AtlantumUI переключает тему через атрибут data-theme на корневом элементе. Доступные темы поставляются CSS-файлами пакета @atlantum/core:

import "@atlantum/core/themes/dark.css";
import "@atlantum/core/themes/strict.css";
import "@atlantum/core/themes/classic.css";
import "@atlantum/core/themes/playful.css";
import "@atlantum/core/themes/relaxed.css";

Конструктор темы

Соберите бренд, акцент, скругления, spacing и шрифт на странице Create. Пресет сохраняется в URL и применяется в продукте:

pnpm dlx @atlantum/cli apply --preset <code>

CLI запишет atlantum.theme.css с переопределениями CSS-переменных. Подробнее — в Начале работы.

Через AtlantumUIProvider

import { AtlantumUIProvider } from "@atlantum/utils";
 
<AtlantumUIProvider theme="dark">
  <App />
</AtlantumUIProvider>;

theme принимает "light" или "dark" и проставляет data-theme на обёртку провайдера.

Оси тем

Оси ортогональны. Один атрибут data-theme несёт одно значение — комбинируйте через nesting:

<html data-theme="dark">
  <div data-theme="classic">…</div>
</html>