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! 👍🏼
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!
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!
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.
I wish to ask why we couldnt put the sun and moon above the button and the title. Would that not save us complexity in the code and avoid the usage of position etc.
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?
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
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?
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
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.
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
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
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??
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.
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.
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 think this is not a practical theme changer because you did overflow hidden on the body so the site can't be scrolled down if there are more contents and separate theme changer button do not look very well instead of the sun and the moon should behave as button but animation of svg and transition of colors was good.
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.
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.
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
I have seen this video: ua-cam.com/video/Zi2UwhpooF8/v-deo.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?
me: I wonder how to make a dark theme toggle
webdevsimplified: I read minds
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
Dude I was just thinking about that and here you go reading my mind.
So do I =)
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 the most underrated video on this topic. This needs more reach
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! 👍🏼
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!
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!
I like the video before watching it 😍😍
Thank you!
You deserve more likes!
_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!
Thanks ! Learned a lot ♥️
thanks for this tutorial! very informative
You are the best! Thank you for the tutorial!!!
Nicely explained!
0:00 your mind is my ware house theme intro.
A new visitor hits the subscribe button. Thanks so much.
amazing tutorial
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!
Nice work!
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?
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 tutorial
hey man i love your work im doing this rn.
thank u so much sir it's helped a lot....................
amazing, thank you
Amazing video
I wish to ask why we couldnt put the sun and moon above the button and the title. Would that not save us complexity in the code and avoid the usage of position etc.
Great video, except your head was covering the moon the entire time before you added rotation lol. 21:50
How do you load it automatically then?
Hi bro ,, I love your all js video you really simplify it can you make a video on carouseller please
why my moon and sun icons color not changing to white in dark mode
Amazing lecture.
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
If I want save the state for toggle then how can I do this?
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
Thanks! :)
why no semicolons in the JS code?
Edit: Just found out the semicolons are optional but recommended in JS.
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?
Thanks for the video! What's the point of using calc?
In css you have to use calc() to do calculations.
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!!!
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.
Nice, how can I save the state of the toggle?
I use LocalStorage
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
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
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??
I love you!
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.
How about with React?
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.
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.
thank's
I think this is not a practical theme changer because you did overflow hidden on the body so the site can't be scrolled down if there are more contents and separate theme changer button do not look very well instead of the sun and the moon should behave as button but animation of svg and transition of colors was good.
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).
I dont want that animation i want a button which switches !But cool tutorial
Thumb Up
men, how can i make a commentary so fast in HTML? how i use emmet to make a comment like you do?
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.
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
i promise it is there xddd :D
Can i code like this on Mobile?
🌓
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
bro, can you make a video, for interacting with OMDb API?
nice boy
I have seen this video: ua-cam.com/video/Zi2UwhpooF8/v-deo.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?
You are so handsome So I got distracted easily
Pls make a video doing the same thing but using react instead ✌🏻
Please compile javascript interview questions for 10 years work experience developers