/* ========================================================================= Тема оформления: светлая (по умолчанию) и тёмная. ========================================================================= Как это работает: 1. Все цвета сайта в css/style.css заменены на var(--token, старый_цвет). Fallback внутри var() — это ровно тот цвет, что был до токенизации, поэтому если этот файл не загрузится, светлая тема выглядит как раньше. 2. Ниже — два набора значений: :root (светлая) и :root[data-theme="dark"]. Атрибут data-theme ставит на инлайн-скрипт в (js/theme.js и анти-мигающая вставка в _head.php) ДО отрисовки страницы. 3. Переключатель — плавающая кнопка, её разметку создаёт js/theme.js. Правило при добавлении новых цветов: не хардкодить, а брать токен отсюда. ========================================================================= */ :root { /* --- Поверхности --- */ --c-bg: #ffffff; /* фон страницы */ --c-surface: #ffffff; /* карточки, панели, тултипы */ --c-surface-2: #f5f5f5; /* чередование строк таблиц, футер, подменю */ --c-surface-3: #fbfdff; /* панели ЛК и авторизации */ --c-header-bg: rgba(245, 245, 245, 0.9); /* шапка сайта */ --c-header-bg-h: rgba(245, 245, 245, 1); /* шапка при наведении */ --c-footer-bar: #e0e0e0; /* нижняя полоса футера с мини-меню */ /* --- Границы --- */ --c-border: #e8e8e8; --c-border-2: #e0e0e0; --c-border-3: #dcdcdc; --c-border-soft: #dce7ef; /* мягкая рамка панелей ЛК/логина */ --c-separator: #d3d3d3; /* разделители в шапке */ /* --- Текст --- */ --c-text: #000000; --c-text-2: #333333; --c-text-3: #444444; --c-muted: #757575; --c-muted-2: #9a9a9a; --c-muted-3: #7b7b7b; --c-quote: #7a7a7a; /* --- Ссылки и акценты --- */ --c-link: #194ca1; --c-link-2: #1669b1; --c-accent: #317fb5; /* фирменный синий: шапка, кнопки, заголовки таблиц */ --c-accent-2: #77b6e2; /* светлый синий: подзаголовки таблиц, фокус полей */ --c-accent-soft: #87a3bb; --c-gold: #df8e0d; /* ZZ-очки, активный пункт меню, оранжевые кнопки */ /* --- Статусы --- */ --c-danger: #ae1919; --c-danger-2: #b70b0b; --c-error-bg: #ffd8d8; --c-error-text: #000000; --c-success-bg: #d9f4be; --c-success-text: #000000; --c-notice-bg: #e3f4ff; /* .attention_block */ --c-notice-text: #000000; /* --- Формы --- */ --c-input-bg: #fafafa; --c-input-border: #ebebeb; --c-input-text: #737373; --c-input-bg-f: #ffffff; /* фон поля в фокусе */ --c-input-text-f: #000000; /* --- Кнопка переключения темы --- */ --c-toggle-bg: rgba(255, 255, 255, 0.92); --c-toggle-border: #317fb5; --c-toggle-icon: #317fb5; color-scheme: light; } /* ========================================================================= ТЁМНАЯ ТЕМА Палитра тёмно-синяя, в тон фирменному #317fb5 — сайт остаётся узнаваемым. Акцент осветлён до #4d9fd6: исходный #317fb5 на тёмном фоне не добирает контраста для текста (по WCAG AA нужно 4.5:1 для обычного кегля). ========================================================================= */ :root[data-theme="dark"] { --c-bg: #10161d; --c-surface: #18202a; --c-surface-2: #1b2531; --c-surface-3: #161f29; --c-header-bg: rgba(22, 30, 39, 0.92); --c-header-bg-h: rgba(24, 33, 43, 1); /* Нижняя полоса футера: в светлой теме она темнее самого футера (#e0e0e0 против #f5f5f5), поэтому и здесь делаем её темнее --c-surface-2. */ --c-footer-bar: #151d26; --c-border: #2a3542; --c-border-2: #303c4a; --c-border-3: #35424f; --c-border-soft: #29374a; --c-separator: #3a4756; /* Основной текст намеренно не чисто белый и приглушён ещё на пару шагов: на тёмном фоне высокая яркость даёт ореол вокруг букв и читается тяжелее. Контраст с --c-bg остаётся с большим запасом по WCAG AA. */ --c-text: #d5dde5; --c-text-2: #c4ceda; --c-text-3: #b5c0cc; --c-muted: #9aa8b5; --c-muted-2: #8d9baa; --c-muted-3: #9aa8b5; --c-quote: #94a2b0; --c-link: #7fc0ee; --c-link-2: #8fc9f2; --c-accent: #4d9fd6; --c-accent-2: #3d7ba8; --c-accent-soft: #8fa7bd; --c-gold: #e8a83a; --c-danger: #ff7b6e; --c-danger-2: #ff6b5c; /* Статусные плашки: тёмная подложка с цветным оттенком вместо пастели */ --c-error-bg: #3a1f21; --c-error-text: #ffd7d2; --c-success-bg: #1e3324; --c-success-text: #d3f0d8; --c-notice-bg: #16303f; --c-notice-text: #dbeaf5; --c-input-bg: #1c2530; --c-input-border: #33404e; --c-input-text: #c3ccd6; --c-input-bg-f: #222c38; --c-input-text-f: #d5dde5; /* совпадает с --c-text */ --c-toggle-bg: rgba(24, 32, 42, 0.92); --c-toggle-border: #4d9fd6; --c-toggle-icon: #e8a83a; color-scheme: dark; } /* ========================================================================= Фон и текст страницы Правило живёт здесь, а не в style.css, намеренно: style.css подключают и страницы вне общей обвязки (ГМ-панель chat_viewer/chat_monitor, pony.view) со своей тёмной вёрсткой и собственным body{background:grey}. Этот файл они не подключают, поэтому такое разделение их не задевает. ========================================================================= */ body { background-color: var(--c-bg); color: var(--c-text); } /* ========================================================================= Точечные доводки тёмной темы То, что не описывается одной подменой цвета: картинки, спрайты, иконки. ========================================================================= */ /* ВАЖНО про filter: свойство красит элемент ЦЕЛИКОМ, вместе с текстом и всеми потомками. Применять его к блоку, внутри которого есть содержимое, нельзя — именно так пункты меню с подменю (.menu_list — это
  • ) получили инверсию текста и стали чёрными на тёмном фоне. Ниже filter стоит только на пустых элементах, у которых есть лишь фоновая картинка. По той же причине здесь больше нет гашения крупных фоновых артов (.header_image, .download_img, .lk_bg и прочие): все они — контейнеры с контентом, и brightness() притемнял бы вместе с фоном текст поверх него. Если арты в тёмной теме окажутся слишком яркими, гасить их нужно отдельным слоем-подложкой, а не фильтром на контейнере. */ /* Стрелка у пунктов с подменю. В светлой теме это чёрная menu_arrow.png; для тёмной берём готовую белую menu_arrow_hover.png — ту, что сайт показывает при наведении на синем фоне. Подменять картинку безопаснее, чем инвертировать элемент. */ :root[data-theme="dark"] #sitebar_nav .menu_list { background-image: url(../images/menu_arrow_hover.png); } /* Кнопка выхода — спрайт 29x110: верхняя половина тёмная (обычное состояние), нижняя белая (наведение). В тёмной теме сразу показываем белую половину. */ :root[data-theme="dark"] #sitebar_nav .menu .exit_button { background-position: center bottom; } /* Разделитель в ЛК — пустой с фоновой полоской, содержимого нет, поэтому инверсия здесь безопасна. */ :root[data-theme="dark"] .lk_separator { filter: invert(1) brightness(1.6); } /* Иконки в статусных плашках нарисованы на прозрачном фоне и остаются читаемыми, а вот белая обводка тултипа поверх тёмного — нет. */ :root[data-theme="dark"] a.tooltips span, :root[data-theme="dark"] a.tooltips3 span, :root[data-theme="dark"] a.tooltips4 span { background: #000000; border: 1px solid var(--c-border-3); } /* Выпадающее подменю в шапке — страховка, а не лечение. Чёрный текст пунктов вызывал filter выше по файлу, он уже убран. Эти правила оставлены на будущее: цвет в подменю задают сразу четыре правила style.css с разной специфичностью (#sitebar_nav a, ul li:hover a, ul li:hover ul li a, .menu li:hover > ul li), и если при следующей правке одно из них разъедется, пункт снова пропадёт на тёмной подложке. Здесь цвета заданы явно, селекторы длиннее исходных — выигрывают без !important. */ :root[data-theme="dark"] #sitebar_nav .menu ul { background: var(--c-surface-2); } :root[data-theme="dark"] #sitebar_nav ul li ul li, :root[data-theme="dark"] #sitebar_nav ul li ul li a, :root[data-theme="dark"] #sitebar_nav ul li ul li a div, :root[data-theme="dark"] #sitebar_nav ul li:hover ul li, :root[data-theme="dark"] #sitebar_nav ul li:hover ul li a, :root[data-theme="dark"] #sitebar_nav ul li:hover ul li a div, :root[data-theme="dark"] #sitebar_nav .menu li:hover > ul li, :root[data-theme="dark"] #sitebar_nav .menu li:hover > ul li a, :root[data-theme="dark"] #sitebar_nav .menu li:hover > ul li a div { color: var(--c-text); } /* Наведение на сам пункт подменю — синяя заливка и белый текст, как на десктопе в светлой теме. */ :root[data-theme="dark"] #sitebar_nav .menu ul li:hover, :root[data-theme="dark"] #sitebar_nav .menu ul li:hover a, :root[data-theme="dark"] #sitebar_nav .menu ul li:hover a div, :root[data-theme="dark"] #sitebar_nav ul li:hover ul li a:hover, :root[data-theme="dark"] #sitebar_nav ul li:hover ul li a:hover div { color: #ffffff; } /* Мобильное меню-аккордеон: те же пункты, но там правила идут с !important, поэтому перебиваем тем же оружием. */ @media (max-width: 768px) { :root[data-theme="dark"] #sitebar_general_bar nav#sitebar_nav ul.menu li a, :root[data-theme="dark"] #sitebar_general_bar nav#sitebar_nav ul.menu li > div { color: var(--c-text) !important; } :root[data-theme="dark"] #sitebar_general_bar nav#sitebar_nav ul.menu li ul li a, :root[data-theme="dark"] #sitebar_general_bar nav#sitebar_nav ul.menu li ul li > div { color: var(--c-text-2) !important; } } /* Плашка «боссы» и таблицы событий раскрашены собственной игровой палитрой (коричневый/бирюзовый/песочный) — она самодостаточна и на тёмном фоне читается. Трогаем только белую ячейку, которая иначе бьёт по глазам. */ :root[data-theme="dark"] .wedding_table .bosses_title { background: #223040 !important; color: var(--c-text); } /* ========================================================================= Плавающая кнопка переключения темы Разметку вставляет js/theme.js. Слева снизу — правый угол занят виджетом рейтинга (.rmmotop-widget) и кнопкой #scrollUp, а прямо под ней на 30px всплывает «Наверх» (#top-link), поэтому поднимаем на 84px. ========================================================================= */ #theme_toggle { position: fixed; left: 30px; bottom: 84px; z-index: 9998; display: flex; align-items: center; justify-content: center; width: 44px; /* тач-цель не мельче 44px */ height: 44px; padding: 0; border: 1px solid var(--c-toggle-border); border-radius: 50%; background: var(--c-toggle-bg); color: var(--c-toggle-icon); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); cursor: pointer; line-height: 1; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; -webkit-tap-highlight-color: transparent; } #theme_toggle:hover { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35); transform: translateY(-1px); } #theme_toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } #theme_toggle svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Показываем ровно одну иконку: солнце в тёмной теме (клик вернёт светлую), месяц — в светлой. */ #theme_toggle .theme_icon_sun { display: none; } :root[data-theme="dark"] #theme_toggle .theme_icon_sun { display: block; } :root[data-theme="dark"] #theme_toggle .theme_icon_moon { display: none; } @media (max-width: 768px) { #theme_toggle { left: 16px; bottom: 16px; } } @media print { #theme_toggle { display: none; } }