/* cdn.chekak.store/theme/v1/theme.css * ───────────────────────────────────────────────────────────────────── * Единая тема экосистемы ЧёКак — палитра + фон страницы, ТЁМНАЯ (по * умолчанию) и СВЕТЛАЯ. Эталон значений — art.chekak.store (Twitch: * графит + фиолетовый primary + благородное золото; светлая — тёплая кремовая). * * КОНТРАКТ. Тема выбирается атрибутом на : * data-theme="dark" (или отсутствие атрибута) → тёмная * data-theme="light" → светлая * Проект ставит его из своего theme-переключателя: * document.documentElement.dataset.theme = 'dark' | 'light' * * ПОТРЕБЛЕНИЕ. Используйте переменные --ck-*: * background: var(--ck-surface); color: var(--ck-fg); * border-color: var(--ck-border); и т.д. * Фон страницы целиком — var(--ck-page-bg) (градиент со свечением в тёмной, * плоский в светлой). Пример: * body { background: var(--ck-page-bg); background-attachment: fixed; } * * URL стабильный, папку не версионируем сменой пути без нужды (nginx кэширует * коротко с ревалидацией) — правки подхватываются без смены . * ───────────────────────────────────────────────────────────────────── */ :root, :root[data-theme="dark"] { color-scheme: dark; --ck-bg: oklch(0.185 0.010 300); --ck-surface: oklch(0.235 0.015 300); --ck-surface-2: oklch(0.27 0.018 300); --ck-border: oklch(0.40 0.035 300 / 55%); --ck-fg: oklch(0.96 0.005 300); --ck-muted: oklch(0.72 0.025 300); --ck-primary: oklch(0.62 0.220 295); --ck-primary-fg: oklch(0.99 0 0); --ck-gold: oklch(0.79 0.120 85); --ck-danger: oklch(0.62 0.20 25); --ck-success: #2bd07a; /* Фон страницы: фиолетовое свечение у верхней кромки + переход из фиолетово-тёмного к --ck-bg на 55%. */ --ck-page-bg: radial-gradient(circle at 50% 0%, rgba(145, 70, 255, .14), transparent 42%), linear-gradient(180deg, oklch(0.22 0.04 295) 0%, var(--ck-bg) 55%); /* Общий подвал (cdn footer/v1, Shadow DOM) читает эти --ck-ft-* с :root (кастомные свойства проходят сквозь shadow-границу). Тёмная палитра. */ --ck-ft-bg: #18181b; --ck-ft-fg: #adadb8; --ck-ft-border: rgba(255, 255, 255, .10); --ck-ft-muted: #adadb8; --ck-ft-strong: #efeff1; --ck-ft-link: #bf94ff; --ck-ft-link-soft: #d2d2db; --ck-ft-chip-bg: #1f1f23; --ck-ft-chip-border: rgba(255, 255, 255, .14); --ck-ft-faint: #848494; } :root[data-theme="light"] { color-scheme: light; --ck-bg: #fdf6ec; --ck-surface: #fffaf2; --ck-surface-2: #f3e7d6; --ck-border: #e6d5bf; --ck-fg: #2a211b; --ck-muted: #6b5a48; --ck-primary: #b06a2c; --ck-primary-fg: #ffffff; --ck-gold: #b8862f; --ck-danger: #c0392b; --ck-success: #2e8b57; /* Светлая — плоский тёплый фон, без свечения. */ --ck-page-bg: var(--ck-bg); /* Подвал — светлая тёплая палитра (совпадает со светлыми дефолтами футтера). */ --ck-ft-bg: #fffaf2; --ck-ft-fg: #2a211b; --ck-ft-border: rgba(160, 120, 70, .22); --ck-ft-muted: #6b5a48; --ck-ft-strong: #2a190f; --ck-ft-link: #8a5a30; --ck-ft-link-soft: #5a4632; --ck-ft-chip-bg: #ffffff; --ck-ft-chip-border: rgba(107, 67, 40, .2); --ck-ft-faint: #8a7c6a; }