Создайте универсальную тёмную тему с помощью CSS
Большинство сайтов всё ещё поставляют ослепительно белый фон, и не каждый из них предлагает тёмную тему. С JustZix вы можете привязать CSS-правило к любому URL и принудить тёмный режим, который следует за вами везде. Вот рецепты, которыми я действительно пользуюсь.
Самая быстрая тёмная тема: инвертировать страницу
Самый быстрый трюк — инвертировать весь документ и повернуть оттенок обратно, чтобы цвета остались примерно правильными. Фото и видео тоже инвертируются, так что мы поворачиваем их обратно второй раз.
html {
filter: invert(1) hue-rotate(180deg);
background: #fff;
}
img, video, picture, canvas, iframe, svg,
[style*="background-image"] {
filter: invert(1) hue-rotate(180deg);
}Это победа в одну строку. Она не идеальна — тени выглядят странно, а фирменные цвета сдвигаются — но для быстрого сеанса чтения её не превзойти. Создайте CSS-правило JustZix, сопоставьте его с нужным доменом, вставьте — готово.
Более чистая нативная тёмная тема
Для сайтов, которые вы посещаете ежедневно, тема, настроенная вручную, лучше инверсии. Вместо инвертирования вы напрямую перекрашиваете фоны и текст. Это оставляет изображения и акцентные цвета нетронутыми.
:root {
--bg: #16181c;
--bg-soft: #1f232a;
--text: #d6d9de;
}
html, body {
background-color: var(--bg) !important;
color: var(--text) !important;
}
header, footer, nav, aside, section, article, main,
.card, .panel, .box {
background-color: var(--bg-soft) !important;
color: var(--text) !important;
}
a { color: #6ea8fe !important; }Селекторы намеренно широкие. Точность вам редко понадобится — большинство макетов используют горстку структурных тегов и общие имена классов. Подправьте переменные один раз — и вся страница последует за ними.
Почините яркие остатки
После базовой темы несколько элементов остаются белыми: поля ввода, блоки кода, таблицы. Подметите их одним правилом.
input, textarea, select, button,
pre, code, table, th, td {
background-color: #20242b !important;
color: #d6d9de !important;
border-color: #2f343d !important;
}
::placeholder { color: #6b7280 !important; }
::selection { background: #3b4252; color: #fff; }Только ночью
Если вам нужна тёмная тема только после заката, оберните правило в медиа-запрос, чтобы оно уважало расписание вашей ОС.
@media (prefers-color-scheme: dark) {
html, body { background-color: #16181c !important; color: #d6d9de !important; }
}Советы, экономящие время
- Всегда добавляйте
!important— таблицы стилей сайта загружаются после ваших и переопределят обычные правила. - Начните с трюка инверсии, затем перейдите к нативной теме для своих пяти главных сайтов.
- Держите общий блок переменных
:root, чтобы каждый сайт использовал одну палитру. - Проверьте полосы прокрутки и цвета выделения — их легко забыть, и они портят настроение.
Хотите больше отправных точек? Просмотрите наши готовые примеры или прочтите сопутствующую статью о пользовательских акцентных цветах. Впервые здесь? Скачайте JustZix и вставьте своё первое правило менее чем за минуту.
Оцени эту статью
Оценок пока нет — оцени первым.