Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
- Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
- Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
- Opera: Нажмите Ctrl+F5.
/* --- Светлая тема --- */
.skin-theme-clientpref-day {
/* Ваши переменные для СВЕТЛОЙ темы */
/* Текстовые цвета (темный текст на светлом фоне) */
--color-base: #2f363d;; /* Основной текст: глубокий серо-синий для мягкости */
--color-subtle: #606f7b; /* Второстепенный, неяркий текст: приглушенный серо-синий */
--color-emphasized: #1a1e21; /* Выделенный текст: очень темный, почти черный */
/* Цвета ссылок */
--color-link: #007585;
--color-link--hover: #005F6B;
/* "Прогрессивные" элементы*/
--color-progressive: #008C9E;
--color-progressive--hover: #007585;
--color-progressive--active: #005F6B;
/* Переменные Citizen для фона*/
/* Эти значения создают чистый и светлый фон */
--color-surface-0: #f8f9fa; /* Основной фон страницы: очень светлый, почти белый */
--color-surface-1: #ffffff; /* Фон для элементов типа карточек, меню: чистый белый */
--color-surface-2: #e9ecef; /* Следующий уровень поверхности: легкий серый для разделения */
/* --color-surface-3: #dee2e6; */ /* Пример дополнительного фона, если нужен */
/* --color-surface-4: #ced4da; */ /* Пример еще одного уровня фона */
/* Дополнительно: можно определить основной HSL цвет с бирюзовым оттенком,
если вы хотите, чтобы Citizen генерировал другие элементы на его основе.
Бирюзовый оттенок находится примерно между 180 и 195 градусами для более голубого варианта.
*/
--color-primary__h: 190; // Оттенок бирюзово-голубого
--color-primary__s: 70%; // Насыщенность
--color-primary__l: 40%; // Светлота (достаточно темная для генерации контрастных вариаций)
--color-widget-bg: #e9ecef; /* Цвет фона виджета */
--color-widget-bg-btn: #e9ecef; /* Цвет фона кнопки на виджите */
--color-widget-border: var(--border-color-base); /* Цвет рамки виджета */
}
/* --- Темная тема --- */
.skin-theme-clientpref-night {
/* Ваши переменные для ТЕМНОЙ темы */
/* Текстовые цвета (светлый текст на темном фоне) - используем ваши исходные значения */
--color-base: #E0E0E0; /* Основной текст: светло-серый */
--color-subtle: #bbbbbb; /* Второстепенный, неяркий текст: более тусклый светло-серый (f5f5f5 может быть слишком ярким для "subtle") */
--color-emphasized: #f5f5f5; /* Выделенный текст: почти белый */
/* Цвета ссылок - используем ваши исходные значения */
--color-link: #60bec9;
--color-link--hover: #29d8ef;
/* "Прогрессивные" элементы - используем ваши исходные значения */
--color-progressive: #00acc1;
--color-progressive--hover: #29d8ef;
--color-progressive--active: #29d8ef; /* Можно сделать темнее для активного состояния, например #008a9a */
/* Переменные Citizen для фона (примеры) */
--color-surface-0: #07090d; /* Основной фон страницы (почти черный) */
--color-surface-1: #0a0d14; /* Фон для элементов типа карточек, меню (чуть светлее основного) */
--color-surface-2: #0d121b; /* Следующий уровень поверхности */
/* --color-surface-3: ... */
/* --color-surface-4: ... */
--color-widget-bg: #1E2228; /* Цвет фона виджета */
--color-widget-bg-btn: #171B20; /* Цвет фона кнопки на виджите */
--color-widget-border: #2A2E35; /* Цвет рамки виджета */
}