/* ═══ НОЧНАЯ ТЕМА ═══════════════════════════════════════════════════════════ Одно место со всеми переопределениями. Атрибут data-theme на ставит маленький скрипт в — до отрисовки, чтобы не мигало светлым. Медиа-запроса prefers-color-scheme здесь нет намеренно: он учитывается тем же скриптом, иначе блок пришлось бы дублировать целиком. ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"]{ /* Токены макета */ --color-tint:#2A2136; --color-surface-2:#241E2E; --color-accent-hover:#B57BE8; --color-text-muted-2:#7E7589; --gradient-header:linear-gradient(160deg,#5F1C8E 0%,#4C1573 46%,#380F57 100%); --shadow-card:none; /* Поверхности */ --color-bg:#141019; --color-surface:#1E1926; --color-surface-hover:#241E2E; --color-surface-sunken:#191423; --color-surface-disabled:#2B2435; --color-toast-surface:#2A2136; --color-code-surface:#0F0B15; --color-code-text:#C8C0D2; /* Текст */ --color-text:#F3EFF7; --color-text-muted:#9A92A6; --color-text-strong:#F3EFF7; --color-text-on-accent:#fff; --color-text-on-accent-strong:rgba(255,255,255,.9); --color-text-on-accent-muted:rgba(255,255,255,.7); /* Границы */ --color-border:#2B2435; --color-checkbox-border:#4A4157; --color-border-subtle:rgba(255,255,255,.1); --color-border-on-accent:#fff; --color-border-on-accent-soft:rgba(255,255,255,.3); /* Акцент */ --color-accent:#9B4DD6; --color-accent-light:#B57BE8; --color-accent-text:#B57BE8; --color-accent-shadow:rgba(0,0,0,.4); --color-accent-surface-ghost:rgba(155,77,214,.18); /* Успех — пара макета #18271F / #6FBF95 */ --color-success-text:#6FBF95; --color-success-strong:#6FBF95; --color-success-border:#6FBF95; --color-success-border-soft:#2A3E33; --color-success-surface:#18271F; --color-success-strong-action:#3E8C68; --color-success-border-note:#2A3E33; --color-success-text-note:#6FBF95; --color-success-surface-flash:#18271F; --color-success-border-flash:#2A3E33; --color-success-text-flash:#6FBF95; --color-online-dot:#6FBF95; --color-offline-dot:#E08E7A; /* Предупреждение — пара макета #2E2718 / #D8B15E */ --color-warning-text:#D8B15E; --color-warning-text-alt:#D8B15E; --color-warning-text-dark:#D8B15E; --color-warning-strong:#D8B15E; --color-warning-border:#D8B15E; --color-warning-border-soft:#3D3524; --color-warning-border-strong:#D8B15E; --color-warning-border-alt:#D8B15E; --color-warning-badge:#D8B15E; --color-warning-surface:#2E2718; --color-warning-surface-soft:#2E2718; --color-warning-surface-hover:#39301D; --color-warning-surface-status:#2E2718; --color-soon-surface:#2E2718; --color-soon-border:#D8B15E; --color-warning-text-soon:#D8B15E; /* Информационные плашки — пара note #2A2418 / #D8C79A */ --color-warning-surface-note:#2A2418; --color-warning-surface-child:#2A2418; --color-warning-border-note:#3A3326; --color-warning-text-note:#D8C79A; /* Ошибка — пара макета #2E1D1A / #E08E7A */ --color-danger-text:#E08E7A; --color-danger-text-strong:#E08E7A; --color-danger-text-dark:#E08E7A; --color-danger-strong:#E08E7A; --color-danger-border:#E08E7A; --color-danger-border-light:#432A25; --color-danger-border-soft:#432A25; --color-danger-border-warn:#432A25; --color-danger-border-chip:#432A25; --color-danger-surface:#2E1D1A; --color-danger-surface-soft:#2E1D1A; --color-danger-surface-light:#2E1D1A; --color-danger-overlay:rgba(224,142,122,.9); --color-destructive:#E08E7A; /* Бейджи */ --color-badge-count:#C25A44; --color-badge-alert:#C25A44; --color-badge-overlay:rgba(0,0,0,.3); /* Режим «только просмотр» */ --color-readonly-surface:#2E2718; --color-readonly-surface-end:#39301D; --color-readonly-border:#3D3524; --color-readonly-text:#D8C79A; /* Календарь, праздники, дни рождения */ --color-calendar-range-surface-soft:rgba(155,77,214,.12); --color-calendar-range-border-soft:rgba(181,123,232,.5); --color-holiday-surface:#2E1D1A; --color-weekend-surface:#241E2E; --color-weekend-text:#E08E7A; --color-category-fallback:#6B6377; --color-birthday-surface:#301E2A; --color-birthday-text:#E08AB4; --color-birthday-dot:#E08AB4; --color-birthday-glow:rgba(224,138,180,.5); --color-meal-surface:#2E2718; --color-info-surface-note:#2A2418; --color-info-text-note:#D8C79A; /* Еда */ --color-food-gap-surface:#2E1D1A; --color-food-gap-border:#432A25; --color-food-cook-surface:#2E2718; --color-food-cook-border:#3D3524; --color-food-cook-text:#D8B15E; --color-food-soup-surface:#1C2A38; --color-food-soup-text:#8FC4E8; --color-food-comp-1:#2B2740; --color-food-comp-2:#1E3129; --color-food-comp-3:#38271F; --color-food-comp-4:#1C2A38; --color-food-comp-5:#341F2C; --color-food-comp-6:#25301E; /* Категории покупок: подложки уходят в тёмное, текст — в светлое */ --color-cat-dairy-fg:#8FBEE8; --color-cat-dairy-bg:#1C2634; --color-cat-cheese-fg:#D8B15E; --color-cat-cheese-bg:#2E2718; --color-cat-meat-fg:#E08E7A; --color-cat-meat-bg:#2E1D1A; --color-cat-fish-fg:#6FC0BE; --color-cat-fish-bg:#152A2A; --color-cat-fruits-fg:#E08AA0; --color-cat-fruits-bg:#301C22; --color-cat-vegs-fg:#6FBF95; --color-cat-vegs-bg:#18271F; --color-cat-bakery-fg:#D8A277; --color-cat-bakery-bg:#2E2418; --color-cat-semi-fg:#B08AE0; --color-cat-semi-bg:#26203A; --color-cat-grains-fg:#C4BE72; --color-cat-grains-bg:#28271A; --color-cat-drinks-fg:#7FB4DE; --color-cat-drinks-bg:#1A2632; --color-cat-sweets-fg:#E08ABE; --color-cat-sweets-bg:#301C2A; --color-cat-snacks-fg:#CBA95E; --color-cat-snacks-bg:#2B2618; --color-cat-eggs-fg:#D8A56E; --color-cat-eggs-bg:#2E2518; --color-cat-frozen-fg:#7FBCDE; --color-cat-frozen-bg:#1A2833; --color-cat-house-fg:#9BB0A4; --color-cat-house-bg:#1E2622; --color-cat-hygiene-fg:#B49AE0; --color-cat-hygiene-bg:#26213A; --color-cat-pharmacy-fg:#B57BE8; --color-cat-pharmacy-bg:#2A2136; --color-cat-other-fg:#A79FB2; --color-cat-other-bg:#241E2E; /* Wildberries */ --color-wb:#E05FC8; --color-wb-surface:#2C1830; --color-wb-surface-item:#241428; --color-wb-surface-new:#33193A; --color-wb-alert-surface:#2E1D1A; --color-wb-border:#5A2E5F; --color-wb-code-surface:rgba(224,95,200,.14); /* Слои и затемнения */ --color-overlay-light:rgba(255,255,255,.14); --color-overlay-lighter:rgba(255,255,255,.1); --color-overlay-light-badge:rgba(255,255,255,.18); --color-backdrop:rgba(0,0,0,.6); --color-lightbox-backdrop:rgba(0,0,0,.95); --color-backdrop-light:rgba(0,0,0,.35); --color-backdrop-strong:rgba(0,0,0,.55); --color-shadow:rgba(0,0,0,.5); } /* Тень карточек в тёмной теме выключена — на тёмном фоне она не читается, а границы карточек и так видны по разнице поверхностей. */ :root[data-theme="dark"] .dnav, :root[data-theme="dark"] .bnav{border-color:var(--color-border)} /* Аватар в шапке остаётся почти белым кружком и в тёмной теме — светлый текстовый акцент на нём не читался бы, берём тёмный тон. */ :root[data-theme="dark"] .havatar{color:#5F1C8E}