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>
28 lines
3.6 KiB
Markdown
28 lines
3.6 KiB
Markdown
# Итог: тёмная тема 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`.
|
|
- Визуальная проверка обеих тем и переключателя — пользователь.
|