Light/Dark Theme Toggle with CSS and JavaScript
ฝัง
- เผยแพร่เมื่อ 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: th-cam.com/users/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 - วิทยาศาสตร์และเทคโนโลยี
Thanks very much! This is exactly what i needed! Keep up the good work!🔥
This is by far the most cool and simplified video about Dark Mode on web design I've ever seen. Thanks!
Your dimensions are always good! I like the way you use them
You are just amazing Florin Pop. Nice Tutorial.
Thanks for including source code! More people should do so in their descriptions.
I'm very grateful.
Thank you so much Florin, you're my favourite TH-camr!
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.
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.
Very nice. I learnt a lot. Cheers mate!
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! ❤
Thank you very much, Florin. This was very helpful.
Excellent vid, clear and concise. Thank you!
Thank you, Florin! I really appreciated this tutorial! ☺
Glad you found it useful 😃
thank you florin poppp!
It's beautiful and so smooth that you explain
Wonderful Explanation!!:)))
very well explained cleared all concepts. THANKS..!!
I love it!
Thanks Bro..loved the tutorial
Thanks Florin very cool
This was great, thank you!
My pleasure to help!
Thank u so much I use your toggle component
nice video!!! thanks man
Thank you
thank you bro it is very useful video
i wait new video from you
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?
You should make a video tutorial on each one of your 100 projects in 100 days
Awesome !
Thanks lot sir✨
this actually helped me
Glad it did!
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?
Thanks, sir, its awsome.
thanks!
You're amazing
You’re amazing! 😃
How can I both move the ball and change the background color when I click the switch?
Great video, I love the button but for some reason my checkbox is not working... does this work in Blogger?
Awesome
Thanks alot
hai, how about each of both toggle dark or light functional and keeps staying each of button when we refresh the page.
Hey Florin! when I tired styling the ball div in CSS , its not showing up for me. What am I doing wrong?
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??
thanks
Liked before watching ❤️...
Me too!
How I change the font color when change theme?
love it...Keep going dude!
Very nice
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?
thanks a lot ❤️❤️
My pleasure 👍🏻
Thank you ❤️
My pleasure 🙏
Anyone have an idea why mine would work on codepen but not in chrome?
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
Why aren't you implementing the clicking event in js?
Hey where we past it in blogger.
How do you load it automatically then?
Thanks
Why do moon and sunlight icon don't show
Great❣️
Thank you 🙏
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'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!
Source code with explanation! this is a gem thank you
I love you so much
Another Great video Florin.
Keep it up.
Little suggestion: Please improve the audio quality if possible 😊
@@FlorinPop That's great buddy. Looking forward 😉
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 ☺️
What IDE do you use?
Hello sir,
How to apply it to id?
#idName.dark somehow does not work.
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?
Cool
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?:)
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
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?
Please how can I make this to be static if I refresh it will just diaappear
by local storage
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
fas fa-moon and sun not working in my pc but i had linked font awesome cdn
Ever find a solution to this?
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 !
What's that font thing you had to download at 2:53?
my is not working maannnn
💓
good traning
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 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
It works great though i don't get white it won"t stay in dark mode with my pagination
R u code in vscode?
name of the code editor pls?
codepen.com
100 projects in 100 days
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?
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.
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 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