Animated Dark Mode Toggle | CSS Dark Mode Toggle Button

Animated Dark Mode Toggle, CSS Dark Mode Toggle Button, Light Dark Mode HTML CSS, Light Dark Mode Toggle, Dark Theme Toggle Button, Dark Mode Animation CSS
Click For More: / @codehal
Website:
codehalweb.com/
-------------------------------------------------------------------
🔔 Subscribe Now!
/ @codehal
Music:
Track: Ikson - Anywhere [Official]
Music provided by Ikson®
Listen: • #66 Anywhere (Official)
Track: Syn Cole - Time [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • Syn Cole - Time | Futu...
Free Download / Stream: ncs.io/SCTime
Night is Young by Roa / roa_music1031
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/3WKT0IN
Music promoted by Audio Library • Night is Young - Roa (...
Codehal
-------------------------------------------------------------------
#css #cssanimation #csseffect #codehal
-------------------------------------------------------------------
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use.

[@mohibsaeed2837]

First I just watch the video without following anything he is doing. It's just so interesting.

[@Z33X]

looks soooo satisfying

[@wasifshahzad5001]

even though it is cool and great but I've one thing which I want to ask. with this we only animate the background and can't actually change the other elements of our website like text etc. How to do that? it can't be done without java script.
please help me

[@nqxyy]

Well, first we need themes/styles.
body.light-theme {
background-color: #ffffff;
color: #000000;
}
body.dark-theme {
background-color: #333333;
color: #ffffff;
}
Then we need some JS, you can name it whateva, idm.
// Function to toggle between light and dark themes
function toggleTheme() {
const body = document.body;
// Toggle the 'dark-theme' class on the body
body.classList.toggle('dark-theme');
// If 'dark-theme' is present, remove 'light-theme' and vice versa
if (body.classList.contains('dark-theme')) {
body.classList.remove('light-theme');
} else {
body.classList.add('light-theme');
}
}
// Add a click event listener to the button
document.getElementById('themeToggleBtn').addEventListener('click', toggleTheme);
Lastly the HTML
Toggle Theme
This is it, enjoy and I'm glad I could help.

[@mugosquero]

If you want a JavaScript-free solution, you can't. Well maybe you can considering some crazy CSS-only ptojects out there but you may not want to maintain a project like that.

[@xpple]

thats the thing, you need to use javascript but dont worry its all really simple you only need to change styles of certain elements.

[@juanjohuiza]

Fine work!

[@vujadinovicc]

😍😍 bro you amaze me

[@codehal]

Hvala Hans❤

[@dkstatus9934]

Source code

[@4nozomin4]

cool...so good❤

[@leonardolutaif6739]

amazing

[@dowelg1071]

Nice

[@codehal]

Thank you .....

[@Savorysoul]

Amazing

[@Savorysoul]

We wanna more tutorial about web development

[@codehal]

Yeps, keep supporting

[@komzl647]

Gg bro ❤️

[@codehal]

Cheers❤