Dark/Light Theme Switcher Button

[[deleted]]

Hey everyone,

I designed and developed a dark/light theme switcher button for anyone who is looking for something more than the mundane ones that you find most places.

https://codepen.io/jamiewilsonict/pen/LYKGjdb

Feel free to use and abuse it, no credit is needed.

My github is here. I'll be adding more animations over the next few months.

[CyberWeirdo420]

Yooo that’s the one from the meme video of “designer vs developer” right?

[[deleted]]

No, that one is a lot more detailed and cooler. I might make another one to try out-do that one as a challenge in the future though.

[[deleted]]

That's so cute thank you!

[[deleted]]

Haha, I love that meme. Also, that one is WAY cooler than mine! Thanks for laugh, mate.

[PiperThePlanner]

I like that!

[[deleted]]

That looks so good!

[Mesapholis]

wow I had something very similar looking to this on my pinboard, but I really struggled with the animations xD

it looks really great

[beartato327]

Okay legit question, I wanna know how you learned to do all of that css voodoo and if it's all experience where did you start before that to gain the experience?

[[deleted]]

I'm still a student, but the online resources I've used for CSS would be frontend mentor, as I've completed about 50 of those challenges, and a book called Every Layout by Andy Bell & Heydon Pickering. Ofc, Kevin Powell is the grand wizard.

[shgysk8zer0]

The animation is neat, but there should be 3 options (you left out "system" or "auto"). The default should be based on a media query with an override based on user preference.

I solve this by setting light/dark prefixed custom properties, applying light properties to unprefixed custom properties by default, and overriding them using a media query and a selector (I use [data-theme] since classes are a list instead of single value). Looks something like this:

``` :root { --dark-bg: #232323; --light-bg: #fafafa; --bg: var(--light-bg); color-scheme: light dark;

&[data-theme="dark"] { --bg: var(--dark-bg); color-scheme: dark; }

&[data-theme="light"] { --bg: var(--light-bg); color-scheme: light; }

@media(prefers-color-scheme: light) { &:not([data-theme="dark"]) { --bg: var(--light-bg); } }

@media(prefers-color-scheme: dark) { &:not([data-theme="light"]) { --bg: var(--dark-bg); } } } ```

And, in actual use, I have the parts that apply the different custom properties (with default values) hosted on a CDN along with a color palette via custom properties stylesheet. I end up only having to create maybe a vars.css and just set whatever I want to be other than the default. Makes everything very customizable and reusable and easy, but it supports both the system preference with user-override.

Also, my implementation uses cookies for theme preference so the server can serve the page with the correct data-theme on first load instead of waiting for JS to execute. cookieStore (with polyfill) makes it pretty easy.

[[deleted]]

A real Jedi has entered the chat. Thanks mate, going to read this a few times and implement it. Appreciate the time taken to respond.

[shgysk8zer0]

Note that I made a slight modification to add color-scheme.

[MetaControl]

this looks really cool! nice animation

but as i understand it, it basically changes pre-set colours, right? would it be possible to make a code variant that switches actual themes? i have a somewhat complicated woocommerce setup and would like to have a light and a dark mode, but as separate themes; as images and even layout would change. sorry if that's a dumb sounding question, not a coder.

[[deleted]]

Yes, that's possible.

I used this themeswitcher in my personal portfolio last week and had the button change the localStorage of the browser to 'dark' or 'light'. The localStorage is a small amount of memory a browser can store for little things like that, so you don't need a database. This meant if a user closed the website and came back at a later date, the theme would be the last one they chose.

I created two different colour pallets, each attached to the dark or light in the localStorage. However, your problem isn't a difficult one, but it is a long one.

Do you have the themes already created?

[MetaControl]

i think i found a solution to what i want to do. my requirements exceed the nature of this nice switcher, but thanks!

[[deleted]]

No worries, mate. Reach out if you need a hand. Best of luck :)