/* ========================================================================= Тема оформления: светлая (по умолчанию) и тёмная. ========================================================================= Как это работает: 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-overlay-panel: rgba(255, 255, 255, 0.8); /* панель поверх арта, блок новостей */ /* --- Границы --- */ --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-очки, активный пункт меню, оранжевые кнопки */ /* Золото ДЛЯ ТЕКСТА. На белом фоне #df8e0d даёт контраст около 2.4:1 — для заливки, рамки или иконки этого достаточно, для читаемой надписи нет (нужно от 4.5:1). Правило разделения: цвет несёт текст — берём --c-gold-text, цвет заливает или обводит декор — остаётся --c-gold. */ --c-gold-text: #b8730a; /* Шапки таблиц вынесены из --c-accent отдельными токенами: заливка целой строки читается куда ярче, чем кнопка или рамка того же цвета, и в тёмной теме её нужно гасить сильнее акцента. */ --c-table-head: #317fb5; --c-table-subhead: #77b6e2; /* --- Статусы --- */ --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; /* Плашки сообщений витрин (Webmall/WebmallLP) — своя палитра, ярче общей */ --c-msg-info: #89d2fc; --c-msg-success: #cee568; --c-msg-error: #fc5c44; /* --- Формы --- */ --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-overlay-panel: rgba(14, 20, 27, 0.86); --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-gold уже осветлён именно ради читаемости, поэтому текстовый вариант берёт то же значение — третий оттенок здесь не нужен. Расходятся эти два токена только в светлой теме. */ --c-gold-text: #e8a83a; --c-table-head: #285571; /* заметно тише акцента — заливка во всю строку */ --c-table-subhead: #2c4d68; --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; /* Салатовый #cee568 с белым текстом на тёмной странице слепит и почти не читается — берём глубокий зелёный, белый текст на нём даёт 5.6:1. */ --c-msg-info: #1f4a63; --c-msg-success: #2f6136; --c-msg-error: #8c3226; --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); } /* Контентные картинки (иллюстрации статей, скриншоты галереи) на тёмном фоне бьют по глазам белыми полями. Гасим яркость — здесь filter уместен: это сами , текста внутри нет. Иконки интерфейса под правило не попадают: аватары, значки фракций, иконки предметов и картинки в таблицах адресуются своими классами. */ :root[data-theme="dark"] .content_area > img, :root[data-theme="dark"] .content_area > p > img, :root[data-theme="dark"] .article_img, :root[data-theme="dark"] .gallery img { filter: brightness(0.82); } /* Значок «!» в блоках внимания — тот же inline-SVG, что в style.css. Роли цветов сохранены: круглая подложка и знак поверх неё. Белый круг из светлой темы на тёмной плашке был бы пятном, поэтому подложка — приглушённый синий, а знак светлый. Цвет внутри data-URI переменной не задать, поэтому вариант продублирован целиком. */ :root[data-theme="dark"] .attention_block, :root[data-theme="dark"] .login_attention_block, :root[data-theme="dark"] .webmall_attention_block { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='30' fill='%23245069'/%3E%3Crect x='25.5' y='12' width='9' height='25' rx='4.5' fill='%23dcebf7'/%3E%3Ccircle cx='30' cy='45' r='5' fill='%23dcebf7'/%3E%3C/svg%3E"); } /* Логотипы платёжных систем на странице доната — картинки с белой подложкой, на тёмной карточке они светятся. .donate_box пустой (текст лежит рядом, в .donate_block p), поэтому filter здесь безопасен. */ :root[data-theme="dark"] .donate_box { filter: brightness(0.82); } /* Логотипы облачных дисков на странице «Скачать» — тоже светлые картинки. */ :root[data-theme="dark"] .download_link img { filter: brightness(0.82); } /* Два больших арта главной. Гасим их не фильтром (он затемнил бы и текст с меню поверх), а вторым фоновым слоем — сплошным полупрозрачным градиентом под контентом. Слой намеренно растянут на весь блок (100% 100%), а не подогнан под размер картинки. Подгонка по вычисленным пропорциям файла давала ровно то, чего быть не должно: край затемнения проходил поперёк содержимого — по верху таблицы рейтинга гильдий. Растянутый слой границ не имеет, секция просто становится равномерно темнее. */ :root[data-theme="dark"] .header_image { background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(../images/general_header_bg_upscale.webp); background-repeat: no-repeat, no-repeat; background-position: top center, top center; background-size: 100% 100%, clamp(1920px, 80%, 1500px) auto; } :root[data-theme="dark"] .pvp_image { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/pvp_img_upscale.webp); background-repeat: no-repeat, no-repeat; /* Затемняющий слой — от левого верхнего угла: со сдвигом на 130px, как у картинки, верхняя полоса блока осталась бы незатемнённой. */ background-position: 0 0, center 130px; background-size: 100% 100%, clamp(1918px, 80%, 1500px) auto; } /* Информер Яндекс.Метрики в футере отдаётся картинкой со светлым фоном. Инверсия делала из него грязно-серую плашку со светлой рамкой: в оригинале фон не плоский, а с градиентом, и после invert он разъезжается. Цвета в URL информера тоже не помогают — перебор вариантов показал, что сервер рисует светлый фон независимо от переданных значений. Поэтому просто приглушаем картинку как есть: слегка обесцвечиваем, гасим яркость и делаем полупрозрачной, чтобы небольшая светлая плашка не тянула на себя внимание. */ :root[data-theme="dark"] .ym-advanced-informer { filter: grayscale(0.4) brightness(0.85); opacity: 0.7; border-radius: 4px; } /* Иконки соцсетей в футере нарисованы под светлый фон и на тёмном выглядят ярче остального. */ :root[data-theme="dark"] .footer_content_right img { filter: brightness(0.85); } /* Строки таблиц рейтингов подсвечиваются при наведении затемнением (brightness ниже 100% в grb_pvp_tables.css). На тёмном фоне это работает наоборот — строка проваливается, поэтому подсвечиваем осветлением. */ :root[data-theme="dark"] .pvp_full_table tr:nth-of-type(odd):hover, :root[data-theme="dark"] .pvp_full_table tr:nth-of-type(even):hover { filter: brightness(1.35); } /* Иконки в статусных плашках нарисованы на прозрачном фоне и остаются читаемыми, а вот белая обводка тултипа поверх тёмного — нет. */ :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; } }