/* ========================================================================= theme.css — тёмный слой Bali Moto CRM. Основа — handoff Claude Design «Balinese scooter rental CRM dark theme» (07.08.2026). Палитра оттуда взята как есть (все 16 заявленных значений контраста пересчитаны и сошлись), а вот имена переменных в handoff были выписаны по описанию, а не по исходникам, — здесь они сверены с файлами. Подключать ПОСЛЕДНИМ: после ui.css, appshell.css, desktop.css и экранных стилей. Источник истины — атрибут `data-theme` на , его ставит инлайн-скрипт в до первой отрисовки. Класса на нет намеренно: тела ещё не существует в тот момент, когда тему уже надо применить, а каждый переход в CRM — полная перезагрузка страницы. ⚠️ Весь тёмный слой лежит внутри `@media screen`. Это и есть механика «печать всегда светлая»: на бумагу уходит исходный CSS, который и так светлый. Второго списка значений «как было» не заводим — он разъедется с настоящим при первой же правке палитры. ========================================================================= */ @media screen { /* ------------------------------------------------------------------------- 1. ТОКЕНЫ ДИЗАЙН-СИСТЕМЫ --u-* Палитра тёплая нейтральная (hue ≈ 60–75), а не сине-серая: вечером тёплый нейтральный меньше «звенит» и лучше уживается с фотографиями байков, которые мы не затемняем. ------------------------------------------------------------------------- */ :root[data-theme="dark"] { /* Нативные элементы: без этого date/time-пикеры, select и скроллбары остаются белыми и вспыхивают посреди тёмного экрана. Формы выдачи байка и продления аренды состоят из полей и дат почти целиком. */ color-scheme: dark; /* --- Поверхности. На тёмном иерархию строит светлота, а не тень: чем «выше» слой, тем светлее фон. Шаг ≈ +6–8 по каналу. --- */ --u-page: #1f1e1d; /* было #f4f5f7 — фон приложения */ --u-surface: #262624; /* было #ffffff — карточка, таблица, панель */ --u-subtle: #232221; /* было #fbfcfd — зебра, футеры */ --u-hover: #2c2b29; /* было #fafbfc — ховер строки СВЕТЛЕЕТ */ --u-raised: #30302e; /* выпадашка, поповер, закреплённая шапка */ --u-overlay: #3a3937; /* модалка, шторка, палитра команд */ --u-sunken: #191817; /* трек прогресса, пустое поле, код */ --u-scrim: rgba(0,0,0,.62); /* --- Границы. Отдельно --u-border-strong: только он проходит 3:1 к карточке и потому обязателен для контуров полей, чекбоксов, кнопок. --- */ --u-hairline: #2e2e2c; /* было #f1f2f4 */ --u-border-soft: #343432; /* было #eceef1 */ --u-border: #3f3f3c; /* было #e4e6ea */ --u-border-strong:#767470; /* было #8a9099 */ /* ui.css один раз пишет `var(--u-line, #e4e6ea)` — переменной с таким именем не существует нигде, и в тёмной сработал бы светлый запасной цвет. Определяем её здесь, не трогая светлую (там запасное значение совпадает с --u-border до пикселя). */ --u-line: var(--u-border); /* --- Текст. Чистого белого нет: #f5f4ef снимает резь при вечерней работе, сохраняя 13.9:1 на карточке. --- */ --u-text: #f5f4ef; /* было #111827 */ --u-text-2: #d6d3ca; /* было #374151 */ --u-text-3: #c2c0b6; /* было #4b5563 */ --u-muted: #a5a198; /* было #6b7280 — подписи, 5.1:1 даже на raised */ /* ⚠️ Задумывался «только для крупного и иконок» и потому был темнее (#85827a, 3.99:1 на карточке). По факту им набраны мелкие подписи на каждом втором экране — «за выбранный период», «LTV», «км». Поднят до полноценных 4.5:1 на всех трёх поверхностях, включая приподнятую. */ --u-faint: #999790; /* было #9aa1ab — подписи, иконки, разделители */ /* --- Синий остаётся цветом действия и ссылки. Исходный #2563eb на #1f1e1d даёт 3.0:1 — под порогом; поднят по светлоте до #8ab4ff. ⚠️ Заливка кнопки — ТОТ ЖЕ светлый тон, а не тёмный (см. закон заливки у --u-on-fill ниже). #8ab4ff держит 7.97:1 и как текст на полотне, и как подложка под тёмный текст, поэтому раздваивать его не нужно. --- */ --u-blue: #8ab4ff; /* было #2563eb — ссылка, иконка, акцент */ --u-blue-hover: #a9c7ff; /* на тёмном ховер СВЕТЛЕЕТ */ --u-blue-bg: #1b2a45; /* было #eff4ff */ --u-blue-bd: #5174b4; /* было #d7e2fe — 3.2:1 к карточке, 3.1:1 к плашке */ --u-blue-fg: #a9c7ff; /* было #1d4ed8 — 8.4:1 на --u-blue-bg */ --u-blue-solid: #8ab4ff; /* заливка первичной кнопки, 7.97:1 */ --u-blue-solid-hover:#a9c7ff; --u-on-blue: var(--u-on-fill); /* --- Статусы. Смысл неприкосновенен: красный — долг, янтарный — пора продлевать, зелёный — всё в порядке, серый — нейтральное. Владелец читает их на списке из 37 байков за секунду, поэтому каждая тройка (фон / граница / текст) получила свои тёмные значения. --- */ --u-red: #fca5a5; --u-red-bg: #3a1f1f; --u-red-bd: #ad5654; --u-red-fg: #fca5a5; --u-red-solid:#fca5a5; /* заливка деструктивной кнопки, 8.77:1 */ --u-amber: #f5c26b; --u-amber-bg: #3a2e17; --u-amber-bd: #947532; --u-amber-fg: #f5c26b; --u-amber-solid:#f5c26b; /* 10.15:1 под тёмным текстом */ --u-green: #74d6a0; --u-green-bg: #17301f; --u-green-bd: #40825b; --u-green-fg: #74d6a0; --u-green-solid:#74d6a0; /* 9.41:1 под тёмным текстом */ --u-grey-bg: #2c2b28; /* было #f7f8fa */ --u-grey-bd: #3f3f3c; /* было #e4e6ea */ --u-grey-fg: #c2c0b6; /* было #4b5563 — 7.8:1 на --u-grey-bg */ /* --- «Инвертированная плашка»: активная вкладка, активный пункт рельса, сегмент, тост, кнопка `u-btn--dark`. Переворачивается вместе с темой, иначе получилось бы светлое на светлом. --- */ --u-invert: #f5f4ef; --u-invert-hover:#e4e2d9; --u-on-invert: #1f1e1d; /* --- ЗАКОН ЗАЛИВКИ. В тёмной теме цветная заливка СВЕТЛАЯ, а текст на ней — тёмный. Иначе не сходится: акцент, который читается как текст на полотне, обязан быть светлым, а код в 40 местах красит кнопку тем же `--u-blue`, что и ссылку. Держать акцент светлым, а заливку тёмной можно было бы только раздвоив каждый цвет и переписав те 40 мест. Поэтому светлеют заливки (`*-solid` выше), а переворачивается ОДИН токен — этот. Кнопки, бейджи и полоски чинятся разом. ⚠️ Есть подложки, тёмные в ОБЕИХ темах: лайтбокс, индиго-градиент ассистента, полупрозрачные плашки поверх фото. Там текст обязан остаться светлым — для них --u-on-dark, он темы не знает. --- */ --u-on-fill: #1f1e1d; /* текст поверх цветной заливки — ТЁМНЫЙ */ /* --- Вторая палитра экранного слоя. В светлой у неё свои оттенки (см. ui.css: разница там видна и сохранена), в тёмной обе пары сходятся — держать два почти одинаковых тёмных смысла нет, а один источник правды дешевле. --- */ --u-blue-fg-alt: var(--u-blue-fg); --u-amber-fg-alt: var(--u-amber-fg); --u-green-fg-alt: var(--u-green-fg); --u-green-bd-alt: var(--u-green-bd); /* ⚠️ Эти двое — ЗАЛИВКИ (30 и 22 места против 3 и 2 в роли текста). Светлеют вместе с остальными заливками; подпись на них тёмная. */ --u-green-fill-alt: var(--u-green-solid); --u-amber-fill-alt: var(--u-amber-solid); --u-border-mid: #4a4947; /* было #d0d5dd — «неактивно» */ --u-ink-alt: var(--u-text); /* было #1d2939 — чернила пузыря */ --u-red-fg-strong: var(--u-red-fg); /* было #7f1d1d */ --u-row-red: #2e2220; /* было #fffafa — подсветка просроченной строки */ --u-row-red-hover: #382725; /* было #fff5f5 */ /* Штриховка «ожидаемое продление». Оттенки взяты из tw-слоя ниже (`bg-purple-50/100` → #2a1a3a), чтобы фиолетовый на сайте был один. */ --u-violet-bg: #2a1a3a; /* было #f3e8ff */ --u-violet-bg-2: #3a2450; /* было #e9d5ff */ --u-violet-bd: #8a5bb9; /* было #a855f7 */ --u-violet-bd-strong:#a97fd0; /* было #7e22ce — на тёмном ховер СВЕТЛЕЕТ */ /* --- Тени. На тёмном тень почти не видна — глубину несут --u-raised и --u-overlay. Тени остаются как «отрыв от полотна» у по-настоящему плавающих слоёв: чёрные, растушёванные, плюс светлый волосок сверху. --- */ --u-sh-1: 0 0 0 1px rgba(0,0,0,.35); --u-sh-2: 0 10px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05); --u-sh-3: 0 18px 44px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.07); /* Кольцо фокуса: на светлом хватало 12 % синего, на тёмном такой полупрозрачный синий пропадает — поднимаем до 38 %. */ --u-ring: 0 0 0 3px rgba(138,180,255,.38); --u-ring-color: #8ab4ff; /* Графики: сетка почти не видна, оси на уровне muted, серии разведены по hue при одинаковой светлоте — ни одна не проваливается и не жжёт. */ --u-chart-grid: #333330; --u-chart-axis: #6f6c65; --u-chart-1: #8ab4ff; --u-chart-2: #74d6a0; --u-chart-3: #f5c26b; --u-chart-4: #d99a7a; --u-chart-5: #b39ddb; --u-accent-warm: #d99a7a; /* тёплый акцент темы: тумблер, «Авто» */ } /* Явно фиксируем color-scheme и для светлой: при ручном выборе «Светлая» на системно-тёмной ОС нативные контролы иначе останутся тёмными. */ :root[data-theme="light"] { color-scheme: light; } /* ------------------------------------------------------------------------- 2. ЛОКАЛЬНЫЕ СИСТЕМЫ ЭКРАНОВ Четыре экрана завели собственные наборы переменных ещё до появления дизайн-системы. Про --u-* они не знают, поэтому их переменные переопределяются здесь и АЛИАСЯТСЯ на общие токены — следующая правка палитры дойдёт до них сама, без второго прохода по файлам. ⚠️ Селектор — КЛАСС, а не :root. Эти файлы объявляют переменные на `.d-app` / `.rc` / `.cm` / `.sw`, и объявление на :root проиграло бы им по специфичности: экраны остались бы светлыми, а причина была бы не видна. Отдельно про голые акценты (`--cm-blue`, `--d-green` и т. п.): в этих файлах они работают ЗАЛИВКОЙ под белым текстом (`.cm-btn--pri`, `.d-btn--green`, точки статуса). Поэтому здесь они уходят в *-solid, а не в светлый акцент; пять мест, где тот же токен используется как цвет текста, поправлены точечно ниже. Экран съёмки (`shoot.css`, `--sh-*`) НЕ трогаем: он тёмный по замыслу с самого начала и в светлой теме тоже. ------------------------------------------------------------------------- */ /* Выдача байка и приложение курьера — delivery.css */ :root[data-theme="dark"] .d-app { --d-bg: var(--u-page); --d-surface: var(--u-surface); --d-line: var(--u-border); --d-line-soft: var(--u-border-soft); --d-text: var(--u-text); --d-text-2: var(--u-text-2); --d-muted: var(--u-muted); --d-faint: var(--u-faint); --d-blue: var(--u-blue-solid); --d-blue-dark: var(--u-blue-solid-hover); --d-blue-bg: var(--u-blue-bg); --d-blue-bd: var(--u-blue-bd); --d-blue-fg: var(--u-blue-fg); --d-green: var(--u-green-solid); --d-green-bg: var(--u-green-bg); --d-green-bd: var(--u-green-bd); --d-green-fg: var(--u-green-fg); --d-amber: var(--u-amber-solid); --d-amber-bg: var(--u-amber-bg); --d-amber-bd: var(--u-amber-bd); --d-amber-fg: var(--u-amber-fg); } /* Сверка с таблицей владельца — reconcile.css */ :root[data-theme="dark"] .rc { --rc-bg: var(--u-page); --rc-line: var(--u-border); --rc-ink: var(--u-text); --rc-quiet: var(--u-muted); --rc-blue: var(--u-blue-solid); --rc-blue-d: var(--u-blue-fg); --rc-blue-l: var(--u-blue-bg); --rc-blue-b: var(--u-blue-bd); --rc-green: var(--u-green-solid); --rc-green-d: var(--u-green-fg); --rc-green-l: var(--u-green-bg); --rc-green-b: var(--u-green-bd); --rc-amber: var(--u-amber-solid); --rc-amber-d: var(--u-amber-fg); --rc-amber-l: var(--u-amber-bg); --rc-amber-b: var(--u-amber-bd); --rc-red: var(--u-red-solid); --rc-red-d: var(--u-red-fg); --rc-red-l: var(--u-red-bg); --rc-red-b: var(--u-red-bd); } /* Сравнение периодов — compare.css */ :root[data-theme="dark"] .cm { --cm-bg: var(--u-page); --cm-line: var(--u-border); --cm-ink: var(--u-text); --cm-quiet: var(--u-muted); --cm-blue: var(--u-blue-solid); --cm-blue-d: var(--u-blue-fg); --cm-blue-l: var(--u-blue-bg); --cm-blue-b: var(--u-blue-bd); --cm-green: var(--u-green-solid); --cm-green-d: var(--u-green-fg); --cm-green-l: var(--u-green-bg); --cm-green-b: var(--u-green-bd); --cm-amber: var(--u-amber-solid); --cm-amber-d: var(--u-amber-fg); --cm-amber-l: var(--u-amber-bg); --cm-amber-b: var(--u-amber-bd); } /* Замена байка — swap.css */ :root[data-theme="dark"] .sw { --sw-bg: var(--u-page); --sw-line: var(--u-border); --sw-ink: var(--u-text); --sw-quiet: var(--u-muted); --sw-blue: var(--u-blue-solid); --sw-blue-d: var(--u-blue-fg); --sw-blue-l: var(--u-blue-bg); --sw-blue-b: var(--u-blue-bd); --sw-green-d: var(--u-green-fg); --sw-green-l: var(--u-green-bg); --sw-green-b: var(--u-green-bd); --sw-amber: var(--u-amber-solid); --sw-amber-d: var(--u-amber-fg); --sw-amber-l: var(--u-amber-bg); --sw-amber-b: var(--u-amber-bd); --sw-red: var(--u-red-solid); --sw-red-d: var(--u-red-fg); --sw-red-l: var(--u-red-bg); --sw-red-b: var(--u-red-bd); } /* Главная «Сегодня» — dashboard.html, стили в самом шаблоне. ⚠️ Имена БЕЗ префикса (`--text`, `--blue`): это третья по счёту локальная система, старше остальных. Объявлена сразу на трёх корнях — шторка и тост живут вне #dash, и переменные с одного #dash до них не долетают. Здесь повторён тот же список корней, иначе шторка осталась бы светлой. */ :root[data-theme="dark"] #dash, :root[data-theme="dark"] .d-drawer, :root[data-theme="dark"] .d-toast { --bg-page: var(--u-page); --surface: var(--u-surface); --subtle: var(--u-subtle); --hover: var(--u-hover); --border: var(--u-border); --border-soft: var(--u-border-soft); --hairline: var(--u-hairline); --text: var(--u-text); --text-2: var(--u-text-2); --text-3: var(--u-text-3); --muted: var(--u-muted); --faint: var(--u-faint); --blue: var(--u-blue); --blue-hover: var(--u-blue-hover); --blue-bg: var(--u-blue-bg); --blue-bd: var(--u-blue-bd); --blue-fg: var(--u-blue-fg); --red: var(--u-red); --red-bg: var(--u-red-bg); --red-bd: var(--u-red-bd); --red-fg: var(--u-red-fg); --amber: var(--u-amber); --amber-bg: var(--u-amber-bg); --amber-bd: var(--u-amber-bd); --green: var(--u-green); --green-bg: var(--u-green-bg); --green-bd: var(--u-green-bd); --grey-bg: var(--u-grey-bg); --grey-bd: var(--u-grey-bd); --grey-fg: var(--u-grey-fg); /* Категории задач на главной: возврат — фиолетовый, выдача — бирюзовый. Заливки тёмные, знак на них светлый (закон тёмной темы), контраст знака к своей заливке 7.4:1 и 7.1:1. Фиолетовый берём из общих `--u-violet-*`, чтобы он на сайте был один; для бирюзового общей пары нет — задан здесь. */ --violet: #c0a3e8; --violet-bg: var(--u-violet-bg); --violet-bd: var(--u-violet-bd); --teal: #6fc9ba; --teal-bg: #142f2b; --teal-bd: #2f6d63; --on-fill: var(--u-on-fill); --invert: var(--u-invert); --invert-hover: var(--u-invert-hover); --on-invert: var(--u-on-invert); --border-strong: var(--u-border-strong); --red-fg-strong: var(--u-red-fg); --amber-fg: var(--u-amber-fg); --marker: var(--u-border-strong); /* Доли полосы занятости лежат на дорожке `--border-soft` (#343432) и должны различаться на глаз — отсюда 3.5:1 и 3.7:1, а не токены рамок (те дают 2.5–2.7 и сливаются в одну серую ленту). */ --seg-free: #8a877e; --seg-off: #c07a78; --row-red: var(--u-row-red); --row-red-hover: var(--u-row-red-hover); /* ⚠️ Тост — инвертированная плашка: в тёмной теме он СВЕТЛЫЙ. Поэтому зелёный здесь берётся из светлой палитры (4.98:1 на `--u-invert`), а не из `--u-green-fg`, который рассчитан на тёмную подложку. */ --toast-ok: #047857; } /* Мобильное «Сегодня» — today.css. Экран целиком стоит на `--u-*` и потому переворачивается сам; руками остаются два цвета категорий, заданные там значениями: общей пары `--u-violet-*` / `--u-teal-*` в СВЕТЛОЙ палитре нет, а без переворота фиолетовая и бирюзовая заливки значка остались бы белёсыми пятнами на тёмной карточке. Контраст знака к своей заливке — 7.4:1 и 7.3:1. */ :root[data-theme="dark"] .tm-card.kind-return { --tm-kind-bg: var(--u-violet-bg); --tm-kind-fg: #c0a3e8; } :root[data-theme="dark"] .tm-card.kind-handover { --tm-kind-bg: #142f2b; --tm-kind-fg: #6fc9ba; } /* Лента занятости — calendar3.html, стили в шаблоне. Своя палитра с собственными оттенками (сине-серые, не как у оболочки) и своими именами ролей: `--accent` вместо синего, `--danger-*` вместо красного. */ :root[data-theme="dark"] #cal3 { --bg-page: var(--u-page); --bg-surface: var(--u-surface); --bg-subtle: var(--u-subtle); --bg-header: var(--u-hover); --bg-group: var(--u-grey-bg); --bg-weekend: var(--u-sunken); /* Полупрозрачные накладки выходных и «сегодня» на тёмном пропадают: тёмное поверх тёмного не читается — переворачиваем в светлые. */ --overlay-weekend: rgba(245,244,239,.04); --overlay-today: rgba(138,180,255,.10); --border-strong: var(--u-border-strong); --border: var(--u-border); --border-soft: var(--u-border-soft); --grid-line: var(--u-hairline); --month-line: var(--u-border-mid); --text: var(--u-text); --text-secondary: var(--u-text-2); --text-muted: var(--u-muted); --text-disabled: var(--u-faint); --accent: var(--u-blue); --accent-hover: var(--u-blue-hover); --accent-text: var(--u-blue-fg); --accent-bg: var(--u-blue-bg); --accent-border: var(--u-blue-bd); --danger-text: var(--u-red-fg); --danger-bg: var(--u-red-bg); --danger-border: var(--u-red-bd); --ok-text: var(--u-green-fg); /* Заливка акцента здесь светлая (ЗАКОН ЗАЛИВКИ), значит текст на ней тёмный. */ --on-accent: var(--u-on-fill); --seg-track: var(--u-sunken); --seg-text: var(--u-muted); --ok-bg: var(--u-green-bg); --ok-border: var(--u-green-bd); --ok-line: var(--u-green); --ok-chip-bg: var(--u-green-bg); --warn-text: var(--u-amber-fg); --warn-bg: var(--u-amber-bg); --warn-line: var(--u-amber); --warn-chip-bg: var(--u-amber-bg); --accent-pill-bg: var(--u-blue-bg); --accent-pill-line: var(--u-blue); --accent-pill-text: var(--u-blue-fg); --danger-line: var(--u-red); --neutral-line: var(--u-border-strong); --neutral-text: var(--u-text-2); /* Штриховка «занят не арендой»: в светлой теме два серых ТЕМНЕЕ карточки, в тёмной — два СВЕТЛЕЕ, иначе полоски пропадают в фоне. */ --block-a: var(--u-raised); --block-b: var(--u-overlay); --pre-border: var(--u-border-strong); --chip-flt-x: var(--u-blue-bd); } /* Пять мест, где голый акцент — это ТЕКСТ, а не заливка. Со времён, когда заливка была тёмной; сейчас заливка светлеет вместе с акцентом, и эти правила лишь фиксируют намерение. */ :root[data-theme="dark"] .cm a:hover, :root[data-theme="dark"] .rc a:hover, :root[data-theme="dark"] .sw-move-a, :root[data-theme="dark"] .d-tabs a.is-active, :root[data-theme="dark"] .d-link-sm { color: var(--u-blue); } /* ------------------------------------------------------------------------- 3. НАТИВНЫЕ И ПОГРАНИЧНЫЕ ЭЛЕМЕНТЫ ------------------------------------------------------------------------- */ :root[data-theme="dark"] ::selection { background: #2e4470; color: var(--u-text); } /* Скроллбары: color-scheme делает их тёмными сам, но в WebKit они выходят почти чёрными и «дырявят» полотно — выравниваем по поверхности. */ :root[data-theme="dark"] { scrollbar-color: #45443f var(--u-page); } :root[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } :root[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--u-page); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #45443f; border: 3px solid var(--u-page); border-radius: 8px; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #56554f; } /* Плейсхолдер на тёмном кажется темнее, чем есть: держим на уровне faint. */ :root[data-theme="dark"] ::placeholder { color: var(--u-faint); opacity: 1; } /* Иконка календаря/времени в Chrome остаётся чёрной внутри тёмного поля. */ :root[data-theme="dark"] input::-webkit-calendar-picker-indicator { filter: invert(.85); } /* Автозаполнение Chrome заливает поле ярко-жёлтым. Лечится только inset-тенью: background-color в этом состоянии не переопределяется. */ :root[data-theme="dark"] input:-webkit-autofill, :root[data-theme="dark"] textarea:-webkit-autofill, :root[data-theme="dark"] select:-webkit-autofill { -webkit-text-fill-color: var(--u-text); -webkit-box-shadow: 0 0 0 1000px var(--u-sunken) inset; caret-color: var(--u-text); } /* Фокус: кольцо видно только с клавиатуры, мышиный клик его не показывает. */ :root[data-theme="dark"] :focus-visible { outline: 2px solid var(--u-ring-color); outline-offset: 2px; } /* Карты Leaflet: фильтр вешаем ТОЛЬКО на слой тайлов. Маркеры, попапы и контролы живут в других панах, их цвета (красный — долг, зелёный — ок) остаются точными. Белая карта — самая яркая поверхность вечернего экрана, поэтому гасим её, но не инвертируем: инверсия ломает узнаваемость береговой линии Бали и делает воду светлее суши. */ :root[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.78) contrast(1.06) saturate(.82); } :root[data-theme="dark"] .leaflet-container { background: var(--u-sunken); } :root[data-theme="dark"] .leaflet-popup-content-wrapper, :root[data-theme="dark"] .leaflet-popup-tip, :root[data-theme="dark"] .leaflet-control-zoom a, :root[data-theme="dark"] .leaflet-bar { background: var(--u-raised); color: var(--u-text); border-color: var(--u-border); } :root[data-theme="dark"] .leaflet-control-attribution { background: rgba(31,30,29,.8); color: var(--u-muted); } /* Фотографии байков, аватарки и сканы документов не затемняем ничем. ⚠️ Общего `img { filter: none !important }` здесь намеренно НЕТ: в courier.css есть осознанный `filter: grayscale(1)` на иконке закрытой задачи, и глобальное правило его бы стёрло. */ /* Уважаем запрос на повышенный контраст: усиливаем границы и подписи. */ @media (prefers-contrast: more) { :root[data-theme="dark"] { --u-border: var(--u-border-strong); --u-muted: var(--u-text-3); } } /* ------------------------------------------------------------------------- 4. СЛОЙ СОВМЕСТИМОСТИ С TAILWIND Утилиты Tailwind несут цвет ЗНАЧЕНИЕМ, а не токеном, поэтому смена темы их не достаёт: `bg-white` остался бы белым листом посреди тёмной страницы. Это 1289 вхождений в 30 шаблонах — «Деньги», карточка инвестора, календарь, закрытие месяца. Слой перекрывает их по РОЛИ, а не по оттенку: подложка плашки, граница, текст, заливка кнопки. Работает потому, что theme.css подключён ПОСЛЕ tw.css и селектор `:root[data-theme="dark"] .bg-white` сильнее, чем `.bg-white`. Светлой темы слой не касается вовсе. Значения: для красного, янтарного, зелёного и синего — ссылки на токены (один источник правды). Для indigo, purple, orange, teal, rose, yellow токенов в системе нет — их тёмные значения ВЫЧИСЛЕНЫ: тон свой, светлота подобрана под порог контраста (текст 4.5:1 к своей плашке и к карточке, граница 3:1, светлый текст на заливке 4.5:1). Усреднять светлоту по тонам нельзя — при одной и той же светлоте синий и жёлтый светят по-разному. ⚠️ Файл собран генератором со сверкой на полноту: каждая утилита из шаблонов либо перекрыта, либо в списке осознанных пропусков. Пропуски — `text-gray-100/200/300` и `border-gray-700` (светлый текст на захардкоженной тёмной панели `bg-[#17212b]` в превью Telegram), `bg-black/55` и `ring-white` (поверх фото и цветной заливки). Добавили в шаблон новый цветовой класс — прогнать генератор заново, иначе он молча останется светлым. ------------------------------------------------------------------------- */ /* --- Поверхности и нейтральный текст --- */ :root[data-theme="dark"] .bg-gray-100, :root[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--u-hover); } :root[data-theme="dark"] .bg-gray-200, :root[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--u-raised); } :root[data-theme="dark"] .bg-gray-300, :root[data-theme="dark"] .hover\:bg-gray-300:hover { background-color: var(--u-overlay); } /* ⚠️ `bg-gray-700/800/900` — не поверхность, а ИНВЕРТИРОВАННАЯ плашка: все пять мест в разметке идут вместе с `text-white` (активный сегмент плотности в календаре, кнопка «Сегодня», активная вкладка в закрытии месяца и в канале). Если отдать их тёмной поверхности, они сольются с фоном, а `text-white` по ЗАКОНУ ЗАЛИВКИ теперь тёмный — выходит 1.26. Поэтому плашка переворачивается вместе с темой: светлая заливка, тёмный текст. Точно так же ведут себя `.u-tab.is-active` и `.u-seg`. */ :root[data-theme="dark"] .bg-gray-700, :root[data-theme="dark"] .bg-gray-800, :root[data-theme="dark"] .bg-gray-900 { background-color: var(--u-invert); } :root[data-theme="dark"] .hover\:bg-gray-800:hover { background-color: var(--u-invert-hover); } :root[data-theme="dark"] .bg-gray-50 { background-color: var(--u-subtle); } :root[data-theme="dark"] .bg-white { background-color: var(--u-surface); } :root[data-theme="dark"] .border-gray-100, :root[data-theme="dark"] .divide-gray-100>:not([hidden])~:not([hidden]) { border-color: var(--u-hairline); } :root[data-theme="dark"] .border-gray-200 { border-color: var(--u-border-soft); } :root[data-theme="dark"] .border-gray-300 { border-color: var(--u-border); } :root[data-theme="dark"] .border-gray-500, :root[data-theme="dark"] .border-gray-800, :root[data-theme="dark"] .group:hover .group-hover\:border-gray-400, :root[data-theme="dark"] .hover\:border-gray-400:hover { border-color: var(--u-border-strong); } :root[data-theme="dark"] .border-gray-700 { border-color: var(--u-overlay); } /* Оба употребления — рамка той самой инвертированной плашки (`bg-gray-900 text-white border-gray-900`), поэтому цвет заливки. */ :root[data-theme="dark"] .border-gray-900 { border-color: var(--u-invert); } :root[data-theme="dark"] .hover\:text-gray-700:hover, :root[data-theme="dark"] .text-gray-700 { color: var(--u-text-2); } :root[data-theme="dark"] .hover\:text-gray-900:hover, :root[data-theme="dark"] .text-gray-800, :root[data-theme="dark"] .text-gray-900 { color: var(--u-text); } :root[data-theme="dark"] .hover\:text-white:hover, :root[data-theme="dark"] .text-white { color: var(--u-on-fill); } :root[data-theme="dark"] .ring-gray-200 { --tw-ring-color: var(--u-border-soft); } :root[data-theme="dark"] .ring-gray-300 { --tw-ring-color: var(--u-border); } :root[data-theme="dark"] .text-gray-400 { color: var(--u-faint); } :root[data-theme="dark"] .text-gray-500 { color: var(--u-muted); } :root[data-theme="dark"] .text-gray-600 { color: var(--u-text-3); } /* --- Смысловые цвета: подложка, граница, текст, заливка --- */ :root[data-theme="dark"] .bg-amber-100, :root[data-theme="dark"] .bg-amber-200, :root[data-theme="dark"] .bg-amber-50 { background-color: var(--u-amber-bg); } :root[data-theme="dark"] .bg-amber-300, :root[data-theme="dark"] .bg-amber-400, :root[data-theme="dark"] .bg-amber-500, :root[data-theme="dark"] .bg-amber-600 { background-color: var(--u-amber-solid); } :root[data-theme="dark"] .bg-blue-100, :root[data-theme="dark"] .bg-blue-50 { background-color: var(--u-blue-bg); } :root[data-theme="dark"] .bg-blue-500, :root[data-theme="dark"] .bg-blue-600 { background-color: var(--u-blue-solid); } :root[data-theme="dark"] .bg-emerald-100, :root[data-theme="dark"] .bg-emerald-50 { background-color: var(--u-green-bg); } :root[data-theme="dark"] .bg-emerald-300, :root[data-theme="dark"] .bg-emerald-400, :root[data-theme="dark"] .bg-emerald-500, :root[data-theme="dark"] .bg-emerald-600 { background-color: var(--u-green-solid); } :root[data-theme="dark"] .bg-indigo-50 { background-color: #1a1d3a; } :root[data-theme="dark"] .bg-indigo-600, :root[data-theme="dark"] .hover\:bg-indigo-700:hover { background-color: #5360e1; } :root[data-theme="dark"] .bg-orange-100, :root[data-theme="dark"] .bg-orange-50 { background-color: #3a281a; } :root[data-theme="dark"] .bg-purple-100, :root[data-theme="dark"] .bg-purple-50 { background-color: #2a1a3a; } :root[data-theme="dark"] .bg-purple-600, :root[data-theme="dark"] .hover\:bg-purple-700:hover { background-color: #9245de; } :root[data-theme="dark"] .bg-red-100, :root[data-theme="dark"] .bg-red-50 { background-color: var(--u-red-bg); } :root[data-theme="dark"] .bg-red-400, :root[data-theme="dark"] .bg-red-500, :root[data-theme="dark"] .bg-red-600 { background-color: var(--u-red-solid); } :root[data-theme="dark"] .bg-teal-600 { background-color: #167b6e; } :root[data-theme="dark"] .border-amber-200, :root[data-theme="dark"] .border-amber-300, :root[data-theme="dark"] .border-amber-500 { border-color: var(--u-amber-bd); } :root[data-theme="dark"] .border-blue-200, :root[data-theme="dark"] .border-blue-300, :root[data-theme="dark"] .focus\:border-blue-500:focus { border-color: var(--u-blue-bd); } :root[data-theme="dark"] .border-emerald-100, :root[data-theme="dark"] .border-emerald-200, :root[data-theme="dark"] .border-emerald-300, :root[data-theme="dark"] .border-emerald-600, :root[data-theme="dark"] .hover\:border-emerald-400:hover { border-color: var(--u-green-bd); } :root[data-theme="dark"] .border-indigo-200, :root[data-theme="dark"] .focus\:border-indigo-400:focus { border-color: #6069bb; } :root[data-theme="dark"] .border-orange-200 { border-color: #9b6b43; } :root[data-theme="dark"] .border-purple-200, :root[data-theme="dark"] .border-purple-400 { border-color: #8a5bb9; } :root[data-theme="dark"] .border-red-200, :root[data-theme="dark"] .border-red-300 { border-color: var(--u-red-bd); } :root[data-theme="dark"] .focus\:ring-blue-500:focus, :root[data-theme="dark"] .hover\:ring-blue-500:hover, :root[data-theme="dark"] .ring-blue-200, :root[data-theme="dark"] .ring-blue-300, :root[data-theme="dark"] .ring-blue-400 { --tw-ring-color: var(--u-blue-bd); } :root[data-theme="dark"] .hover\:bg-amber-100:hover, :root[data-theme="dark"] .hover\:bg-amber-50:hover { background-color: #4e3e1f; } :root[data-theme="dark"] .hover\:bg-amber-700:hover { background-color: #9c6213; } :root[data-theme="dark"] .hover\:bg-blue-100:hover, :root[data-theme="dark"] .hover\:bg-blue-50:hover { background-color: #233659; } :root[data-theme="dark"] .hover\:bg-blue-600:hover { background-color: #2568de; } :root[data-theme="dark"] .hover\:bg-emerald-100:hover, :root[data-theme="dark"] .hover\:bg-emerald-50:hover { background-color: #20432b; } :root[data-theme="dark"] .hover\:bg-emerald-700:hover { background-color: #1b7e54; } :root[data-theme="dark"] .hover\:bg-indigo-100:hover { background-color: #23274d; } :root[data-theme="dark"] .hover\:bg-orange-50:hover { background-color: #4d3623; } :root[data-theme="dark"] .hover\:bg-red-50:hover { background-color: #4c2929; } :root[data-theme="dark"] .hover\:bg-red-700:hover { background-color: #ca3836; } :root[data-theme="dark"] .hover\:bg-yellow-50:hover { background-color: #4d4523; } :root[data-theme="dark"] .hover\:text-blue-800:hover { color: #d6e4ff; } :root[data-theme="dark"] .hover\:text-red-600:hover { color: #fdd1d1; } :root[data-theme="dark"] .ring-amber-200, :root[data-theme="dark"] .ring-amber-300, :root[data-theme="dark"] .ring-amber-400 { --tw-ring-color: var(--u-amber-bd); } :root[data-theme="dark"] .ring-emerald-200 { --tw-ring-color: var(--u-green-bd); } :root[data-theme="dark"] .ring-orange-200 { --tw-ring-color: #9b6b43; } :root[data-theme="dark"] .ring-purple-200 { --tw-ring-color: #8a5bb9; } :root[data-theme="dark"] .ring-red-200, :root[data-theme="dark"] .ring-red-300 { --tw-ring-color: var(--u-red-bd); } :root[data-theme="dark"] .ring-rose-400 { --tw-ring-color: #b4505e; } :root[data-theme="dark"] .text-amber-400, :root[data-theme="dark"] .text-amber-600, :root[data-theme="dark"] .text-amber-700, :root[data-theme="dark"] .text-amber-800, :root[data-theme="dark"] .text-amber-900 { color: var(--u-amber-fg); } :root[data-theme="dark"] .text-blue-400, :root[data-theme="dark"] .text-blue-500, :root[data-theme="dark"] .text-blue-600, :root[data-theme="dark"] .text-blue-700, :root[data-theme="dark"] .text-blue-800, :root[data-theme="dark"] .text-blue-900 { color: var(--u-blue-fg); } :root[data-theme="dark"] .text-emerald-600, :root[data-theme="dark"] .text-emerald-700, :root[data-theme="dark"] .text-emerald-800, :root[data-theme="dark"] .text-emerald-900 { color: var(--u-green-fg); } :root[data-theme="dark"] .text-indigo-700, :root[data-theme="dark"] .text-indigo-800 { color: #7984f0; } :root[data-theme="dark"] .text-orange-700, :root[data-theme="dark"] .text-orange-800 { color: #e67519; } :root[data-theme="dark"] .text-purple-700, :root[data-theme="dark"] .text-purple-800, :root[data-theme="dark"] .text-purple-900 { color: #af70ef; } :root[data-theme="dark"] .text-red-500, :root[data-theme="dark"] .text-red-600, :root[data-theme="dark"] .text-red-700, :root[data-theme="dark"] .text-red-800 { color: var(--u-red-fg); } :root[data-theme="dark"] .text-teal-600, :root[data-theme="dark"] .text-teal-700 { color: #14b29e; } /* --- Градиент шапки карточки инвестора (единственный в проекте) --- */ :root[data-theme="dark"] .from-emerald-50 { --tw-gradient-from: var(--u-green-bg) var(--tw-gradient-from-position); --tw-gradient-to: rgba(23,48,31,0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } :root[data-theme="dark"] .to-emerald-100\/40 { --tw-gradient-to: rgba(32,67,43,.4) var(--tw-gradient-to-position); } /* ======================================================================= МОБИЛЬНЫЙ СЛОЙ — точечные добивки Мобильные экраны — отдельная разметка (`_<экран>_mobile.html`) и отдельный CSS, поэтому мимо токенов они прошли своим списком. Ниже ровно те места, где цвет был вписан числом: светлая заливка, которая вечером остаётся светлым пятном, и тёмный текст, который на ставшей тёмной подложке пропадает. Классы мобильные, так что медиазапрос не нужен — в десктопной разметке их просто нет. ===================================================================== */ /* Столбики «доход по месяцам»: нейтральный столбец был #cfd4dc — в светлой теме тихий серый, в тёмной самый яркий элемент экрана. Он обязан быть тише акцентных (--u-blue), иначе диаграмма читается наоборот. */ :root[data-theme="dark"] .anm-col-bar { background: var(--u-border-mid); } /* Карточки-состояния: заливка была почти белой (#fffdf7 / #f6fefa / #fffbfb) при цветной рамке. Берём мягкую подложку того же цвета. */ :root[data-theme="dark"] .bkc-card.is-todo { background: var(--u-amber-bg); } :root[data-theme="dark"] .bn-b.is-done { background: var(--u-green-bg); } :root[data-theme="dark"] .chm-card--bad { background: var(--u-red-bg); } /* Закрытие месяца: бейдж внутри янтарной карточки был светлым, а текст на нём — янтарным, то есть светлое по светлому. Подзаголовок проверки — тёмно-коричневый #7a2e0e на тёмной карточке (1.5:1). */ :root[data-theme="dark"] .co-warn-n { background: rgba(245,194,107,.16); color: var(--u-amber-fg); } :root[data-theme="dark"] .co-check-t { color: var(--u-amber-fg); } /* Курьер: дорожка прогресса и подсветка нажатия — заливки, а не акценты. */ :root[data-theme="dark"] .c-bar { background: var(--u-border); } :root[data-theme="dark"] .c-shots:active { background: var(--u-hover); } /* Пруф платежа: пунктирная кнопка «прикрепить» — роль тихая, поэтому не светлая плашка по ЗАКОНУ ЗАЛИВКИ, а приглушённая подложка. Подпись и список файлов были тёмными (2.8–3.0:1). */ :root[data-theme="dark"] .rm-proof-btn { background: var(--u-subtle); color: var(--u-text-2); } :root[data-theme="dark"] .rm-proof-h { color: var(--u-muted); } :root[data-theme="dark"] .rm-proof-list:not(:empty) { color: var(--u-green-fg); } :root[data-theme="dark"] .rm-proof-thumb { background: var(--u-border-soft); } /* Нижние панели действий на телефоне (карточка брони и карточка аренды). Заливка была задана не hex-ом, а `rgba(255,255,255,.96)` — поиск по числам её не видел, а на экране это белая плита во всю ширину под большим пальцем. Заодно чинится текст на ней: янтарная подсказка на белом давала 1.64:1, серая надпись кнопки — 4.27:1. */ :root[data-theme="dark"] .bkc-bar, :root[data-theme="dark"] .rm-bar-acts { background: rgba(38,38,36,.96); } /* Подпись поверх фотографии байка: белая плашка со светлым текстом. */ :root[data-theme="dark"] .bk-shot-tag { background: rgba(31,30,29,.86); } /* Приглушённая кнопка в карточке тревоги: полупрозрачный белый по тёмной подложке давал светлое на светлом при унаследованном цвете текста. */ :root[data-theme="dark"] .rm-alert-cta--ghost { background: rgba(255,255,255,.10); } /* Чат с ассистентом: выключенная кнопка отправки была светло-серой заливкой — на тёмном она читалась как активная. */ :root[data-theme="dark"] .aic-send:disabled { background: var(--u-border-mid); color: var(--u-faint); } /* Форматированный ответ ассистента: заголовок #1d2939 давал 1.04:1 — текст был не бледным, а буквально невидимым. */ :root[data-theme="dark"] .ai-fmt-h { color: var(--u-text); } /* Пометка «из архива» (аренда и договор) и «добавлен» у инвестора. У .bm-fromarch рамка тоже была числом (#e2e8f0) — на тёмной карточке светлый контур обводил кнопку ярче, чем её собственный текст. */ :root[data-theme="dark"] .bm-fromarch { border-color: var(--u-border); } :root[data-theme="dark"] .bm-fromarch, :root[data-theme="dark"] .ct-fromarch { color: var(--u-muted); } :root[data-theme="dark"] .ivm-added span { color: var(--u-green-fg); } } /* @media screen */ /* ========================================================================= 5. ТУМБЛЕР ТЕМЫ Стили нужны в обеих темах, поэтому живут вне @media screen. На печати тумблер скрыт — на бумаге он бессмыслен. ========================================================================= */ .bm-theme { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: var(--u-grey-bg); border: 1px solid var(--u-border); border-radius: 999px; } /* Подписи заменены значками (08.08.2026, просьба владельца). Имя кнопки теперь несёт `aria-label`, а размер задаёт сам значок: 16 px рисунка плюс поля до 30×28 — меньше на телефоне уже промах пальцем. */ .bm-theme__opt { appearance: none; border: 0; background: transparent; color: var(--u-muted); font: inherit; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 6px 7px; border-radius: 999px; cursor: pointer; white-space: nowrap; } .bm-theme__opt svg { width: 16px; height: 16px; display: block; } .bm-theme__opt:hover { color: var(--u-text-2); } .bm-theme__opt[aria-checked="true"] { background: var(--u-surface); color: var(--u-text); box-shadow: var(--u-sh-1); } .bm-theme__opt:focus-visible { outline: 2px solid var(--u-ring-color); outline-offset: 1px; } @media screen { /* На тёмном тень плашку не показывает — берём светлоту и контур. */ :root[data-theme="dark"] .bm-theme__opt[aria-checked="true"] { background: var(--u-raised); color: var(--u-text); box-shadow: inset 0 0 0 1px var(--u-border-strong); } } @media print { .bm-theme { display: none; } }