Creating a Dark & Light Toggle Mode on your UI Designs

Do you give your users the option to switch between light and dark? Let us know!

what aboout photos ?

Thanks man ✌✌🙂🙂

Nice! Quick question: How do you remove that stretchy/wobble-effect on the switch when toggling? I just want it to stay round..

Would this be possible to do this based on the url with angular universal server side? 🤔

well nice video but the problem is: what happens if i refresh the page? bah it changes back to white so think about instagram nomatter how many times we refresh it never changes !! need that trick 😣

This is really great, I wish you could have a course on changing themes colors using color picker

Yes I will

How to convert var(--white-color) to SCSS?

There is lorem ipsum- Extension? o.O Good to know! Thanks for the tutorial, really good work.

I really want to know how to do add linear gradient background in dark theme in css file?

I won't use it for all my projects but it's something cool to use where it is applicable.

Amazing

Brilliant! In answer to your question, yes I will be providing a light and dark mode on website, I actually want a 3 position toggle slide bar, 1 for colour mode as well...!

Hey! i visit a page and change to dark mode when my phone was in low battery.
That was so cool, thanks for the video.

Hey ! DesignCourse i know basics of html css but want to be expert in it can you give paid classes for that? I am from Pakistan and very much inspired by your work so can I learn these skills from you. Please regard my comment

how to keep dark mode in local storage of the browser? it resets back to light mode after refreshing the page and the checkbox stays checked :/
I'm an absolute html beginner

I want to save this and incorporate it into my Websites from now on.

Very cool! Can't wait to apply this to some projects

How would you add Localstorage to this effect?

after page refresh it will again turn into light theme by default.

Show!!!!...

I guess the biggest question I have after watching this is, when using this method to give your user the choice to toggle, is there a good way to still have the default theme for your layout be the system default? Right now all of my sites default to the users system (light/dark theme) but I'd love to be able to give them the option to toggle as well.

if i do it without importing it and modifying it is illegal?

Is this browser compatible ?

Teşekkür ederim dostum 😀

Sir, you are brilliant

What about create this variables into a mixin? is that a bad practice?

Thank you for this great tutorial master

Can I make a dark-mode switch without any JavaScript?

how to add this dark mode in a local storage?

Really colourful

hello pal, how we can clone the new light Facebook theme, principally in buttons, links, hover , thanks.

The script doesn't work for pseudo-elements

Now how to use cache and used them to enabled dark mode . after reload browser

thank you for making this tutorial. really helps me...

Hey man,
Awesome Tutorial
One question : When I reload the page of go to another, the theme changes back to white again.
Any solution ?

Awesome!

For bigger sites with many variables would you load another SCSS page? Like light.css and dark.css?

Great video!! Simple and easy to understand!!!

Usually people are not straight forward!!! Many stupid tutorials out there with many unnecessary things!

I wrote the exact same thing and it didn't work. Just a normal day...

So, why did you use var checkbox and then let further down for a seperate declaration?? or is it just habit?

Sir, i want to make a website where user can change it like what they like. If they change the theme to blue color, the other pages will automaticly change to blue color. How can i do that?