Как сделать Dark mode для сайта за 5 минут ? #javascript

preview_player
Показать описание
🏆 Поднять мотивацию и получить плюшки(сборка, исходники, чат со мной):
🔹 Crypto:
👉 USDT(ERC20): 0xA4008910De17DB20c7505425316fF72d4C5Eed96
👉 USDT(BEP20): 0x4350c4E1C0bB35634C7fDE1cFB278BE0606E3822
👉 Binance Pay: 432902886

  1. Давай Попробуем: JavaScript
  2. html
  3. css
  4. javascript
  5. javascript уроки
  6. javascript для начинающих
Рекомендации по теме
Как сделать Dark 0:05:28

Как сделать Dark mode для сайта за 5 минут ? #javascript

Как установить черную 0:01:31

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

How To Enable 0:01:32

How To Enable TradingView Dark Mode (2024) - TradingView Black Background

Опера тёмная тема. 0:00:52

Опера тёмная тема. Как сделать оперу черной на андроид. Opera dark mode android...

Верстка сайта - 0:08:44

Верстка сайта - Делаем темную версию сайта

How To Turn 0:00:20

How To Turn On WHITE BACKGROUND for MS Word on Mac Dark Mode

Tailwind CSS - 0:07:45

Tailwind CSS - Dark Mode

Dark mode на 0:00:53

Dark mode на ЛЮБОМ САЙТЕ #shorts #frontend #devtools #айти #js #htmlcss #browsefeatures #browser...

Делаем dark mode 0:10:36

Делаем dark mode | Делаем АНИМИРОВАННЫЙ переключатель тем для сайта на JS и CSS...

Use Dark Mode 0:03:08

Use Dark Mode & Dark Cell Style IN Microsoft Excel And Word

How to enable 0:02:38

How to enable dark mode on Likee account||Likee app par dark mode enable kaise kare||Dark theme

How To Get 0:01:21

How To Get Dark Mode On Instagram On Android (2024) | Instagram Dark Mode not showing On Android

TailwindCSS #14 Тёмная 0:09:52

TailwindCSS #14 Тёмная тема (Dark Theme)

DARK MODE на 0:08:15

DARK MODE на тильде светлая и темная тема

Темная тема для 0:00:50

Темная тема для ВК | Dark theme for VK

How to Enable 0:00:52

How to Enable Notepad++ Dark Theme | Notepad++ Dark Mode | Beginner Guide

How To Get 0:01:07

How To Get Dark Mode On Instagram On Iphone (2024) | Instagram Dark Mode not showing on iPhone

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

Как включить темную тему на любом смартфоне Андроид 9 и ниже | Dark Mode в приложениях...

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

Как включить темную тему в Chrome на Android \ Dark Mod для Google Chrome

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

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

КАК СДЕЛАТЬ ТЁМНУЮ 0:00:18

КАК СДЕЛАТЬ ТЁМНУЮ ТЕМУ В ИНСТАГРАМЕ (INSTAGRAM)? (2020) [ЕСЛИ ВООБЩЕ КРАТКО] – DARK THEME INSTAGRAM...

Принудительный темный режим 0:02:05

Принудительный темный режим для любого приложения в Xiaomi...

How to Enable 0:00:18

How to Enable Dark Mode on VS Code Classic [Simple Guide]

✨ КАК СДЕЛАТЬ 0:04:36

✨ КАК СДЕЛАТЬ НОЧНОЙ РЕЖИМ НА САЙТЕ | WP DARK MODE | ТЕМНЫЙ РЕЖИМ НА САЙТЕ | NIGHT MODE WORDPRESS...

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

Решил выпустить коротенький видосик для новичков :)

lets_try_js
Автор

0:18 Прекрасное решение, среди ночи у пользователя при обновлении страницы будет белая вспышка на весь экран!
Можно закрывать видео сразу.

vladislove
Автор

Отличное видео. Я конечно многое сделал по своему( более примитивно - использовал в функции checkbox.checked == true/false и менял фон в JS через style.backgroundColor ), но на этом примере удалось сделать темную тему, которая сохраняется после перезагрузки страницы.

Единственное, что осталось непонятным - это строчка с wasDarkmode. localStorage.getItem получает уже существующее значение. Но у нас его на этот момент еще нет. Или ты сразу создал его через = true? в конце строки.

basmong
Автор

А что делаеть если я добавляю css в одной функции ?

Ренди-яф
Автор

О, а давай теперь идеальный вариант?
)

tipe
Автор

Я не понял, и мне не получается😔 почему? Я новичок, это на чистом js или на какой-то фремфорк? Пожалуйста помогите мне 🙏

adm
Автор

Спасибо, интересный ролик. Все вроде прописал как у Вас, но не переключает фон почему-то. Несколько раз проверил, все идентично написано. Впервые вижу localStorage, подозреваю что не понимаю как это работает. Нужно создать какую-то папку с таким названием в проекте? Или может мой редактор как-то по другому работает, использую VSC. Заранее спасибо

timchenkod
Автор

Это что за оператор такой перед "true"

AleksandrKudriakov