Тёмный

React Dark Mode Toggle/Theme - Complete Guide 

Code Complete
Подписаться 9 тыс.
Просмотров 21 тыс.
50% 1

Learn how to easily add a dark mode and theme toggle to your react project using CSS in this tutorial for beginners. Also learn about CSS variables, custom HTML attributes, local storage, and reading system preferences.
Discord - / discord
Subscribe - / @code_complete
☕ Donate to support the channel! - www.buymeacoffee.com/CodeComp...
-- 🌟 Useful Tools and Software 🌟 --
🌐 10% off domains at Domain.com (use code DOMAIN10) - domain.mno8.net/CodeComplete
☁️ FREE $100 for server hosting on Linode - linode.gvw92c.net/CodeComplete
📚 30% off annual Skillshare membership (use code annual30aff) - skillshare.eqcm.net/CodeComplete
-- 🔗 Links 🔗 --
💻 Code - github.com/CodeCompleteYT/rea...
Music credits:
Chill Wave Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 3.0 License
creativecommons.org/licenses/b...
DISCLAIMER: Some of the links in the description are affiliate links. The channel will receive a small commission from any sales from these links, but there is no extra charge to you. Thanks for supporting the channel so I can keep making these free tutorials!
📖 Chapters:
00:00 Introduction
00:27 Setup
02:07 Creating The Page
02:22 CSS Variables
03:59 Custom HTML Attributes
05:14 Creating The Toggle
10:16 Local Storage
11:09 System Preferences

Опубликовано:

 

25 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 22   
@mercy4120
@mercy4120 3 месяца назад
great video! just the approach i had been searching about how to implement
@Selconag
@Selconag 4 месяца назад
This video is overwhelmingly good. Starting with a meme moment is the best thing ever.
@Code_Complete
@Code_Complete 4 месяца назад
Thanks haha, glad you liked it!
@marekjjjj
@marekjjjj Месяц назад
finally someone who shows the right way, thanks so much, saved my day
@pixel_designs
@pixel_designs 5 дней назад
Thank you so much man!
@SWebDev7
@SWebDev7 5 месяцев назад
So very compacted precious informations i love it thanks you very much
@Code_Complete
@Code_Complete 4 месяца назад
Glad it was helpful!
@2gbeh
@2gbeh 5 месяцев назад
Magic ✨
@imommuhammadsayfillayev1027
@imommuhammadsayfillayev1027 17 дней назад
Thank you
@joshuadk1394
@joshuadk1394 Месяц назад
Im having Trouble to able the darkmode to my whole component i currently have the darkmode component in the navbar and then i import the navbar into the app.js file but it doesnt then change the other pages
@ziw3033
@ziw3033 3 месяца назад
Great video :) I tried your method and noticed that it works for a single component! What if I have a Navbar that sits on the top of every page? Thank you in advance😃
@ziw3033
@ziw3033 3 месяца назад
ah never mind I figured it out :)) as long as the individual divs on separate components also have useLocalStorage and data-theme in their divs, they work!
@joshuadk1394
@joshuadk1394 Месяц назад
@@ziw3033 How did you do this cause i got my dark mode in my navbar but it doesnt change any of my other pages only the navbar
@user-wp6vw6qv5q
@user-wp6vw6qv5q 7 месяцев назад
What if we want to apply dark mode to only a container on current page instead of whole app?
@paski702
@paski702 6 месяцев назад
Add "data-theme" to your container like:
@ZainM.
@ZainM. 9 месяцев назад
isDark ? "dark" : "light" Where basically "light" doesn't exist so it goes back to default right ?
@Code_Complete
@Code_Complete 9 месяцев назад
Yup that’s right, you could leave it as “dark” : “” as well
@ZainM.
@ZainM. 9 месяцев назад
Your Video's are helping me clear concepts! Thankyou so much @@Code_Complete ❤❤
@GameStrings
@GameStrings 7 месяцев назад
😅
@MuhammadAbdullah-fr1fu
@MuhammadAbdullah-fr1fu 2 месяца назад
bro your teaching style is not good. Plz talk slow so we know what you are saying
@S-Lomar
@S-Lomar 7 месяцев назад
Well done 🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰
Далее
React Dark Mode with Sass (Toggle Theme)
21:54
Просмотров 18 тыс.
Why Signals Are Better Than React Hooks
16:30
Просмотров 456 тыс.
ASMR Programming: Dark/Light Toggle | Pure CSS
5:33
Просмотров 16 тыс.
Subtle, yet Beautiful Scroll Animations
5:04
Просмотров 1,6 млн
Dark mode with TailwindCSS in under 7 minutes
6:58
Просмотров 26 тыс.
Light / Dark Mode Toggle In React Tutorial
16:02
Просмотров 95 тыс.
You’re doing dark mode wrong!
7:54
Просмотров 45 тыс.
10 Tailwind Classes I Wish I Knew Earlier
13:31
Просмотров 165 тыс.