Thinking on ways to solve a DARK/LIGHT THEME SWITCH

In today's GUI Challenge, @AdamArgyleInk shares thinking on a way to build a theme switch component. Often a website will allow switching the theme to something other than the system preference and these are thoughts on how to achieve that user experience.

Chapters:
0:00 - Introduction
0:30 - Overview
3:10 - Debugging Corner
3:36 - HTML
7:40 - SVG
8:59 - Mask
10:00 - Animations
11:51 - Theme Toggle CSS
15:35 - Sun and Moon CSS
19:37 - JavaScript
23:45 - Recap

Resources:

#GUIchallenges #CSS #ChromeDeveloper

[whatamiwitnessing]

I now want to use this for every project I make. Such a clean way of doing this. Way better/advanced than what I made myself.

[DarrenbyDesign]

One day I'll come up with brilliant stuff like these! Great work

[maheshmahi]

This miniature has lots of stuff in it, looks cool👍

[_Time_Leaper_]

I've been learning web development for 2 year now, and had struggled to create a theme switch button that's really affected by prefers-color-scheme, all to find out that, in first place google has a developers channel, and in second place, they did exactly what i wanted 1 year ago :D

[RDaneelOliwav]

Love your dedication here! Always a treat to peek your repo and check it out before the video ;D

[jmagrippis]

Haha, I just did a video on Server-Side Rendered Dark Mode! Great minds think alike 😄 Clever to have the logic in a small blocking script to avoid the flash, since you’re doing it client-side. Which is more practical in all honesty, since it makes caching for everyone easier.

The animation is awesome, I love SVG-based transitions 🥰 I was mostly focused on the logic to make `data-theme` be correctly applied, straight from the server! A nice transition for the button was my next step, thanks for the inspiration 😄

[dailymeow]

Before Adam video: i am a css master
After Adam video: i mean i'm still learning 😿

[grinskks]

I recently did this as a web component. Really like them for things like that.

[shahzadnaeem]

Wonderful stuff as always. Your videos never disappoint 🤓

[mrmanlymanguydude]

I swear I learned like 100 different things about DevTools in this one video

[_erfanm]

Thanks for the great content, but could you please change your editor theme for the next one? It's a little bit hard to see some of the punctuations! (for sake of accessibility😊)

[cyril]

amazing, change the mind, the idea for next : show more button with count of hidden elements :) THX

[Ljwlax]

Thanks Adam! I learn so much from your videos 🙂

[windmaomao]

Man, i thought i’m learning how to do a theme switch, but actually i’m learning a lot of other kool stuff.

[avneet]

be nice to have this on codepen - would make looking at the code easier

[saeednoruzic]

Hello, there are two thing i want to ask you Adam;
1- could please make a guide on how you set your monitor for web development what you use and how you set them i like your set up but i don't know how should i set it
2- are there any logical CSS properties for (right - left - top - bottom) for absolute positioning in CSS like (block-inline-start - block-inline-end - block-block-start - block-block-end)

[Stoney_Eagle]

It looks nice.
Lighthouse will give you a fail on the charset attribute tho 😉

[inconito]

Is there a way to download each different icon (sun or moon) individually ? (either as an svg or png)

[fikriylmaz]

I'm using scss is there any other way to do this it gives error in variables and code compiler shows problem?

[albannurkollari]

I love how you explained the process of theme toggling. Props to you man <3.
If I may give a little advice on the JS part is that, I would keep last bits where you listen to match media changes, instead of manually triggering the theme via those 2 lines of code,
I would rather trigger the `.click` event on the button to be consistent, then if you'd change something what the button executes on it's click event, you'd be safe on other added event listeners as well as long as they trigger the button click.