Light/Dark Theme Toggle with CSS and JavaScript
HTML-код
- Опубликовано: 11 ноя 2019
- 👉 Daily Coding Challenges: iCodeThis.com/?ref=ytb-theme-...
In this tutorial, we are creating a Dark/Light Theme Toggle effect using vanilla #CSS and #JavaScript. This is a perfect component to be used on a website that has a Dark theme mode.
#100Days100Projects Challenge: www.florin-pop.com/blog/2019/...
Source Code: codepen.io/FlorinPop17/pen/XW...
#css #javascript
---
Support my channel:
💜 Become a Member of the Poppers Family and receive special perks: ruclips.net/user/florinpopjoin
💜 Donate via StreamLabs: streamlabs.com/florinpop2/
💜 Donate via PayPal: paypal.me/florinpop17
💜 Become a patron: / florinpop17
Thank you! 🙏
---
👨👩👧👦 Join the Discord family: / discord
---
Follow me on:
📃 Website/Blog: florin-pop.com
👉 Twitter: / florinpop1705
👉 Linkedin: / florinpop17
👉 Instagram: / florinpop17
👉 Facebook: / florinpop17
👉 Github: github.com/florinpop17
👉 Dev.to: dev.to/florinpop17
👉 Twitch: twitch.com/florinpop17 
Наука
![Darren Waller - Who Knew (Her Perspective) [Official Video]](http://i.ytimg.com/vi/GytDjB8u6bM/mqdefault.jpg)
This is by far the most cool and simplified video about Dark Mode on web design I've ever seen. Thanks!
I have been searching for a simple explanation on how to do this. thanks a lot
My pleasure
You have explained every line of code and I can make a theme switcher anytime I want without watching any tutorial. Thanks a lot.
Your dimensions are always good! I like the way you use them
By hiding the actual input you lose the ability to navigate the switch using the keyboard (tab + space). A solution to this would be to place the input inside the label (absolute), make it transparent and make it the same shape as the label. That way it works both with mouse as well as keyboard events. Also it would be good to set some hover/focus styles for accessibility.
Thanks for including source code! More people should do so in their descriptions.
I'm very grateful.
You are just amazing Florin Pop. Nice Tutorial.
Thank you so much Florin, you're my favourite RUclipsr!
Nice video! I have always wanted to learn to make a dark mode toggler. Thanks for making this a short and concise tutorial!
My pleasure! Thanks for watching ☺️
Loved this tutorial! It was an absolutely amazing beginner-friendly explanation! Thanks a lot, @Florin Pop! ❤
Thanks very much! This is exactly what i needed! Keep up the good work!🔥
Thank you, Florin! I really appreciated this tutorial! ☺
Glad you found it useful 😃
Thank you very much, Florin. This was very helpful.
Excellent vid, clear and concise. Thank you!
Very nice. I learnt a lot. Cheers mate!
It's beautiful and so smooth that you explain
very well explained cleared all concepts. THANKS..!!
Your tutorials are really excellent, you deserve many more subscribers !
Thank you Maxime!
@@FlorinPop Hi @Florin pop!
I'm using the vscode. I donno how to add that extension or import that font awesome thing in that vscode. Could u please help me?
thank you florin poppp!
Hi @Florin pop!
I'm using the vscode. I donno how to add that extension or import that font awesome thing in that vscode. Could u please help me?
You should make a video tutorial on each one of your 100 projects in 100 days
Thanks Bro..loved the tutorial
Wonderful Explanation!!:)))
This was great, thank you!
My pleasure to help!
Thank u so much I use your toggle component
thank you bro it is very useful video
i wait new video from you
Thanks Florin very cool
Hey Florin! when I tired styling the ball div in CSS , its not showing up for me. What am I doing wrong?
Thank you
I love it!
Is there a way to use this to enmass change the colour of all text without going: body.dark p { colour ... then same for h1 and same for everything??
this actually helped me
Glad it did!
nice video!!! thanks man
Thanks lot sir✨
How can I both move the ball and change the background color when I click the switch?
hai, how about each of both toggle dark or light functional and keeps staying each of button when we refresh the page.
Another Great video Florin.
Keep it up.
Little suggestion: Please improve the audio quality if possible 😊
@@FlorinPop That's great buddy. Looking forward 😉
Awesome !
Anyone have an idea why mine would work on codepen but not in chrome?
Thanks, sir, its awsome.
love it...Keep going dude!
Great video, I love the button but for some reason my checkbox is not working... does this work in Blogger?
Hey man this is cool stuff!!!! I really appreciate you and one suggestion kindly increase font size bcoz its too small
Did it in newer videos ☺️
Project very explained very well👍🏽.
I understood how you changed the paragraph colour while toggling. I would like to know if there is a more efficient way to do this when many elements are present. Do we have to do 'body.dark element{} ' for each individual element if we want the colour to be changed to a different colour while toggling?
Liked before watching ❤️...
Me too!
You're amazing
You’re amazing! 😃
How I change the font color when change theme?
so if u have 20 element u want to change on dark mode u will have body.dark "element" 20 times too? How to override a root variable on dark mode
thanks!
Source code with explanation! this is a gem thank you
Why aren't you implementing the clicking event in js?
Hey where we past it in blogger.
Hello sir,
How to apply it to id?
#idName.dark somehow does not work.
Thanks alot
I'm trying to build this feature into HTML pages I'm creating on VSCode, this IDE doesn't have those three boxes marked HTML CSS JS, can somebody help me few moments please, for aspiring junior software developer? I've got my HTML page editor open in VSC, obviously it's not hard to apply all these CSS attributes between tags in of my code, but where does the JavaScript go into? Into tags perhaps? And then place script tags below tags in the body?
I am sorry that nobody gives a fuk to help you here...
You need to create a new java script file for example theme_checkbox.js then enter all the code there:
const chk = document.getElementById('chk');
chk.addEventListener('change', () => {
document.body.classList.toggle('dark');
});
Once you complete that step you go to your HTML file (the one that you are trying to add that feature to) and then just before the tag you add this line (of course you need to replace /static/js/theme_checkbox.js with your path to the javascript file):
I hope that helps and all the best with your career!
Why do moon and sunlight icon don't show
What IDE do you use?
thanks
thanks a lot ❤️❤️
My pleasure 👍🏻
Awesome
Thank you ❤️
My pleasure 🙏
Very nice
Great❣️
Thank you 🙏
What's that font thing you had to download at 2:53?
Can we merging the html, css, and javascript into 1 worksheet?
If yes, then the structure looks like this? (without '.' in the style sett), ex:
h1 { color: #999; font-family: sans-serif}
bla bla bla
or this one (with '.' in the style sett) ?
.h1 { color: #999; font-family: sans-serif}
bla bla bla
About the javascript, where to put?
How do you load it automatically then?
Thank you for very nice tutorial , Florin!!
Have one question about CSS style, what is the difference between "body.dark" and "body .dark" (with space) ?
With the space it goes to a inner element that has a class of .dark. But we want to target the body which has the class of .dark so that’s why we have: body.dark
Florin Pop thanks !!
I have seen your challange 100 project per 100 days, and I accepted demo version for 30 projects per 30 days for a start, thanks for idea.
By the way also I have seen your first project with random generator meals, can you create video tutorial how you create this with comment?:)
Thanks
I love you so much
How could I change the background for classes? I did Const x = document.getElementsByClassName(‘ links’); x.classList.toggle(‘dark’); It didn’t work.
getElementsByClassName will get you a NodeList so you basically have multiple Nodes. This is why it doesn't work.
You have to loop over them (the Node items) and toggle the class list.
Florin Pop Thanks for the reply
@@FlorinPop can u please share the code or make a tutorial on toggling classes?
what kind of sorcery is this? ie when you typing .ball it becomes .WHY?HOW?I NEED THAT TOO
It is called emmet. It's an extension
@@FlorinPop thanks, chief! I see it all the time in videos and nobody bats an eye nor hints to why this is happening. Googled it, installed it, using it. Thanks to you, my man
how do i make this affect letters, rn, it only affects background colors?
You can change the color property
@@FlorinPop how would i do that? what would the code look like if I did that? btw i'm so suprised u actually replied!
What have you tried so far?
@@FlorinPop nothing yet, i was hoping for some suggestions for me to do or code snippets so i could put them in the code?
body
{
color: black;
background-color:white;
}
body.dark
{
background-color: black;
color: white;
}
const checkbox = document.getElementById('checkbox');
checkbox.addEventListener('change', () =>{
document.body.classList.toggle('dark');
})
anyone know why this doesn't work for the text? it only changes bg color
I wrote same code of all 3 files but the pictures ( of moon and sun) near ball are not on my screen. What can be the reason?
You might be missing the fontawesome library
@@FlorinPop It works. Thanks !
Can you make it work when you navigate to a different page on the same website?
Yes. Store it in localstorage
I have done that, but still doesn't work
Join the discord and let’s see
Can you please help me with that? I'm not very good at js
As I said, join the discord as it’s easier to help you
Cool
Please how can I make this to be static if I refresh it will just diaappear
by local storage
my is not working maannnn
good traning
fas fa-moon and sun not working in my pc but i had linked font awesome cdn
Ever find a solution to this?
Getting this: "ERROR: parsing error: The keyword 'const' is reserved". Any advice?
Are you trying to assign const to a variable, function, etc........have you named anything const in your code?
I copied the code line to line into my project. So no, i guess i haven't named anything "const". :D JS is a new thing for me and i've tried everything to make this work. Weird thing is, it works on online code editors, but not on dreamweaver or visual studio code.
@@boostas9842 which line is the error on?......it's usually printed alongside the error message
@@hope-ag It's on the first line of the js code
@@boostas9842 const chk = document..............You sure the "chk" is in the line?
i saw your comment on dev ed and came here
@@FlorinPop OMG that was fast did you make a bot to replay????
i dont have this sun and moon on the button, help
Add this to your HTML and you should be OK.
@@janchalupsky3211 Thanks a lot man, I was struggling to find something about it hehehe
name of the code editor pls?
codepen.com
It works great though i don't get white it won"t stay in dark mode with my pagination
R u code in vscode?
100 projects in 100 days
Mine is not working, I get the icons (moon & sun), but It's not getting dark, u know? No transition... does anyone knows why?
Hi, did you find what was wrong? I have the same problem
@@Leilektsoglou I've watched another tutorial and fixed it
@@Gabriela-ld8ri Please, send the link if it's easy for you
@@Leilektsoglou The code needs to be placed within but AFTER the checkbox code. This is because the JS is dependent upon that checkbox; if the script is placed above it the script doesn't know what checkbox to refer to. (CC: David T)
Why every developer has diffent types of coding method? .
We are different people.
As a newbie its hard to follow. But slowly i understand. Do you recomend weschool? Just for the command though.
💓
🌝👍
Why can't you teach to build a UI design from uplabs. We can learn how to convert a design to UI. Please do that for front end beginners
I did that in my live streams
I checked that
Did you mean that portfolio design.Yes we need more design like this.For example web apps ui,web apps js interaction like that
Kindly request you to do that type of video
Thank you
Thank you