ayurishchevandClaude Opus 5.5
a6e70ffd1a
Все цвета — CSS-переменные; тёмная палитра по prefers-color-scheme (режим «авто») и принудительно через data-theme; светлая тема не изменилась. Переключатель — пиктограмма в шапке (авто / светлая / тёмная), выбор в localStorage; theme.js ставит тему до отрисовки CSS (без вспышки, без ослабления CSP). QR 2FA на белой подложке. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
3.6 KiB
Итог: тёмная тема UI (изменение 038)
План: PLAN.md (с разделом доработки по проверке пользователя). У UI появилась тёмная тема. По умолчанию тема следует настройке ОС и браузера (prefers-color-scheme),
её можно переключить пиктограммой в шапке: авто / светлая / тёмная. Выбор хранится в браузере (localStorage["ipam.theme"]).
Что сделано
| Файл | Изменение |
|---|---|
web/styles.css |
Все цвета — CSS-переменные в :root, светлые значения прежние. Тёмная палитра в двух одинаковых блоках: @media (prefers-color-scheme: dark){:root:not([data-theme="light"])} для режима «авто» и :root[data-theme="dark"] для принудительной тёмной; color-scheme. Контраст — WCAG AA; в тёмной теме у основных кнопок тёмный текст на светло-синем фоне (белый дал бы ≈2.7:1) |
web/theme.js (новый) |
Синхронно в <head> до CSS ставит data-theme по сохранённому выбору — без вспышки светлой темы. Отдельный файл, так как CSP default-src 'self' запрещает инлайн-скрипты; CSP не менялся |
web/index.html |
<meta name="color-scheme" content="light dark">, подключение theme.js |
web/app.js |
Цвета (utilColor, полосы загрузки, инлайн-стили, иконка логотипа) — через токены. Кнопка-пиктограмма темы в шапке слева от логина (солнце / луна / монитор) с выпадающим списком «Авто (как в системе) / Светлая / Тёмная». QR 2FA — на белой подложке (.qr-frame) ради сканируемости |
README.md |
«Интерфейс» — тёмная тема и переключатель; строка 038 в истории |
Доработка по проверке пользователя
Сначала переключатель был пунктами «Тема: …» в меню логина. По замечанию пользователя вынесен в отдельную пиктограмму на панели шапки; в меню пользователя остались «Сменить пароль», «Двухфакторная аутентификация», «Выйти».
Проверки
-
Светлая тема не изменилась: во всех 49 объявлениях с цветом прежнего
styles.cssпосле подстановки светлых токенов значения совпадают (скриптовое сравнение). -
Литеральные цвета вне токенов:
.qr-frame(белый) — QR 2FA;- стрелка
<select>— SVG вurl(), куда переменную не подставить, поэтому она переопределена в тёмных блоках.
Оба тёмных блока идентичны; заголовок CSP прежний.
-
node --check— чисто; стенд пересобран (--force-recreate), отдаёт новыеstyles.css,app.js,theme.js. -
Визуальная проверка обеих тем и переключателя — пользователь.