Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- 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-light {
/* == Фоновые цвета == */
/* Основной фон страницы */
--color-surface-0: #F7FAFC; /* Очень светлый, почти белый с холодным оттенком */
/* Фон для карточек, меню, модальных окон и т.д. */
--color-surface-1: #E0F2F7; /* Легкий, нежный бирюзово-голубой оттенок */
/* Дополнительный уровень фона (например, для вложенных элементов или границ) */
--color-surface-2: #D4EBFO; /* Чуть более насыщенный, но все еще светлый бирюзовый оттенок */
/* Вы можете добавить --color-surface-3, --color-surface-4 при необходимости */
/* == Цвета текста == */
/* Основной цвет текста (хорошо читаемый на --color-surface-0 и --color-surface-1) */
--color-base: #37474F; /* Темный серо-синий (шиферный) */
/* Второстепенный, менее акцентированный текст */
--color-subtle: #546E7A; /* Более светлый серо-синий */
/* Выделенный текст (например, заголовки, если они не используют отдельные переменные) */
--color-emphasized: #263238; /* Очень темный серо-синий, почти черный */
/* == Интерактивные элементы (Бирюзовые) == */
/* Ссылки */
--color-link: #00838F; /* Насыщенный, но не слишком яркий бирюзово-голубой (Dark Cyan) */
--color-link--hover: #006064; /* Более темный бирюзово-голубой при наведении */
/* Кнопки и "прогрессивные" элементы */
--color-progressive: #00796B; /* Классический бирюзовый/тиловый (Teal) для кнопок */
--color-progressive--hover: #00695C; /* Темнее при наведении */
--color-progressive--active: #004D40;/* Самый темный тиловый при нажатии */
/* Опционально: Если вы хотите, чтобы основной генерируемый цвет скина был бирюзовым */
/*
--color-primary__h: 175; // Оттенок в HSL для бирюзы (примерно 170-185)
--color-primary__s: 70%; // Насыщенность
--color-primary__l: 45%; // Светлота (средняя, чтобы скин мог генерировать и светлые, и темные вариации)
*/
}
/* --- Темная тема --- */
.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: ... */
}