How To Build An Advanced Light/Dark Theme Toggle
HTML-код
- Опубликовано: 10 сен 2024
- Theme toggles are a fairly simple concept, so in this video I decided to take a theme toggle to the next level by creating animations around the theme switch. These animations lead to a really fun project that covers CSS custom properties, CSS specificity and so much more.
📚 Materials/References:
GitHub Code: github.com/Web...
CodePen Code: codepen.io/Web...
Emmet Tutorial: • Learn Emmet In 15 Minu...
Material Design Icons: materialdesign...
🧠 Concepts Covered:
- How to use CSS custom properties
- How to handle CSS transitions
- CSS position context
- Managing document overflow
🌎 Find Me Here:
My Blog: blog.webdevsim...
My Courses: courses.webdev...
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/Web...
CodePen: codepen.io/Web...
#ThemeToggle #WDS #LightDarkMode
me: I wonder how to make a dark theme toggle
webdevsimplified: I read minds
Dude I was just thinking about that and here you go reading my mind.
So do I =)
I always used to use this approach of CSS variables, but I wasn't sure if I was doing that right now all my self-doubts are cleared, Thank you so much
Fantastic content and very clean presentation style! I love how you explain everything along the way so clearly and effortlessly: even as a beginner, I had no problem following thanks to you showing what was happening at every step. Well done!
only thing i didn't know about in this tutorial was vmin. i watch your videos because they are relaxing and i accidentally learned something on the way. great stuff.
This is a life saver tutorial for me This morning.. I have been working on a project and the CSS variables was so confusing to manipulate between dark and light mode. I had to re-declare the CSS elements again and assign it to another value without using CSS variables... I know that's a double work. but after I watched this tutorial, I perfectly understood how to use CSS variables to manipulate between light and dark theme easily... Thanks man
I’ve watched you for over a year, and I’ve been coding for a little longer than that. Yet, you mentioned using defer as an alternative to putting the script at the end of the body.
Although I understand both, I’ve never really connected the two honestly, but that’s what I love about your method of teaching, you go over every line basically and even the “small” stuff gets mentioned. You don’t explain only how, you explain how and WHY. And that’s really important to me. Also why I bought your CSS course! Keep it up! 👍🏼
This is the most underrated video on this topic. This needs more reach
One of the best tutorials I've seen - amazing work Kyle!
Wow man. You really know your stuff. It's impressive how confidently you take us through the project. I definitely know what channel I'm coming to for web dev. Good stuff!
tons of appreciation is even not enough to appreciate you!
0:00 your mind is my ware house theme intro.
This is so good!!! I appreciate your guides, really easy to understand & follow.
i just love watching your videos and i just love your contents
i find you inspiring truly
Thank you!
amazing tutorial
thanks for this tutorial! very informative
You are the best! Thank you for the tutorial!!!
I like the video before watching it 😍😍
A new visitor hits the subscribe button. Thanks so much.
Thanks ! Learned a lot ♥️
thank u so much sir it's helped a lot....................
Thanks it helped me learn new properties 😍😍
Kyle my friend, I can see it in your eyes, you are super tired. As much as I like your videos and the frequency to which you are pumping them out, I am recommending a long vacation.
There is no point stressing it out, we'll still be around here when you'll be back. One of my buddies died at 30 years old from cardio arrest, same deal, long hours, less sleep, over tired, trying to look at his best, it costed his life... just saying... take care my good man!
Nicely explained!
It works well in Google Chrome, but for some reason the color transition on the sun/moon doesn't work in the latest Firefox.
Great video, except your head was covering the moon the entire time before you added rotation lol. 21:50
_6:00_ *Keep your friends rich and your enemies rich, and wait to find out which is which*
It's was said by Ultron but a man there says tony said this and I've read somewhere that Howard Stark said this!
Thank you!
You deserve more likes!
amazing, thank you
Great tutorial
Nice work!
Nice project and good walk through but, I wish that more javascript was used in this tutorial. I didn't like the fact that allot of what could be done in js file, was done in css file instead
hey man i love your work im doing this rn.
Holy smokes! Kyle's uploaded a new video. Thanks so much! I've heard you got a job, can you share some info like what your position is and what your stack of technologies is.
I have had my job for quite awhile now. I work mostly with Ruby on Rails with Postgres and React as my stack at work. I am a fullstack developer at my job.
@@WebDevSimplified sounds fun. Do you find your job challenging and difficult?
How do you load it automatically then?
why my moon and sun icons color not changing to white in dark mode
thank's
For some stange reason I followed every single step and double checked and still neither the sun nor the moon rotates. Only the accent changes, can you help me?
Amazing video
Thanks! :)
why no semicolons in the JS code?
Edit: Just found out the semicolons are optional but recommended in JS.
Sir due to the Inline style in Sun and Moon icon we were not able to change the height and width to 30px. I have suggested the changes in your Github please see to it. As it is my First pull req
If I want save the state for toggle then how can I do this?
Hi bro ,, I love your all js video you really simplify it can you make a video on carouseller please
I tried transition for smooth toggle of bg color, but when its in dark mode and I refresh my page, I get a white flash and then it goes to dark mode. Is there a fix for this?
set transition delay for that then it will took time to things happen and flash 'll appear
How about with React?
Nice video! I’m just wondering why you didn’t mention the @media prefers color scheme tag in this video. Maybe you can show how to make it automatically change to dark if the user has dark mode on.
Amazing lecture.
Hey Kyle, I often find myself using shitf+alt+f to auto indent whenever I change scopes. Is there a reason you are not using that in this video?
Thanks for the helpful tuts bwt :)
I find the auto formatted tends to mess things up in HTML.
I dont want that animation i want a button which switches !But cool tutorial
i have a quetion... once i tried to add an icon in my web project but unable to find it online so i decided to make a svg in illustrator and when i use that svg in my page it didnt act like a icon (as i cant change its color) ...plss explain what to do in that case??
Thumb Up
Thank you very much for this video, I really needed your instructions to create the dark version of my website! I just have one question tho: even If I copied the codes showed, when I open the preview of the page It shows immediately body.dark theme and not the "standard", "white" one. How is that? It's not such a big problem, I just could invert the colors and I would make it anyway work as I want, but I would like to understand better this mechanic
probably an issue with the javascript portion, removing the "dark" class from the body element.
@@nedaltrebor8553 It was that!!! Thank you!!!
I love you!
i promise it is there xddd :D
how can you see the outcome of the result without refreshing the page?
He use a Visual Code plugin named "Live Server". Once installed you do a right click on your index.html file, choose "Open with Live Server" and that's all. Be sure to work with your file open in a folder with Visual Code.
Thanks for the video! What's the point of using calc?
In css you have to use calc() to do calculations.
men, how can i make a commentary so fast in HTML? how i use emmet to make a comment like you do?
Nice, how can I save the state of the toggle?
I use LocalStorage
i got a JS problem "Cannot read property 'addEventListener' of null" , anyone can help !!
What is the problem can you share the code
@@travelingvibes7796
const sunMoonContainer = document.querySelector('.sun-moon-container')
var x=document.querySelector('.theme-toggle-button');
window.onload=function() {
x.addEventListener('click', () => {
document.body.classList.toggle('dark');
const currentRotation = parseInt(getComputedStyle(sunMoonContainer).getPropertyValue('--rotation'))
sunMoonContainer.style.setProperty('--rotation', currentRotation + 180)
});
}
ERROR :
sc.js:13 Uncaught TypeError: Cannot read property 'addEventListener' of null
at window.onload (sc.js:13)
@@user-zp1dv4yh5e maybe you have typo in the html file for theme-toggle-button
Make sure you have the attribute "defer" in the tag (in the HTML's section).
ex.
That way JS runs after the page has loaded and the element you want to select exists in the DOM.
my transition isn't working, it still switches instantly 😥
I fixed it. I use chrome so I needed to include: -webkit-transition: var(--transition-delay).
nice boy
🌓
what's the hotkey he is using when fixing the indentation? where can I find another useful hotkeys like that one?
I like that .can you make it in react js with component thanks
Great video :) I always wanted to know a more in depth way of doing this without using a library like say Angular Material, thank you :)
One question tho, wouldn't this cause a bit of overload if say someone clicked that button a gazillion times? since the --rotation variable would be just adding 180 every time you click it. Just wondering.
That's exactly what I was thinking. High five to my man!
You shouldn't run into any issues with the rotation since even if the number gets big it would require an immense number of clicks before the number got too large.
Can i code like this on Mobile?
Can I make a suggestion: make a really long video that breaks down the basics of a language start to finish. Will be a pain to make - but will bring all the beginners to your channel, who will then stay for the more advanced videos like this
like you did for free code camp regarding css / html
bro, can you make a video, for interacting with OMDb API?
I'm nostalgically remembering Windows 3.1, where I could create my own "dark mode" including buttons, scrollbars, etc. Such ability was taken from us, users, including user CSS's with !important rules, and we're at mercy of developers, which sucks
You are so handsome So I got distracted easily
Please compile javascript interview questions for 10 years work experience developers
I have seen this video: ruclips.net/video/Zi2UwhpooF8/видео.html of you. I got trouble at 29:46 in that video. I fill all the fields of book but i'm still get the error message and can not add book into db. Can u find out the bugs?
Pls make a video doing the same thing but using react instead ✌🏻