Темная тема сайта

• Зачем нужна темная тема?
• Как ее сделать?
• Какие тонкости нужно учесть?

На все эти вопросы я дам подробные и понятные ответы в этом ролике. Пора переходить на темную сторону!

Для понимания происходящего в ролике достаточно базовых знаний по HTML, CSS и JS.

📂 Материалы ролика

• Архив с макетами:
https://github.com/CMTV/youtube/tree/master/site-dark-theme

• JavaScript код переключения темы:
https://gist.github.com/CMTV/6334888ce0b65a47dfd69e54306645d3

🔗 Полезные ссылки

• Полное руководство по созданию темной темы:
https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/

• Полезные фишки при создании темной темы:
https://web.dev/prefers-color-scheme/

• Огромная статья наглядными дизайн-приемами для темных тем:
https://material.io/design/color/dark-theme.html#usage

• Пипетка для получения цвета с экрана (используется в ролике):
http://www.blacksunsoftware.com/colormania.html

📜 Содержание:
0:00 Вступление
0:50 Плюсы и минусы темной темы
4:13 Постановка задачи
4:41 Подготовка таблицы стилей
8:11 Что такое темная тема?
9:23 Функция переключения темы
11:51 Кнопка переключатель
14:43 Сохранение выбранной темы
16:32 Тема при первом посещении
19:37 Системная темная тема
23:18 Темная шапка на Android
27:10 Финальное пояснение кода
28:28 Дизайн темной темы
38:11 Работа с картинками
45:12 Заключение

#темнаятема #темныйрежим #ночнаятема #вебдизайн

Тэги:

#темная_тема #веб #веб_дизайн #web #dark_mode #темный_режим #черная_тема #светлая_тема #темный_сайт #сайт

Скачать видео