Светлая 🌕 и тёмная 🌑 темы на CSS: кастомные свойства, подключение, фолбэк для старых браузеров

Подписаться 40 тыс.

Просмотров 23 тыс.

50% 1

00:00 Интро
02:17 Обзор демки
04:23 Описание задачи
05:11 Светлая тема
07:54 Тёмная тема
08:50 Обозначение тем
10:39 Удобное тестирование
11:54 Тема для Safari
14:11 Кроссбраузерность
16:23 Фолбэк на всякий
18:49 Подсказка браузеру
19:45 Выводы
20:42 Аутро
Нравится? Становитесь патронами / pepelsbey
Демо с небом pepelsbey.github.io/playgroun...
Средний цвет картинки matkl.github.io/average-color/
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

Опубликовано:

2 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 96

@pepelsbey 2 года назад

@alexelkin2502 2 года назад

Солнце никогда не занимает небо целиком, конечно семантически лучше подойдёт спан! =)

@AntonLiubushkin 2 года назад

В сафари открываем Web Inspector → панель Elements → сверху идут иконки: Show rulers, Force print media styles, Force Light/Dark Appearance (иконка браузера, надо тыкать сюда), ...

@pepelsbey 2 года назад

Ох, не самая понятная иконка. Спасибо!

@dskyworks 2 года назад

Спасибо! Ждем вторую часть с ручным переключателем 😎

@NOX_69RUS 2 года назад

Спасибо! Ждём следующее видео с выключателем для солнца.

@capstanfearless 2 года назад

Вадимушка, спасибо за видео!

@catexis1 2 года назад

Спасибо, Вадим! Ваши ролики всегда смотреть интересно и познавательно!

@Kirill-kh3kt 2 года назад

Очень интересно! жду продолжения)

@timashoff 3 месяца назад

какая же качественная подача! спасибо!

@RamFanRu 2 года назад

Спасибо, как всегда очень интересно)

@demon2321777 2 года назад

Классное видео 👍 отлично все рассказал и показал, к тому же не забыл о старых браузерах! Большие спасибо, Вадим! Жду с нетерпением видео от вас о переключалке тем прямо на сайтах))

@Mitorun 2 года назад

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

@AlibekKulseitov 2 года назад

А что слушать то? Подключаешь svg иконку для светло/темных тем. Пишешь путь специальный к этой иконке и всё

@ManyakNag 2 года назад

фав иконка - это свг, внутри свг работает цсс, так что свойство prefers-color-scheme работает внутри свг фавиконки

@Serega5j Год назад

Крутяк чувак! Я конечно и так знал как это сделать, но очень интересно послушать иную точку зрения

@maximzabara 2 года назад

Вадим, спасибо за видео! Как всегда все по делу и без лишней "воды". Я за! Светлые и темные темы. Поскольку в ночное время на белых сайтах глаза просто сгорают )

@user-vk4si1oz7w 2 года назад

Лайкос и коммент до просмотра, потому что знаю, что у Вадима всегда топ-контент!

@user-mu4my8fq2e 2 года назад

Моё почтение!

@Azkett 2 года назад

Спасибо!)

@kilichbekkhalikov4486 2 года назад

Вадим спасибо

@makelovenotwar450 2 года назад

Красивое

@user-du1gu1qw2q 6 месяцев назад

Светлая тема

@webschoolru778 Год назад

Я б назвал луну и солнце light, по аналогии с игровыми движками))

@olegvintoniuk5288 2 года назад

Спасибо за видос!!! Назрел вопрос. Как правильно именовать цвета в css переменних, чтобы потом можно было бы легко использовать (переиспользовать)? Может у Вас есть какието примеры кода.

@pepelsbey 2 года назад

Есть разные подходы, но мне нравится такой: базовые цвета заводить описательно, как red-basic, red-light, red-dark, а потом уже из них делать функциональные text-basic, action-light и так далее.

@iamInnoel 2 года назад

Вадим, а что у Вас за тема в vscode стоит? тёмная приглянулась очень к слову, в последнее время стали уставать глаза (в т.ч., потому что сложно различать цвета) - приходится постоянно тыркаться туда-сюда. очень удобно, когда сайты это детектят и помогают мне беречь мои глаза. во всех возможных приложениях и сайтах включил автоматическое отслеживание схемы

@dskyworks 2 года назад

Извиняюсь что я не Вадим) Тема в видео - GitHub Theme, а конкретно темная ее версия - GitHub Dark Default

@iamInnoel 2 года назад

@@dskyworks спасибо)

@SergioKornelius 2 года назад

А будет видео где Вы будете рассказывать как использовать разные CSS в зависимости от "Save-Data: on" HTTP header ?

@pepelsbey 2 года назад

И до них доберусь, отличная штука :)

@VeloVetal 10 месяцев назад

для солнца нужно использовать тэг или

@gooseob 2 года назад

Ня мог успомніць як гэта робіцца, пашукаў на ютубе, у тых відосах рабілі па іншаму, праз js. Успомніў, што глядзеў калісьці тваё відэа на гэтую тэму, і рады, што цяпер знайшоў яго. Дзякуй!

@pepelsbey 2 года назад

Извините, я не понимаю по-украински

@gooseob 2 года назад

@@pepelsbey, я почему-то думал, что ты с Беларуси, написал коммент, потом решил проверить, зашёл в информацию о канале, и увидел, что всё-таки с России, но коммент уже лень было редактировать) Можно использовать твой переключатель тем из след видео?

@aysommer 2 года назад

css-variables

@ulatov 2 года назад

body-чтото для celestial body - кажется спорным именем, способно запутать отсылкой к тегу . Но, ладно, это же просто пример 🌝 Чо если во втором варианте (15:08) в index.css засунуть содержимое dark.css? Не будет "выспышки светлой темы"...

@pepelsbey 2 года назад

Если засунуть все стили в один файл, то не получится удобно форсить ту или другую тему средствами браузера. Плюс будет лишний блокирующий трафик, хотя и немного. Подробнее об этом в следующем видео :)

@ulatov 2 года назад

@@pepelsbey Я имел в виду засунуть в index.css тёмную тему, а светлую оставиить в light.css. То есть сделать наоброт. Вспышки не будет. Будет немного темноты

@pepelsbey 2 года назад

Вспышка тёмного на белой странице - тоже вспышка :)

@ulatov 2 года назад

@@pepelsbey Просто показалось, что моргнул...

@alexelkin2502 2 года назад

@@pepelsbey блин, вспышка черного на белом не выжигает глаза так как вспышка белого в темной теме в темной комнате...

@alexkonoplian 2 года назад

А цвет для вкладок в Сафари можно на ходу переключать?

@pepelsbey 2 года назад

Можно! Об этом другое видео ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YQM56jX4yEc.html

@abybeable 2 года назад

Привет Вадим. Спасибо за видео. Расскажи пожалуйста как увязать вместе для разных разрешений и lazylad. И как оптимизировать нативное видео для разных разрешений. Спасибо

@pepelsbey 2 года назад

Атрибут loading=lazy ставится на , механизмы подменяют адрес у него. Нативное видео, к сожалению, не работает так же как . Но адаптацию можно делать на уровне JS: matchMedia и вот это.

@abybeable 2 года назад

@@pepelsbey 🙏

@alexelkin2502 2 года назад

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

@pepelsbey 2 года назад

Об этом в продолжении :)

@alexelkin2502 2 года назад

@@pepelsbey супер!

@thelocalbody 2 года назад

Вот как у Макеева всё гениально и просто???!!!

@boole_cat Год назад

С переменными в CSS понятно, а что делать если переменные SaSS? как с их помощью переключать?

@pepelsbey Год назад

Sass-переменные недоступны в браузере. Вы можете комбинировать их в исходниках, чтобы они оставались в браузере. Или лучше даже перейти на кастомные свойства, если вам хватает их возможностей.

@dygonright5932 Год назад

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

@pepelsbey Год назад

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

@SergeyHramenko 2 года назад

Костыль с js отвалится при отключеных скриптах

@pepelsbey 2 года назад

Откройте десяток любимых сайтов с отключённым JS и скажите, какими из них можно пользоваться :) Мне даже интересно стало. Но в ваших словах есть правда - если для 8% пользователей вы не готовы так рисковать, то вам стоит включить светлую тему в основной файл.

@sunfurry 2 года назад

А потом на работе тебе говорят "ну мы IE 11 поддрживаем, так что никаких кастомных свойств, гридов и ES6" и как-то становится грустно

@lonrav6073 2 года назад

Никогда не поздно поменять работу

@olehbrony6506 2 года назад

про vmin, кстати, вообще не слышал нигде.

@pepelsbey 2 года назад

Они в это семейство скоро ещё целую россыпь новых единиц добавят, чтобы решить проблему динамических вьюпортов на мобильных, держитесь :)

@Akiyatkin 2 года назад

Мигание в старых браузерах наименьшая из проблем старых браузеров...

@lvivduncan 2 года назад

спасибо, но на линуксе/виндовсе не работает

@pepelsbey 2 года назад

Пожалуйста, но всё же работает: демо, открытое в Chrome на Windows 10 переключается на ночь, вслед за системной настройкой Personalization > Colors > Choose your color: Dark.

@lvivduncan 2 года назад

@@pepelsbey секрет раскрыт: на виндовсе не работало, потому что разные настройки -- ссылка открывалась в браузере с настройками другого пользователя. в линуксе же (MX KDE) пока причина не найдена =)