Темная тема сайта
• Зачем нужна темная тема?
• Как ее сделать?
• Какие тонкости нужно учесть?
На все эти вопросы я дам подробные и понятные ответы в этом ролике. Пора переходить на темную сторону!
Для понимания происходящего в ролике достаточно базовых знаний по HTML, CSS и JS.
📂 Материалы ролика
• Архив с макетами:
https://github.com/CMTV/youtube/tree/...
• JavaScript код переключения темы:
https://gist.github.com/CMTV/6334888c...
🔗 Полезные ссылки
• Полное руководство по созданию темной темы:
https://css-tricks.com/a-complete-gui...
• Полезные фишки при создании темной темы:
https://web.dev/prefers-color-scheme/
• Огромная статья наглядными дизайн-приемами для темных тем:
https://material.io/design/color/dark...
• Пипетка для получения цвета с экрана (используется в ролике):
http://www.blacksunsoftware.com/color...
📜 Содержание:
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 Заключение
#темнаятема #темныйрежим #ночнаятема #вебдизайн
