Як реалізувати світло або темні режими в CSS

Sep 14, 2025

Як

Специфікація CSS постійно розвивається. Процес для реалізації нових функцій у CSS складається, але спрощена версія полягає в тому, що робоча група CSS вирішує, що нові елементи будуть додані до специфікації. Тоді це до браузерів для реалізації цих нових елементів, а браузери вибирають, у якому для їх реалізації, саме тому ми маємо невідповідність підтримки нових функцій. Хоча це може бути дратуючим часом, це набагато краще зробити це, ніж браузери, що реалізують повну специфікацію, як ми бачили в перші дні Інтернету. Якщо ви турбуєтеся про ваш сайт, який працює над своєю повною здатністю, заручитися підтримкою підтримки веб хостинг Сервіс.

Все це звучить як занадто багато роботи? Тримайте речі просто з Веб-будівельник .

Робоча група CSS складається з членів усіх основних постачальників браузера та інших технологічних компаній, таких як Apple та Adobe. Apple, нещодавно запустивши свою нову версію MacOS, хотів спосіб виявити його snazzy новий темний режим у браузері. Щоб це зробити, Apple виштовхує рекомендацію до специфікації для нового медіа-запиту.

 @Media (волі-колір-схема: світло | темно)
{...}

Використовуючи цей медіа-запит, ми можемо виявити, чи користувач наразі використовує світло або темний режим в ОС. На даний момент це підтримується лише технологією Safari Technology 69 і вище, але інші браузери не повинні бути далеко позаду.

Керівництво веб-дизайнера до методології CSS

Для того, щоб перевірити це, вам потрібно буде оновити Mojave 10.14 (MacOS) та вибрав темний вигляд у системних уподобаннях. Там є кілька способів використовувати цей новий медіа-запит для реалізації різних тем. Ми будемо досліджувати деякі з них зараз у цьому підручнику.

01. Налаштуйте сторінку

Щоб почати, нам потрібно створити деякі HTML-елементи до стилю, тому ми почнемо, створюючи нову ручку на Codepen та додаючи деякі елементи. Ми додамо контейнер для нашого вмісту, щоб центрувати його, а деякі заголовки та текст. Ми встановимо CSS, щоб використовувати SASS, щоб використовувати гніздування в CSS.

 & lt; div class = "контент-контейнер" & gt;
& lt; h1 & gt; заголовок один & lt; / h1 & gt;
& lt; h2 & gt; заголовок двох & lt; / h2 & gt;
& lt; hr & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; / div & gt;

02. Основні елементи стилю

Далі ми додамо деякі основні стилі та включіть деякі шрифти від Google, щоб наша сторінка виглядала трохи красивою. Ми стикуємо всі наші основні елементи, застосовуючи нові розміри шрифту, кольорів та шрифтів.

 Тіло {
Шрифт-Сім'я: "MerriWeather", Serif;
Колір фону: #ededed;
Колір: # 212121;
Поширення: 1.618REM;
Лінійна висота: 1.618;
шрифт: 16px;
}

03. Контейнер стилю

CSS light and dark: style container — Побудуйте контейнер з зручною довжиною лінії

Далі ми стикуємо наш контейнер, щоб зробити вміст комфортною довжиною лінії для читання. Ми також додамо колір фону та тінь. Для того, щоб ввести поле вмісту на сторінці, ми будемо використовувати ключове слово "AUTO" на значенні лівої та правильної значень маржі.

. Контейнер-контейнер {
Комплект: 1.618REM 3.236REM;
Max-ширина: 48.54rem;
маржа: 3.236REM AUTO;
Колір фону: #fff;
Коробка-тінь: 0 0 12PX 6PX RGBA (0,0,0,0,05);
Кордон-радіус :.269666667REM;
}

04. Додайте колір виділення

CSS light and dark: highlight colour — Виберіть колір виділення і зробити стиль для нього

Більшість веб-сайтів десь використовують колір, і на даний момент у нас є тільки білі та сіро, тому тепер давайте виберемо колір виділення та створювати стиль для застосування цього кольору. Ми застосуємо колір за допомогою Span Tag, і буде використовувати його, щоб виділити щось у нашому змісті.

 & lt; span class = "text - alpha" & gt; lorem ipsum & lt; / span & gt;
.Text - Alpha {
Колір: # C3423F;
}

05. Реалізація медіа-запиту

Тепер у нас є сторінка з деякими основними стилями, давайте подивимося, як ми можемо реалізувати медіа-запит. Давайте включимо його і почати перевизначити деякі з наших стилів. Ми почнемо з стилів тіла.

 @Media (Frees-Color-Scheme: Dark)
{
тіло {
Колір фону: # 111;
}
}

06. Перевизначити залишилися стилі

CSS light and dark: override styles — Тепер ви можете перевизначити решту стилів

Тепер, коли ми бачимо, що медіа-запит працює, і наш колір фону тіла змінився, ми повинні перевизначити всі наші залишкові стилі.

. Контейнер-контейнер
{
Колір: білий;
Колір фону: # 212121;
}
.Text - Alpha {
Колір: # 50A8D8;
}

07. Достовність

Хоча те, що ми просто зробили чудово, чудово працює для нашої демонстрації, і може бути збережено на менших веб-сайтах, цей метод буде кошмар, щоб керувати більшим проектом, з великою кількістю різних елементів, які потрібно перевищувати. Ми також робимо важке використання каскаду в нашому прикладі вище, тоді як велика система може вимагати більшої специфіки для того, щоб націлити всі елементи.

08. Візьміть інший підхід

CSS light and dark: another approach — Для швидкого та брудного темного режиму, просто використовуйте "інвертувати" ...

Отже, як ще можна вирішити проблему? Давайте подивимося на фільтри CSS. Одне з цінностей, які ми можемо використовувати на фільтрах CSS, є "інвертувати", тому ми можемо просто застосувати це до HTML та інвертувати всі кольори, надаючи нам "темний режим".

 @Media (Free Free-Color-Scheme: Dark) {
html {
Фільтр: інвертувати (100%);
}
}

09. Додати зображення

CSS light and dark: images — ... звичайно, ваші фотографії будуть виглядати так

Хоча метод фільтра працює з вмістом, який ми маємо у нашому документі, він все ще не виглядає чудово - наша коробка тінь, наприклад, також перевернута, яка виглядає досить дивно. Ми втратили контроль над стилем, який стає ще більшою проблемою, коли у вас є кольорові фони. Ми також маємо всю нову проблему, щоб розглянути, коли задіяні зображення. Давайте подивимося, що відбувається, коли ми додаємо зображення на нашу сторінку.

10. Використовуйте спеціальні властивості

Методи, які ми вже вивчали, або змушують нас втрачати контроль над стилем або вимагають багато технічного обслуговування, щоб переконатися, що все оновлено в темному режимі. Інший спосіб ми можемо підходити до цього: ми можемо використовувати власні властивості, щоб визначити наші кольори, а потім перевизначити їх за допомогою медіа-запиту.

11. Створіть спеціальні властивості

Для того, щоб використовувати спеціальні властивості, ми визначаємо їх у верхній частині наших CSS всередині ' : root Елемент. Кореневий елемент має однаковий обсяг, оскільки HTML, тому буде доступний у всьому світі. Нам потрібно прийняти рішення щодо змінних імен та визначити їх значення.

: Корінь {
- Background-Color: #ededed;
- Довідкова інформація: #fff;
- text-color: # 212121;
- Альфа: # C3423F;
}

12. Застосувати наші власні властивості

Тепер у нас є деякі спеціальні властивості, які ми можемо використовувати їх у наших CSS. Ми почнемо з організму і застосовувати фонове та текстові кольори. Для того, щоб використовувати спеціальну властивість, ми використовуємо " var (- назва власності) 'синтаксис.

 Тіло {
Колір фону: Var (- фон-колір);
Колір: Var (- текст-колір);
}

13. Застосувати залишкові властивості

Використовуючи той самий метод, ми також можемо оновити "фоновий колір" нашого контейнера та "Колір" нашого " текст-альфа «Клас використовувати наші власні властивості. Всі кольори на нашій сторінці тепер керуються за допомогою спеціальних властивостей.

. Контейнер-контейнер {
Колір фону: Var (- сторінка-фон);
}
.Text - Alpha {
Колір: Var (- кольоровий-альфа);
}

14. Повторно додати медіа-запит

Тепер ми можемо повторно додати медіа-запит, але цього разу ми можемо перевизначити власні значення властивості, які знаходяться всередині нього. Ми будемо розміщувати це відразу після оригінального визначення кореня, а всередині медіа-запиту ми можемо просто вибрати нові значення для всіх наших колісних властивостей.

 @Media (Free Free-Color-Scheme: Dark) {
: root {
- Background-Color: # 111;
- фон: # 212121;
- text-color: #ededed;
- Альфа: # 50А8D8;
}
}

15. Візьміть повний контроль

Спеціальні властивості надають нам повний контроль, щоб вибрати, які кольори та інші властивості, які ми змінюємо та використовуємо. Давайте оновимо Shadow на нашому контейнері, щоб зробити це менш прозорою при використанні темного режиму. Для цього потрібно створити нову спеціальну властивість для тіні сторінки.

: Корінь {
...
- Швидша тінь: 0 0 12px 6px rgba
(0,0,0,0,05);
}

16. Нанесіть тінь

Тепер ми створили ще одну спеціальну властивість, яку ми повинні застосувати його до правильного елемента на сторінці. Потім ми можемо перевизначити значення всередині нашого кореневого елемента, щоб зменшити прозорість.

 @Media (Free Free-Color-Scheme: Dark) {
: root {
...
- Сторінка:
0 0 12PX 6PX RGBA (0,0,0,0.33)
;
}
}
. Контейнер-контейнер {
...
Коробка-тінь: var (- тінь сторінки);
}

17. Додайте зображення

Тепер давайте додати зображення назад у наш вміст, а потім ми можемо додати деякі основні стилі, щоб плавати зображення поруч із вмістом.

 IMG {
Ширина: 100%;
Висота: Авто;
поплавок: ліворуч;
Макс-ширина: 300px;
маржа-праворуч: 1.618REM;
маржа-дна: 1.618REM;
}

Як ми бачимо, оскільки ми не використовуємо будь-які фільтри, зображення не змінюється між двома темами.

18. Додайте більше компонентів

Тепер у нас є наші власні властивості, які ми можемо зберігати елементи на сторінку та стилювати їх з нашими змінними. Давайте створимо клас кнопки та додайте кнопку на нашу сторінку.

 .button {
Дисплей: inline-flex;
Шрифт-Сім'я: успадкування;
Колір фону: Var (- кольоровий альфа);
Колір: Var (- текст-колір);
Комплект: 1.618REM 3.236REM;
кордон: 0 немає;
Прикордонний радіус: 0.25REM;
Текст-прикраса: Ні;
}

19. Створіть кнопок стилів на курсі

Використовуючи ті ж змінні, ми також можемо створити стиль пальув, який може бути використаний для обох тем. Для того, щоб досягти цього, ми будемо інвертувати кольори, коли користувач піднімає кнопку та переходить ці властивості, щоб зробити досвід меншою чергуванням.

 .Button {
...
Перехід: фоновий колір 150 мс,
Колір 150 мс;
& amp;: hover {
фоновий колір: var (- текст-колір);
Колір: Var (- кольоровий-альфа);
}
}

20. Зробіть кнопки спеціальних властивостей

Спеціальні властивості мають однаковий обсяг, як регулярні елементи CSS; Це означає, що ми можемо перевизначити їх, використовуючи більш конкретний селектор. Ми можемо скористатися цим та створювати деякі змінні, які облягаються на нашу кнопку.

 .button {
- button-background: var (- color-alpha);
- button-text: var (- фоновий колір);
Колір фону: var (- button background);
Колір: var (- кнопковий текст);
...
}

21. Використовуйте обсяг

CSS light and dark: scope — Використовуйте сферу для створення різних стилів та взаємодій для вашої кнопки

Ми можемо використовувати цей масштаб, щоб створити різні стилі та спрямовані взаємодії для нашої кнопки у темних та легких темах. Ми можемо змінити значення наших змінних на основі медіа-запиту або стану елемента, а не повторити майно з новим значенням, як ми, як правило, будемо.

 .button {
...
& amp;: hover {
--Буттон-фон: # AE3937;
@Media (віддає перевагу-колір-схему: темно) {
- button-background: # 2E98D1;
- button-text: var (- фон-
колір);
}
}
}

Робота на збірку з командою? Тримайте свій процес згуртованим з пристойним хмара зберігання .

Generate, the award winning conference for web designers, returns to NYC on April 24-25! To book tickets visit www.generateconf.com

Ця стаття була опублікована у випуску 283 журналу Creative Web Design Веб-дизайнер . Купити проблему 283 або Підписатися на веб-дизайнер тут .

Пов'язані статті:

Початок роботи з CSS Art
12 чудових ресурсів анімації CSS
Які рамки CSS ви повинні використовувати?

Як реалізувати світло або темні режими в CSS

01. Налаштуйте сторінку

02. Основні елементи стилю

03. Контейнер стилю

04. Додайте колір виділення

05. Реалізація медіа-запиту

06. Перевизначити залишилися стилі

07. Достовність

08. Візьміть інший підхід

09. Додати зображення

10. Використовуйте спеціальні властивості

11. Створіть спеціальні властивості

12. Застосувати наші власні властивості

13. Застосувати залишкові властивості

14. Повторно додати медіа-запит

15. Візьміть повний контроль

16. Нанесіть тінь

17. Додайте зображення

18. Додайте більше компонентів

19. Створіть кнопок стилів на курсі

20. Зробіть кнопки спеціальних властивостей

21. Використовуйте обсяг

Як - Найпопулярніші статті

Створити перспективу в Adobe Illustrator

17 способів малювати кращі істоти

Створіть вітальний інтер'єр за допомогою лінійного мистецтва

Як спроектувати досвід ChatBot

Як створити глазурі з аквареллю

4 Поради щодо оптимізації зображень

Як додати Fun CSS до ваших сайтів

Як поєднувати кольорові олівці

Категорії