Главная Инструкция Магазин
Введение Настройки Страницы Редактор

Инструменты разработчика

Цвет

У некоторых HTML-тегов есть акцентный цвет. В светлом дизайне акцентный цвет более темный, а в темном дизайне наоборот, более светлый. Так акцентный цвет всегда выраженный и легко читаемый. Для HTML-тегов и элементов интерфейса мы можем выбрать один из цветов представленных ниже, добавив класс на HTML-тег.
cb-neutral cb-brown cb-blue cb-light-blue cb-aqua cb-green cb-light-green cb-gray cb-pink cb-violet cb-purple cb-red cb-orange cb-yellow
<button class="cb-button-board cb-red">КНОПКА</button>

Свой цвет

Проверяйте цветовое решение в инструментах браузера на контраст 7:1 или выше, чтобы на фоне цвета текст читался легко. Для светлого и темного фона разный акцентный цвет:
cb.themeCreate('cb-custom-purple', '123,3,195', '220,162,255') // className, Day, Night<button class="cb-button-board cb-custom-purple">КНОПКА</button>

Темный фон

Все HTML-теги доступны в темном дизайне.

CветлыйТёмный Включить/выключить темный внешний вид.
cb.nigh = true cb.night = false
Можно выбрать HTML-тегу постоянный фон добавив ему класс.
cb-night
Темный фон
cb-day
Светлый фон
<div class="cb-day">..</div>

CSS

Управлять цветом можно и через свойства языка CSS, вместо класса использовав переменную.
color: rgb(var(--cb-red));

Акцентный цвет

background-color: rgb(var(--primary-color));

Текст и фон

color: rgb(var(--color)); background-color: rgb(var(--background));

Цвет для постоянного фона (темного или светлого)

color: rgb(var(--day-primary-color)); color: rgb(var(--night-primary-color)); color: rgb(var(--cb-day-red)); color: rgb(var(--cb-night-red));

События

Переключение дизайна на светлый или темный cопровождается событием "themechange".
document.addEventListener('themechange', callback)