light and dark theme using pure CSS (NO JAVASCRIPT)

Опубликовано: 25 Май 2026
на канале: CodeIT
975
11

Hello, world 👋. In this video, I showed you all how can you create a website that toggles its theme between light and dark mode automatically according to the system theme using pure CSS. This is a lot easy than you think! It's just one line of code and everything else is just setting up the layout.
Still, there is one drawback of this. The theme only changes when you change the theme of your system, it does not change on any button click. To achieve that, you would have to use javascript. Fortunately, I have already created a video teaching you how to create the same effect 👉    • light/dark theme toggle with css and javas...  
Let's rock n roll

🌟 Important Links:
CSS Variables:    • how to use CSS Variables | css custom prop...  
Customize Visual Studio Code:    • Customize your vs code - themes extensions...  

📝 Sourcecode:
https://github.com/ani-24/toggle-them...

📺 Must watch videos 🤩
▶ Top Visual Studio Code extensions:    • Customize your vs code - themes extensions...  
▶ Underline CSS Hover effect:    • Cool underline CSS hover effect 😎. || CSS ...  
▶️ Smooth scroll using pure CSS:    • Smooth scroll using pure vanilla JavaScrip...  
▶ 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.