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

Рет қаралды 22,681

Күн бұрын

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

Пікірлер: 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 жыл бұрын

Можно! Об этом другое видео kzfaq.info/get/bejne/j7d9aJmbvZrddZc.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) пока причина не найдена =)