/** * Темы оформления мира — косметика за 60 изумрудов. * * Подключать после styles.css. Тема ставится классом на : * document.documentElement.className = 'theme-cave'; * * Меняется только вид: фон, поверхности, оттенок акцента. Ни одно правило * не влияет на скорость, доступ или экономику — косметика преимущества * не даёт никогда (design-system.md, раздел 13). * * Тема по умолчанию — «Шахта», она же базовая палитра в styles.css, * отдельного класса не требует. * * Что НЕ меняется ни в одной теме: * --emerald — изумруд всегда один и тот же, иначе валюту не узнать; * --danger — «смотри сюда» всегда терракотовый; * --parent — родительский контур всегда холодный синий. */ /* --- Закат --------------------------------------------------------------- Тёплая, самая мягкая. Ниже контраст, розово-оранжевый горизонт. */ .theme-sunset { --ink-900: #16080B; --ink-800: #1F0C10; --ink-700: #331419; --ink-600: #4A1E24; --amber-700: #93400F; --amber-600: #C25A18; --amber-500: #E87A2C; --amber-400: #F79B4A; --gold-300: #F5CE8A; --gold-100: #FFEFC9; --bg: var(--ink-900); --surface: var(--ink-800); --surface-2: var(--ink-700); --text: var(--gold-100); --text-dim: #C79A85; --line: var(--ink-700); --accent: var(--gold-300); --accent-dim: var(--amber-500); } .theme-sunset .world { background: linear-gradient(150deg, #2A1015, var(--ink-800)); } /* --- Глубина ------------------------------------------------------------- Холодная, синяя порода. Самая спокойная, хорошо вечером. */ .theme-deep { --ink-900: #050B14; --ink-800: #0A1220; --ink-700: #142132; --ink-600: #1E3149; --amber-700: #1B5E7A; --amber-600: #2A7F9E; --amber-500: #3AA3C4; --amber-400: #58C4E0; --gold-300: #9BDCEF; --gold-100: #DFF4FB; --bg: var(--ink-900); --surface: var(--ink-800); --surface-2: var(--ink-700); --text: var(--gold-100); --text-dim: #7C99B0; --line: var(--ink-700); --accent: var(--gold-300); --accent-dim: var(--amber-500); } .theme-deep .world { background: linear-gradient(150deg, #0E1A2B, var(--ink-800)); } /* Кнопки в холодной теме теряли контраст с белым текстом — правим тон. */ .theme-deep .action, .theme-deep .primary { color: #04121B; } /* --- Незер --------------------------------------------------------------- Самая яркая и «дорогая» на вид. Для тех, кто дошёл до незеритовой кирки. */ .theme-nether { --ink-900: #12040A; --ink-800: #1C0710; --ink-700: #2E0E1B; --ink-600: #451528; --amber-700: #8A1338; --amber-600: #B81C48; --amber-500: #DE2A5C; --amber-400: #F2537E; --gold-300: #FF9BB6; --gold-100: #FFE0E8; --bg: var(--ink-900); --surface: var(--ink-800); --surface-2: var(--ink-700); --text: var(--gold-100); --text-dim: #C08095; --line: var(--ink-700); --accent: var(--gold-300); --accent-dim: var(--amber-500); } .theme-nether .world { background: linear-gradient(150deg, #260A16, var(--ink-800)); } .theme-nether .action, .theme-nether .primary { color: #FFF0F4; } /* --- Общее для всех тем --------------------------------------------------- Светлый учебный контур остаётся тёплым при любой теме: там читают, и менять фон под чтение ради косметики нельзя. */ .theme-sunset body.light, .theme-deep body.light, .theme-nether body.light { --bg: #FFFBF4; --surface: #FFFFFF; --surface-2: #F4EADB; --text: #241000; --text-dim: #6B5443; --line: #EADFCF; }