В сафари открываем Web Inspector → панель Elements → сверху идут иконки: Show rulers, Force print media styles, Force Light/Dark Appearance (иконка браузера, надо тыкать сюда), ...
Еще интересно будет услышать про цветовые темы в фавиконках и собственно о создании темных стилей для сайта - что стоит менять, что не стоит, как не испортить доступность-удобность.
Вадим, спасибо за видео! Как всегда все по делу и без лишней "воды". Я за! Светлые и темные темы. Поскольку в ночное время на белых сайтах глаза просто сгорают )
Классное видео 👍 отлично все рассказал и показал, к тому же не забыл о старых браузерах! Большие спасибо, Вадим! Жду с нетерпением видео от вас о переключалке тем прямо на сайтах))
Ня мог успомніць як гэта робіцца, пашукаў на ютубе, у тых відосах рабілі па іншаму, праз js. Успомніў, што глядзеў калісьці тваё відэа на гэтую тэму, і рады, што цяпер знайшоў яго. Дзякуй!
@@pepelsbey, я почему-то думал, что ты с Беларуси, написал коммент, потом решил проверить, зашёл в информацию о канале, и увидел, что всё-таки с России, но коммент уже лень было редактировать) Можно использовать твой переключатель тем из след видео?
Вадим, а что у Вас за тема в vscode стоит? тёмная приглянулась очень к слову, в последнее время стали уставать глаза (в т.ч., потому что сложно различать цвета) - приходится постоянно тыркаться туда-сюда. очень удобно, когда сайты это детектят и помогают мне беречь мои глаза. во всех возможных приложениях и сайтах включил автоматическое отслеживание схемы
Спасибо за видос!!! Назрел вопрос. Как правильно именовать цвета в css переменних, чтобы потом можно было бы легко использовать (переиспользовать)? Может у Вас есть какието примеры кода.
Есть разные подходы, но мне нравится такой: базовые цвета заводить описательно, как red-basic, red-light, red-dark, а потом уже из них делать функциональные text-basic, action-light и так далее.
body-чтото для celestial body - кажется спорным именем, способно запутать отсылкой к тегу . Но, ладно, это же просто пример 🌝 Чо если во втором варианте (15:08) в index.css засунуть содержимое dark.css? Не будет "выспышки светлой темы"...
Если засунуть все стили в один файл, то не получится удобно форсить ту или другую тему средствами браузера. Плюс будет лишний блокирующий трафик, хотя и немного. Подробнее об этом в следующем видео :)
@@pepelsbey Я имел в виду засунуть в index.css тёмную тему, а светлую оставиить в light.css. То есть сделать наоброт. Вспышки не будет. Будет немного темноты
Sass-переменные недоступны в браузере. Вы можете комбинировать их в исходниках, чтобы они оставались в браузере. Или лучше даже перейти на кастомные свойства, если вам хватает их возможностей.
Привет Вадим. Спасибо за видео. Расскажи пожалуйста как увязать вместе для разных разрешений и lazylad. И как оптимизировать нативное видео для разных разрешений. Спасибо
Атрибут loading=lazy ставится на , механизмы подменяют адрес у него. Нативное видео, к сожалению, не работает так же как . Но адаптацию можно делать на уровне JS: matchMedia и вот это.
Откройте десяток любимых сайтов с отключённым JS и скажите, какими из них можно пользоваться :) Мне даже интересно стало. Но в ваших словах есть правда - если для 8% пользователей вы не готовы так рисковать, то вам стоит включить светлую тему в основной файл.
Пожалуйста, но всё же работает: демо, открытое в Chrome на Windows 10 переключается на ночь, вслед за системной настройкой Personalization > Colors > Choose your color: Dark.
@@pepelsbey секрет раскрыт: на виндовсе не работало, потому что разные настройки -- ссылка открывалась в браузере с настройками другого пользователя. в линуксе же (MX KDE) пока причина не найдена =)
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 Аутро
Солнце никогда не занимает небо целиком, конечно семантически лучше подойдёт спан! =)
В сафари открываем Web Inspector → панель Elements → сверху идут иконки:
Show rulers,
Force print media styles,
Force Light/Dark Appearance (иконка браузера, надо тыкать сюда),
...
Ох, не самая понятная иконка. Спасибо!
Моё почтение!
Еще интересно будет услышать про цветовые темы в фавиконках и собственно о создании темных стилей для сайта - что стоит менять, что не стоит, как не испортить доступность-удобность.
А что слушать то? Подключаешь svg иконку для светло/темных тем. Пишешь путь специальный к этой иконке и всё
фав иконка - это свг, внутри свг работает цсс, так что свойство prefers-color-scheme работает внутри свг фавиконки
Крутяк чувак! Я конечно и так знал как это сделать, но очень интересно послушать иную точку зрения
Спасибо! Ждем вторую часть с ручным переключателем 😎
какая же качественная подача! спасибо!
Вадим, спасибо за видео! Как всегда все по делу и без лишней "воды".
Я за! Светлые и темные темы. Поскольку в ночное время на белых сайтах глаза просто сгорают )
Спасибо, Вадим! Ваши ролики всегда смотреть интересно и познавательно!
Светлая тема
Лайкос и коммент до просмотра, потому что знаю, что у Вадима всегда топ-контент!
Спасибо! Ждём следующее видео с выключателем для солнца.
Я б назвал луну и солнце light, по аналогии с игровыми движками))
Классное видео 👍 отлично все рассказал и показал, к тому же не забыл о старых браузерах! Большие спасибо, Вадим! Жду с нетерпением видео от вас о переключалке тем прямо на сайтах))
Очень интересно! жду продолжения)
Спасибо!)
Вадимушка, спасибо за видео!
Вадим спасибо
Спасибо, как всегда очень интересно)
Ня мог успомніць як гэта робіцца, пашукаў на ютубе, у тых відосах рабілі па іншаму, праз js. Успомніў, што глядзеў калісьці тваё відэа на гэтую тэму, і рады, што цяпер знайшоў яго. Дзякуй!
Извините, я не понимаю по-украински
@@pepelsbey, я почему-то думал, что ты с Беларуси, написал коммент, потом решил проверить, зашёл в информацию о канале, и увидел, что всё-таки с России, но коммент уже лень было редактировать)
Можно использовать твой переключатель тем из след видео?
@@pepelsbeyи по-белорусски тоже)
Красивое
для солнца нужно использовать тэг или
Вадим, а что у Вас за тема в vscode стоит? тёмная приглянулась очень
к слову, в последнее время стали уставать глаза (в т.ч., потому что сложно различать цвета) - приходится постоянно тыркаться туда-сюда. очень удобно, когда сайты это детектят и помогают мне беречь мои глаза. во всех возможных приложениях и сайтах включил автоматическое отслеживание схемы
Извиняюсь что я не Вадим) Тема в видео - GitHub Theme, а конкретно темная ее версия - GitHub Dark Default
@@dskyworks спасибо)
Спасибо за видос!!! Назрел вопрос. Как правильно именовать цвета в css переменних, чтобы потом можно было бы легко использовать (переиспользовать)? Может у Вас есть какието примеры кода.
Есть разные подходы, но мне нравится такой: базовые цвета заводить описательно, как red-basic, red-light, red-dark, а потом уже из них делать функциональные text-basic, action-light и так далее.
А будет видео где Вы будете рассказывать как использовать разные CSS в зависимости от "Save-Data: on" HTTP header ?
И до них доберусь, отличная штука :)
А цвет для вкладок в Сафари можно на ходу переключать?
Можно! Об этом другое видео ua-cam.com/video/YQM56jX4yEc/v-deo.html
css-variables
body-чтото для celestial body - кажется спорным именем, способно запутать отсылкой к тегу . Но, ладно, это же просто пример 🌝
Чо если во втором варианте (15:08) в index.css засунуть содержимое dark.css? Не будет "выспышки светлой темы"...
Если засунуть все стили в один файл, то не получится удобно форсить ту или другую тему средствами браузера. Плюс будет лишний блокирующий трафик, хотя и немного. Подробнее об этом в следующем видео :)
@@pepelsbey Я имел в виду засунуть в index.css тёмную тему, а светлую оставиить в light.css. То есть сделать наоброт. Вспышки не будет. Будет немного темноты
Вспышка тёмного на белой странице - тоже вспышка :)
@@pepelsbey Просто показалось, что моргнул...
@@pepelsbey блин, вспышка черного на белом не выжигает глаза так как вспышка белого в темной теме в темной комнате...
Вот как у Макеева всё гениально и просто???!!!
где взять эти фоновые картинки
такие классные облака плиз дайте мне их
В описании видео есть ссылки на оригиналы
А если серьезно, то тема очень обширная и интересная, как сюда подключить переключатель темы?
Об этом в продолжении :)
@@pepelsbey супер!
С переменными в CSS понятно, а что делать если переменные SaSS? как с их помощью переключать?
Sass-переменные недоступны в браузере. Вы можете комбинировать их в исходниках, чтобы они оставались в браузере. Или лучше даже перейти на кастомные свойства, если вам хватает их возможностей.
Привет Вадим.
Спасибо за видео.
Расскажи пожалуйста как увязать вместе для разных разрешений и lazylad.
И как оптимизировать нативное видео для разных разрешений.
Спасибо
Атрибут loading=lazy ставится на , механизмы подменяют адрес у него. Нативное видео, к сожалению, не работает так же как . Но адаптацию можно делать на уровне JS: matchMedia и вот это.
@@pepelsbey 🙏
А потом на работе тебе говорят "ну мы IE 11 поддрживаем, так что никаких кастомных свойств, гридов и ES6" и как-то становится грустно
Никогда не поздно поменять работу
А в чем проблема сделать один файл css с настройками темы и в нем сделать @media (prefers-color-scheme: dark) ? Зачем это извращение с js ?
Нет проблемы. Есть желание не грузить лишнего и потом сделать удобное переключение стилей. Это основа для следующего шага.
Мигание в старых браузерах наименьшая из проблем старых браузеров...
про vmin, кстати, вообще не слышал нигде.
Они в это семейство скоро ещё целую россыпь новых единиц добавят, чтобы решить проблему динамических вьюпортов на мобильных, держитесь :)
Костыль с js отвалится при отключеных скриптах
Откройте десяток любимых сайтов с отключённым JS и скажите, какими из них можно пользоваться :) Мне даже интересно стало. Но в ваших словах есть правда - если для 8% пользователей вы не готовы так рисковать, то вам стоит включить светлую тему в основной файл.
спасибо, но на линуксе/виндовсе не работает
Пожалуйста, но всё же работает: демо, открытое в Chrome на Windows 10 переключается на ночь, вслед за системной настройкой Personalization > Colors > Choose your color: Dark.
@@pepelsbey секрет раскрыт: на виндовсе не работало, потому что разные настройки -- ссылка открывалась в браузере с настройками другого пользователя. в линуксе же (MX KDE) пока причина не найдена =)