Реалізація темного режиму за допомогою CSS

Розділ 1: Засяйте ночі темним режимом
Привіт, майбутні веб-розробники! Давайте без зайвих слів перейдемо до кодування, справжньої цікавої частини, згодні? Сьогодні ми збираємося розібратися з крутим трендом, який є у всіх на слуху – темний режим. Ми не переходимо на темний бік просто так, багато людей вважають його комфортнішим для очей, особливо під час перегляду вночі.
Добре, досить балачок, давайте поринемо в океан коду та покатаємося на хвилях CSS.
(H2) Що варто знати про темний режим
Коли ми говоримо про зовнішній вигляд веб-сайту, ми зазвичай маємо на увазі його колірну схему, макет та використання простору. Правильне поєднання може створити чіткий, зрозумілий та приємний досвід для користувача. Темний режим змінює усе, замінивши світлі фони та темний текст, які ми звикли бачити, на атмосферний, тіньовий стиль.
Перш ніж ми надягнемо темні плащі, запам’ятайте – у світі веб-розробки велика сила приходить із великою відповідальністю. Так! CSS означає “Не можу припинити посміхатися”, оскільки ми збираємося здійснити деяку магію кодування.
(H2) Фокусна фокусірування: Медіа-функція CSS prefers-color-scheme
Ось де починається фокус. Медіа-функція “prefers-color-scheme” приходить на допомогу, коли ми хочемо впровадити темний режим. Вона допомагає виявити, чи користувач запросив систему використовувати світлу або темну кольорову тему.
Тепер давайте розносити кілька CSS-кусків!
(H3) Базова структура CSS

css
body {
    color: #333;
    background-color: #fff;
}
@media (prefers-color-scheme: dark) {
    body {
        color: #ddd;
        background-color: #222;
    }
}

У вищезазначеному коді наша веб-сторінка спочатку знаходиться в світлому режимі з білим фоном (#fff) та темним текстом (#333). Але, “ага!”, ми розумно налаштували веб-сторінку переключатися на темний режим з темним фоном (#222) та світло-кольоровим текстом (#ddd), коли користувач вибрав Темну тему. Просто проста зміна в колірній схемі і ось вам, ласкаво просимо на темний бік!
(H2) Доказ темного пудингу
Чи не любите ви, коли ваш код слухається вас послушно? Добре, давайте протестуємо наш темний режим на різних веб-браузерах (Chrome, Firefox, Safari) та операційних системах (macOS, яка пропонує системний темний режим починаючи з версії Mojave, Windows починаючи з версії 1809).
(H2) Заключні штрихи
Отже, ви готові засяяти або затемнити веб-сайти за допомогою CSS. Тепер ваши відвідувачі сайту можуть вибрати свій улюблений режим, не відчуваючи себе як оленя, зловленого в раптовій темряві!
Пам’ятайте, ваша подорож у темний світ CSS тільки почалася. Продовжуйте досліджувати все глибше і глибше в безодню, щоб відкрити більше магії кодування.
До наступного разу, продовжуйте кодити, посміхайтеся і розсвітлюйте веб, навіть у темному режимі!