Налаштування та зберігання преференцій кольорової схеми з CSS та дотиком JavaScript

Автор статті, Генрі Блей-Вроман, обговорює новий підхід до створення функції "Темна тема", яка поважає налаштування кольорової схеми системи користувача та дозволяє налаштування на рівні сайту, з використанням CSS та мінімального JavaScript. Він пояснює, як використовувати новий :has() псевдо-клас CSS та вбудовані інтерактивні елементи HTML для взаємодії з користувачем без JavaScript. Це дозволяє підтримувати налаштування кольорової схеми, такі як "Темна тема", без потреби в JavaScript, за винятком невеликої кількості коду для зберігання вибору користувача.

🚀 Блей-Вроман також обговорює важливість врахування системних налаштувань користувача, застосовуючи підхід "Спочатку світлий режим". Це означає, що за замовчуванням використовується світла кольорова схема, яка замінюється темною для користувачів, які її вибирають. Він пояснює, як використовувати медіа-особливість prefers-color-scheme для визначення налаштувань користувача і встановити властивість color-scheme відповідно.

💡 Щодо надання користувачам контролю, автор рекомендує дозволити користувачам самим вибирати між світлою (за замовчуванням) та темною кольоровими схемами на рівні сторінки. Він аргументує, що використання вбудованих елементів HTML для обробки дій користувача, замість, скажімо, вкладеного

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

🧠 Блей-Вроман пояснює, що раніше для реагування на вибір користувача потрібен був JavaScript, наприклад, для встановлення обробника подій на

"Ми передаватимемо дані третім особам."