light/dark theme toggle with css and javascript

Опубликовано: 30 Май 2026
на канале: CodeIT
98
6

Hello, world 👋 In this video, we created a layout with a button that allows toggling between dark and light modes. This is a very attractive and interactive way of creating websites. We often see people having trouble seeing the website with bright colors at night but bright color is a great choice in the day so to handle this, we create a layout that has both light and dark themes. We achieve the effect using more CSS and a bit of JavaScript. We use a modern concept of CSS 3 that is CSS Variables, and if you are not familiar with CSS Variables, check this video out 👉    • how to use CSS Variables | css custom prop...  

📝 Sourcecode:
https://codepen.io/pen/?template=bGrOVRm


📺 Must watch videos 🤩
▶ Top Visual Studio Code extensions:    • Top visual studio code extensions themes a...  
▶ Underline CSS Hover effect:    • Cool underline CSS hover effect 😎. || CSS ...  
▶ Reveal Elements on scroll:    • Reveal elements on scroll using pure javas...  
▶ Parallax effects:    • Parallax Effects  
▶ Pure vanilla JavaScript projects:    • Pure vanilla JavaScript projects  

🌎 Find me on:-
Github:- https://github.com/ani-24
Codepen:- http://codepen.io/codeit-ani
Discord:-   / discord  

###############################################################

Thanks for watching the video, make sure you are subscribed to my channel and press the bell icon so that you don't miss any of our videos.

Subscribe to my channel:
   / @codeityt  

Also, share the videos with those who need them.