Переключатель цветовой схемы: радиокнопки, CSS-фильтры и инверсия, SVG-иконки, JS и localStorage

00:00 Интро 00:53 Постановка задачи 01:12 Обзор основы 02:16 Обзор дизайна 03:28 Разметка контрола 05:18 Добавление стилей 05:48 Позиционирование 06:20 Описание группы 06:59 Радиокнопки 07:47 Инверсные иконки 08:56 Блок статуса 10:35 Индикатор статуса 11:55 Красота инверсии 12:43 Подключение JS 13:13 Обзор работы скрипта 14:43 Форсинг темы 15:39 Сетап скрипта 17:08 Сетап свитчера 18:04 Переключение 18:53 Установка схемы 20:28 Сетап схемы 21:40 И ещё демо 22:06 Вывод 22:47 Аутро Нравится? Становитесь патронами
Демо переключателя
Светлая и тёмная темы на CSS
Свойство filter в CSS
Prefers-color-scheme: Hello darkness, my old friend
Improved dark mode default styling with the color-scheme
Фото светлого неба
Фото тёмного неба
* * * Камера: Sony A7C Объектив: Sony 24–70 мм, f/4 Микрофон: Audio-Technica BP40 Свет: Amaran 200d + Light Dome Софт: DaVinci Resolve, iZotope RX