Как сделать темную тему для сайта на CSS и JS?

preview_player
Показать описание
Привет! В этом видео я покажу один из способов как сделать темную тему для вашего сайта на чистом CSS и JS.
Буду рад подписке и любой поддержке канала.
Приятного просмотра!

Содержание:
00:00 Обзор макета
01:37 Работа со стилями
14:06 Начало JS
16:48 Переопределение переменных
23:26 Скрипт переключения темы

#css #js #dark
  1. VIMP dev — верстка сайтов
  2. css
  3. js
  4. темнаяТема
  5. dark
Рекомендации по теме
Как установить черную 0:01:31

Как установить черную тему или ночной режим во всех приложения на SAMSUNG...

ЖДАЛИ?😱Лайфхак, как сделать 0:00:15

ЖДАЛИ?😱Лайфхак, как сделать черную тему в тиктоке на андроиде? 😊...

Как включить темный 0:01:40

Как включить темный режим в Instagram (после новой настройки 2023 г.) |Как изменить тему в Instagram...

Темная тема во 0:00:21

Темная тема во ВКонтакте 🤘Годный лайфхак рассказал, как ее установить!...

Темная тема Windows 0:02:21

Темная тема Windows 10

Как сделать темную 0:00:18

Как сделать темную тему без активации (Windows10)How to change theme

как сделать тёмную 0:00:12

как сделать тёмную тему в WhatsApp #whatsapp

Экономит ли Тёмная 0:00:38

Экономит ли Тёмная Тема зарядку?🤔 #shorts

🔥 ЭТО ВЫГЛЯДИТ 0:03:39

🔥 ЭТО ВЫГЛЯДИТ КРАСИВО! Как Включить Темный Режим в тех Приложениях, в которых его НЕТ. Темная Тема...

Как Сделать Темную 0:02:42

Как Сделать Темную Тему в Браузере Google Chrome / Как Сделать Чёрную Тему Гугл Хром...

КАК ЖЕ ВКЛЮЧИТЬ 0:01:41

КАК ЖЕ ВКЛЮЧИТЬ ТЕМНУЮ ТЕМУ НА IPHONE?

Как на виндовс 0:00:16

Как на виндовс 10 включить темную тему?

Чёрный тик ток 0:00:09

Чёрный тик ток темная тема как сделать

Как сделать темную 0:00:11

Как сделать темную тему в тик ток

Как сделать тёмную 0:00:18

Как сделать тёмную тему на iPHONE

Как включить темную 0:01:09

Как включить темную тему на iPhone?

как сделать тёмную 0:00:42

как сделать тёмную тему в Roblox #game #Роблокс #roblox #лайфхакРоблокс #играем...

Как на айфоне 0:00:42

Как на айфоне включить темную тему

Темная тема в 0:02:43

Темная тема в любом приложении

Как на CЯОМИ 0:04:51

Как на CЯОМИ включить ТЁМНЫЙ РЕЖИМ/Сделать ЧЁРНУЮ ТЕМУ на ТЕЛЕФОНЕ Android XIAOMI...

🖤 Как включить 0:00:36

🖤 Как включить темную тему на iPhone

Как Сделать Тёмную 0:01:31

Как Сделать Тёмную Тему в ВК на Компьютере Без Программ в 2022...

Как Включить в 0:03:19

Как Включить в Google Chrome Темную Тему для Всех Сайтов?

🎩 Как включить 0:01:01

🎩 Как включить темную тему в Instagram

Комментарии
Автор

спасибо. Четко объясняешь. Мне стало намного понятнее и легче
🤝🤝🤝

wizartable
Автор

Спасибо, ДжаваСкрипт ещё никогда не был так прост

doberman
Автор

Очень простой и классный скрипт. Спасибо большое. Однако всё равно идёт при загрузке сначала светлая тема, после включается темная, даже если скрип подключён в head.

АртёмФомин-пы
Автор

Спасибо за хорошее видео, а как сделать переключение между темами плавное?

СергейКоролев-ойя
Автор

Спасибо за урок. А как сделать чтобы тема переключалась по времени с утра белая я вечером чёрная? Если несложно и есть время можешь сделать урок?

aleksandrsrudkevics
Автор

Спасибо большое за урок! А скажи пожалуйста, как сделать черную тему по умолчанию? Открыл сайт и тебя встречает ночная тема с возможностью переключения на светлый

tesla
Автор

Большое спасибо, долго искал такой видео-урок, продолжай делать уроки)

ВДББ
Автор

Привет, крутое видео. Можешь скинуть svg картинки moon and sun?

andrii
Автор

Привет, сделал похожую тему, но, при загрузке страницы, видно как старая тема переключается на новую, и происходит мигание фона и других цветов. Может знаешь как можно сделать, чтобы стили так не мигали?

SpeedyGonshik
Автор

не мог бы ты пожалуйста оставить полный код твоего сайта в текстовом виде, если не сложно конечно?

theantichristisnotgodly