/* .no-dark — escape-hatch: елемент і його нащадки НЕ перефарбовуються темою. Потрібен там, де стилі задає користувач (міні-прев'ю листа в конструкторі розсилки): вони мають виглядати рівно так, як побачить клієнт. Саме прев'ю листа — в iframe, тож туди CSS теми й так не потрапляє. */ /** * 🌙 Темна тема кабінетів (вендор + адмінка). * Вмикається data-theme="dark" на (тумблер у сайдбарі, стан у localStorage). * Вітрини НЕ стосується — там свідомо світла handmade-естетика. * * Три шари: * 1) семантичні токени (--color-*, --vp-*, --ap-*) — усе, що написане змінними, темніє саме; * 2) класи компонентів (.vp-card/.vp-btn/.admin-card/таблиці/поля) — явні правила; * 3) інлайнові фони/кольори, яких у кабінетах багато — атрибутні селектори + !important * (інакше інлайн-стиль перемагає будь-який клас). */ /* ⚪ Світлі теми — кажемо схему явно. Без цього користувач із ТЕМНОЮ системою бачив би на світлій сторінці темні нативні попапи: та сама неузгодженість, лише навпаки. Тут, а не у variables.css: адмінка variables.css не вантажить взагалі, а dark.css — так, тож це єдине місце, спільне для всіх трьох кабінетів. */ :root[data-theme^="light"], :root:not([data-theme]) { color-scheme: light; } /* 🔽 Розкритий список , скролбари, автозаповнення, календар . Тож на темній сторінці випадав білий системний список із синім виділенням — селект виглядав чужим, і полагодити це стилями .ui-select було неможливо: попап не в нашому DOM. color-scheme каже браузеру, у якій схемі малювати ЙОГО частину. Один рядок замість власного дропдауна — і з рідною доступністю та мобільним UX. ⚠️ Але сам СПИСОК у .cs-wrap; його стилі (main.css) світло-онлі (background:white) → у темних темах плашка випадала біла. dark.css вантажать лише адмінка/вендор/менеджер — вітрини це НЕ стосується. */ :root[data-theme^="dark"] .cs-trigger { background: var(--ui-field-bg, var(--surface-2, var(--color-bg-alt))) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } :root[data-theme^="dark"] .cs-panel { background: var(--surface, var(--color-bg-alt)) !important; border-color: var(--color-border) !important; box-shadow: 0 10px 32px rgba(0,0,0,.45) !important; } :root[data-theme^="dark"] .cs-option { color: var(--color-text) !important; } :root[data-theme^="dark"] .cs-option:hover { background: color-mix(in srgb, var(--color-accent) 16%, transparent) !important; color: var(--color-accent) !important; } :root[data-theme^="dark"] .cs-option.cs-selected { background: color-mix(in srgb, var(--color-accent) 12%, transparent) !important; color: var(--color-accent) !important; }