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

Рет қаралды 19,435

Күн бұрын

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 Аутро
Нравится? Становитесь патронами / pepelsbey
Демо переключателя pepelsbey.github.io/playgroun...
Светлая и тёмная темы на CSS • Светлая 🌕 и тёмная 🌑 т...
Свойство filter в CSS developer.mozilla.org/en-US/d...
Prefers-color-scheme: Hello darkness, my old friend web.dev/prefers-color-scheme/
Improved dark mode default styling with the color-scheme web.dev/color-scheme/
Фото светлого неба unsplash.com/photos/G-6kwVnClsE
Фото тёмного неба unsplash.com/photos/ZPRgmVqgPj0
* * *
Камера: Sony A7C
Объектив: Sony 24-70 мм, f/4
Микрофон: Audio-Technica BP40
Свет: Amaran 200d + Light Dome
Софт: DaVinci Resolve, iZotope RX

Пікірлер: 140

@pepelsbey 2 жыл бұрын

@teinett 2 жыл бұрын

"Мы не рисуем сову" ❤️ Эти страдают многие туториалы, но не видео Вадима. Большое спасибо! :)

@ShamanKingTrue Жыл бұрын

Офигеть как круто и красиво реализовано, сколько находил туториалов по дарк моду, этот пока самый крутой

@RostyslavFutornyi 2 жыл бұрын

Мощное видео, очень подробно и продуманно. Крут! Буду теперь юзать в своих проектах

@drmonochromer 2 жыл бұрын

Можно повесить один обработчик вместо трех для события `change` на корневой элемент `switcher`

@antoha00894 2 жыл бұрын

Как раз делал такой функционал несколько дней назад, круто, что, оказывается, делал как сам гуру

@IIYTHNK Жыл бұрын

Спасибо за интересный и нужный материал! Очень нравится лаконичная, цельная, без 'воды' подача.

@artyomnomnom 2 жыл бұрын

Вижу Вадим читает все комментарии, тогда напишу: спасибо за видео :)

@vyacheslavvasilev1776 6 ай бұрын

Спасибо за подробное и четкое объяснение!

@ea4613 Жыл бұрын

Спасибо за информацию и такую подачу 🤝👍♥️

@VIMPdev 2 жыл бұрын

Способ анимации переключения топ!) Взял на заметку)

@shtirlizc1024 2 жыл бұрын

Класс! Отдельное спасибо за подробные объяснения мелочей

@LiebGoth 2 жыл бұрын

Очень информативный видос, как всегда, благодарю

@kostk1987 2 жыл бұрын

Спасибо за ролик. Жду не дождусь следующего контента. Привет с Израиля

@den-rad 2 жыл бұрын

Спасибо, узнал много чего нового!

@marinatripetska1772 2 жыл бұрын

Как вовремя! Мы как раз эту тему на курсе проходим:)))

@alexelkin2502 2 жыл бұрын

О! крутой цвет фона! не портит цвет кожи, и красиво.

@bespoyasov 2 жыл бұрын

Огонь, очень круто!

@user-vu7oy1ii3y 2 жыл бұрын

Нереально круто!

@NOX_69RUS 2 жыл бұрын

Как всегда круто! И ответы на появившиеся вопросы уже даны в комментах. А как правильно подобрать сочетание цветов (контрастность, которую так любит Lighthouse) чтоб при переключении темы пользователем не лишить его зрения? И можно ли сделать само переключение плавнее? Fade-in, Fade-out или типа того?

@catexis1 2 жыл бұрын

Как всегда доступно и интересно! Спасибо за видео! Будут ли видео про веб-компоненты?

@pepelsbey 2 жыл бұрын

Я рассказывал про Shadow DOM, но хочу рассказывать ещё про веб-компоненты kzfaq.info/get/bejne/kNCJft2jp6uppX0.html

@thelocalbody 2 жыл бұрын

Макеев - офигенный !!! Готов смотреть его всю свою биографию.

@mrakov 2 жыл бұрын

Крутая фишка с разделением стилей тем и идея с фильтрами поверх иконок. Я бы ещё убрал 3 слушателя на 1.

@demon2321777 2 жыл бұрын

А-а-а-а а-а-а-а-а, ура-а-а!!!! Спасибо большое!

@KartoshkaNP 2 жыл бұрын

05:28 Реакция тестировщика на таску, которую фронт ему отдал:

@galinahappy6919 Жыл бұрын

спасибо

@olgapolikashina6484 2 жыл бұрын

во время аутро чувство, что скорость воспроизведения 1.5. отличная дикция!!

@pepelsbey 2 жыл бұрын

С пятого дубля 😳

@eduardgorte8241 2 жыл бұрын

Это видео 9.5 из 10

@k-ivan 2 жыл бұрын

Вадим привет! Спасибо за видео. Подскажи, что за тема в редакторе у тебя?

@pepelsbey 2 жыл бұрын

GitHub Theme marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme

@Nick-hq8of 2 жыл бұрын

Если еще добавляли бы реализацию на react третьим выпуском, было бы превосходно.

@pepelsbey 2 жыл бұрын

Четвёртым на Vue, пятым на Angular, шестым на Lit, седьмым на Svelte. Такие видео устаревают за год, а это будет актуально гораздо дольше - я про платформу рассказываю, а вы наверняка сможете адаптировать решение под свои задачи.

@kacetal 8 ай бұрын

Здравствуйте спасибо за отличное видео. У меня появился вопрос, а на чем вы основываете именование переменных почему иногда вы используете "_" а иногда "-" б

@pepelsbey 8 ай бұрын

Это называется БЭМ: блок, элемент, модификатор. Система именования, которая помогает писать независимые блоки, см. bem.info

@SomeTimesCoding 2 жыл бұрын

Раз мы switcher позиционируем абсолютно, тогда, по идее, вместо "margin-left: -50px" можно использовать "transform: translateX(-50%)". Тогда не придётся править margin-left если у нас изменится ширина самого переключателя.

@pepelsbey 2 жыл бұрын

Почти у всех задач в CSS есть несколько решений. Я стараюсь избегать сдвигов с помощью трансформаций потому, что они мылят текст. В этом случае там текста нет, но привычка сработала.

@SomeTimesCoding 2 жыл бұрын

@@pepelsbey про несколько решений согласен. Вы же сами об этом говорили, еще когда я обучался в HTML Academy :) Надеюсь 4 сентября услышать и увидеть больше новых и интересных моментов, чтобы "освежить" свои знания.

@Junckovski 2 жыл бұрын

Супер! Вот только с доступностью интересно получается, ты сделал переключатели доступными для скринридеров, но насколько это оправдано для людей которые не смогут увидеть результат, которым этот функционал по сути не нужен или даже будет мешать, когда они будут перемещаться по сайту с клавиатуры. Ведь когда блок окажется в в фокусе, скринридеру придется зачитать все что там находится.

@pepelsbey 2 жыл бұрын

Скринридеры используют не только незрячие. Мне кажется, что делать доступным всё, чем можно воспользоваться и не решать за других людей что им нужно, а что нет - более правильный путь. Хотя бы потому, что мы плохо понимаем задачи и потребности пользователей скринридеров.

@drak0an 2 жыл бұрын

Переключение цвета на низкий/высокий контраст/отсутствие цвета/крупный шрифт это как раз одна из целей существования скринридера. В такой же свитчер можно поставить эти специальные возможности.

@drak0an 2 жыл бұрын

Очень изящная кнопочка, абсолютно правильная идея порадовать пользователя, что его запрос в приоритете, но такой скомканный js-код... часть переменных гетаются, часть собираются в конст, функции выполняют то одно то много чего вне своего названия, и вроде такая простая задача, а так спагетифицировано. И всё же всё работает и выглядит хорошо с микроанимацией.

@pepelsbey 2 жыл бұрын

Мне кажется лучше было бы написать это кодом, чем накручивать эпитеты про спагетти. Мол, так было бы лучше - и ссылку.

@drak0an 2 жыл бұрын

@@pepelsbey да, согласен, только это чуть больше времени чем комментарий чиркануть.

@drak0an 2 жыл бұрын

@@pepelsbey На самом деле я решаю задачку для организации многостраничного приложения с темами со сборкой в вебпак, так чтобы дизайнер мог добавлять свои цветовые схемы в любом количестве (как файл с набором переменных в scss с кодами цветов), не привлекая потом фронтендера для регистрации их по всему коду. И хочется совместить преимущества всех подходов, пока думаю как это сделать. Код для управления свитчером и управления темами уже всяко будет другим в этом проекте.

@ilnurryazhapov9377 2 жыл бұрын

нормальный код, все понятно

@drak0an 2 жыл бұрын

@@pepelsbey 1. Принцип единственной ответственности функций 2. Более аккуратные названия + все действия и проверки имеют свои названия 3. более "плоский" код (одна главная функция вызывает все по очереди) + не запутанное дерево вызовов (чтение кода сверху вниз/снизу вверх, а не клубком и спиралькой) 4. высушенный код (нет копирования кода) 5. стрелочные функции, только одна функция с контекстом 6. отделены константы названий классов и другие строковые данные

@maksmen8909 2 жыл бұрын

Доброго времени суток, в vs code при развертывании span.text$*5 код получается в строчку а не в столбик что очень не удобно) Помогите пожалуйста советом за ранее благодарю

@Mitorun 2 жыл бұрын

Если сделать такой переключатель на разделе где есть фон, то подложка-status исчезает из-за z-index: -1. Вместо этого поставил z-index: 1 на инпуты.

@pepelsbey 2 жыл бұрын

Если переключатель имеет свой контекст позиционирования (absolute, relative), то z-index должен оставаться в его рамках. Наверное у вас переключатель без контекста.

@tirozit720 2 жыл бұрын

А можно обойтись без дополнительных подключений стилей, то бишь хранить все в одном index.css?

@pepelsbey 2 жыл бұрын

Можно, но тогда не получится такого простого переключения стилей.

@drak0an 2 жыл бұрын

делаешь 2 набора var ов в двух классах. Потом при помощи js переименовываешь нужный класс в :root, а ненужный в другое имя. Минус в том, что если будет очень много цветовых схем, то основной css будет распухать от них

@zerdox4 2 жыл бұрын

Советую избегать использования z-index. Они часто конфликтуют между собой и особенно на больших проектах. В данной демке можно было перенести switcher__status перед элементами switcher__radio, а не использовать "костыльный" z-index. Мелочь, но поддерживать такой код проще на мой взгляд. Не приходится вмешиваться в естественный flow элементов

@pepelsbey 2 жыл бұрын

У вас иррациональный страх какой-то. Я осознанно не использую сочетание z-index: 1 и z-index: 2, чтобы расставить блоки в нужном порядке. Вместо этого я кидаю один назад, а остальные стоят как стояли. Плюс из контекста наложения, который создан внутри блока, это z-index: -1 никуда не денется. В общем, если разобраться, то не страшно и полезно :)

@user-iz5wx5tn7g 2 жыл бұрын

Спасибо за крутое видео!) Кажется я один не могу понять, откуда появляется обводка с фоном у fieldset (( Был бы очень рад, если бы кто-нибудь рассказал)

@pepelsbey 2 жыл бұрын

Это блок статуса на 08:56

@user-iz5wx5tn7g 2 жыл бұрын

@@pepelsbey Ааа, буду внимательнее, спасибо большое)

@Mitorun 2 жыл бұрын

Вадим, а зачем тут legend вообще? Раз мы делаем его невидимым, то может просто для fieldset задать aria-label="Цветовая схема"? Или "Цветовая тема", так кажется понятней. Ща гугл решит я накручиваю комменты к ролику. Официально заявляю что мне за комменты никто не платил (но кошелек могу оставить) :)))

@pepelsbey 2 жыл бұрын

У legen и fieldset особые отношения, как я сказал: поля внутри fieldset получают дополнительное описание как раз из legend. Это не обязательно, можно расширить описание каждой из опции «Светлая схема» и так далее.

@Mitorun 2 жыл бұрын

@@pepelsbey смущают две вещи: нелогично писать контентный текст и потом скрывать его (когда для этого существуют специальные теги), и еще боюсь что поисковикам может не понравиться невидимый текст.

@arturkhurshudyan4470 2 жыл бұрын

Извините, я написал тот же текст, что и вы, но код у меня не работает, где я могу взять код, который вы написали?

@pepelsbey 2 жыл бұрын

В описании к видео есть ссылка на демо, где можно посмотреть код

@user-vl8xx8vx2v Жыл бұрын

Вадим, добрый день! А как избежать морганий экрана при перезагрузке страницы? У вас страница малая по объему и переключение не видно. У меня на сайте видно моргание. Можете подсказать как сохранять в куки а не локалстордж?

@pepelsbey Жыл бұрын

Я заметил моргание только в Safari и для этого заинлайнил переменные в шапку страницы. См. pepelsbey.dev/ Сохранение в куки вместо localStorage ничего не поменяет.

@user-vl8xx8vx2v Жыл бұрын

@@pepelsbey Зашел на ваш сайт. Хром (Вин10). Переключил тему на черный, перехожу по ссылкам или обновляю страницу, и вижу моргания. А также слайдер выбора темы, при перезагрузке, из положения авто анимировано переходит в темный режим. Конечно, если в системе выбрать черную тему, то морганий на черной теме сайта нет. А вот если при системной черной теме выбрать белую сайта, то теперь моргания черным фоном. И слайдер переключается при загрузке страницы.

@pepelsbey Жыл бұрын

Можно заинлайнить скрипт, чтобы работал до рендеринга. Но мне кажется, что это не стоит того в моём случае. Ну либо делать SPA, где нет прямой навигации.

@Woody_Johnson 6 ай бұрын

@@pepelsbey на больших страницах моргание присутствует всё таки. Иногда скрипт для переключения темы срабатывает чуть позже и тогда происходит мерцание, на мгновение отображается тёмная тема, а потом только светлая (потому-что стили тёмной находятся после). Даже если заинлайнить это дело в head. Вот куки эту проблему решают. Просто помимо локалстореджа ещё записываем куки, а на серваке в зависимости от кук возвращаем ту или иную версию цветовой схемы.

@user-ql4xu5qu2u 2 жыл бұрын

А localStorage на телефонах работает?

@pepelsbey 2 жыл бұрын

Конечно, это давний браузерный API, который поддерживается во всех браузерах и на всех платформах

@user-rj6ro3mp1p 2 жыл бұрын

Ну, и теперь осталось добавить цветовые темы ко всему этому.😁

@pepelsbey 2 жыл бұрын

Это уже сами )

@nikolaykolomyytsev5078 2 жыл бұрын

Мне кажется, использование трёхпозиционного переключателя в данном случае избыточно. Вполне достаточно и двухпозиционного: "авто" и "другая тема". Это такая же история, как и с переключателями языков, избыточно показывать текущий язык достаточно отобразить список языков на которые можно переключится.

@pepelsbey 2 жыл бұрын

Вариант с двумя состояниями не позволяет зафорсить текущую тему, только противоположную. То есть теряется часть возможностей. Плюс менять контролы - плохая идея, лучше он будет чуть сложнее, но зато будет точно передавать происходящее.

@Ratelchief 2 жыл бұрын

не особо понял в какой момент css понимает какую тему использовать основываясь на системных показаниях до того, как подключили js

@pepelsbey 2 жыл бұрын

Это вам в первое видео, я там подробно объясняю kzfaq.info/get/bejne/h92lrMignM_Zfo0.html

@Ratelchief 2 жыл бұрын

Спасибо, посмотрю

@war_criminal_ 2 жыл бұрын

Код очень детален и всё строго по полочкам) Но я очень боюсь колбэков, вместо него исользовала цикл for, а объект конвертировала в цикл. Объясните пожалуйста почему константы содержащие html тэги с подключаемыми файлами css у нас через qyerySelectorAll и в результате константы стали объектами содержащий всего по одному элементу? Не проще, что-бы при присвоении атрибута media не перебирать массив - сразу получить один html тэг на переменную, а что-бы не было проблем с пробелом между 'prefers-color-scheme' и 'схемой' получить тэг через так же через класс и вместо media, использовать значение атрибута value (Ведь в value всего одно слово и пробелов содержать не должно)?

@pepelsbey 2 жыл бұрын

Я использую querySelectorAll, а не просто querySelector для лучшей универсальности: на странице может быть подключено несколько файлов стилей и важно учесть их все.

@war_criminal_ 2 жыл бұрын

@@pepelsbey Поняла)

@CzarOfScripts 2 жыл бұрын

@@war_criminal_, а в чем страх перед callback?

@temikflookin Жыл бұрын

почему-то я всё равно получаю вспышку когда системная светлая, а я включаю тёмную на сайте, на перезапуске вспышка светлой темы

@pepelsbey Жыл бұрын

В этом способе выбор темы, которая не соответствует системной, идёт с таким спецэффектом. Браузер сначала начинает рисовать то, что он прочитал из HTML и только потом добирается до скриптов, локального хранилища и понимает, что у вас другие настройки. Это происходит достаточно быстро, но всё равно заметно. Настройки нужно либо сохранять на сервере, либо в куках и читать их тоже на сервере. В сравнительно простых решениях только так.

@temikflookin Жыл бұрын

@@pepelsbey Благодарю, Вадим, это были очень полезные знания для меня. Успехов тебе в дальнейшем развитии! С Рождеством Христовым!

@temikflookin Жыл бұрын

@@pepelsbey интересное наблюдение из-за этого кода в шапке у брата не открывается сайт вообще на айфоне 6 и в сафари и в фоксе if (matchMedia('(prefers-color-scheme: dark)').media === 'not all') { document.documentElement.style.display = 'none'; document.head.insertAdjacentHTML( 'beforeend', '' ); }

@iGotton 2 жыл бұрын

@shakur.0238 2 жыл бұрын

А зачем юзерам, пользующимся скринридерамит вообще тему выбирать?

@pepelsbey 2 жыл бұрын

Скринридерами пользуются не только незрячие пользователи, но и те, у кого сложности с моторикой, например.

@shakur.0238 2 жыл бұрын

@@pepelsbey действительно, даже не задумывался

@nikolaykolomyytsev5078 2 жыл бұрын

И ещё если мы говорим о красоте и логичности использования операторов JS, то в случае тройного выбора красивее использовать SWITCH, а не комбинацию из IF и двух тернарных операторов. Ну это так, брюзжание... Спасибо за видео.

@pepelsbey 2 жыл бұрын

Я трижды рефакторил эту функцию (был и ваш вариант) и остановился на этой версии, как самой понятной. На мой взгляд, switch..case бывает избыточным и мешает читаемости.

@yyaahooyy 11 ай бұрын

Я немного разочаровался в этих авто темах, так как какой ни будь самсунг интернет (мобильный) браузер, включит свою уродливую тему по верх твоей, покорёбит все цвета. Надеюсь это в будущем исправят. По этому всегда делаю светлую и тёмную в ручную, а авто на основе темы убираю. Такое ощущение, что браузеры делают люди, которые никогда не делали сайты) Тоже самое и с шрифтами, почему то некоторые мобильные браузеры считают, что обязаны по умолчанию увеличить шрифт сайта, на основе параметров темы телефона и что не делай, вёрстка из за увеличенных букв будет выглядеть не так как задумал дизайнер. Короче придумали очередную дурь.

@yyaahooyy 11 ай бұрын

Хотел уточнить, переключение тем делаю на основе css js без этих фокусов со специфичными запросами к темам.

@pepelsbey 11 ай бұрын

Мне кажется, что вам стоит отпустить контроль над результатом. Браузеры всегда делали то, что в интересах пользователя: размер шрифта или даже подмена, блокировка картинок, рекламы или даже скриптов, даже отключение некоторых API. Хороший код готов к такому, помните об этом и думайте на шаг вперёд :)

@md2dfg1 2 жыл бұрын

А теперь откройте демку в Chrome 64)

@md2dfg1 2 жыл бұрын

Вроде display: table на fieldset и display: table-cell на .switcher__radio исправляют отображение

@pepelsbey 2 жыл бұрын

Январь 2018, когда вышел Chrome 64, был давно и доля 0,02% вряд ли интересна даже для слабой поддержки. Тем не менее, при желании, вы можете довести кроссбраузерность решения до нужной. Но стоит ли оно того?