Light/Dark Theme Toggles
Looking into perhaps adding one to my portfolio. The default color scheme is dark mode, my first thought on how to add light mode (or dark mode) is to add a button (Switch?) that changes the colors on click, so light mode goes to white background, black text etc... Is there another way that I haven't perhaps thought of?
10 Replies
Hi! Probably you need to consider the
System preferences. You can find an example of how this works in this website: https://ui.shadcn.com/Look up prefers-color first
then look into how you will do a switcher
again the tricky part is only going to be preventing the FLOC or user choice if you do add a switch button
Which if you use a cookie and serverside its best but there are tricks for client side too.
Thanks B1, I'll go digging into the dark depths of google
Joy Of Code
Favicon That Works for Light and Dark Mode
How to make a favicon that respects the user color scheme preference?
This is pretty neat too if you wanted to change up your favicon as well. Shows basically the same code you would use for a light/dark preference as well.
SVG favicons when... (come on safari!!!)
Oh nice!
I’ve used CSS variables that are redefined in a light class vs dark class that’s applied to the body. Then your switching is just changing the class name on the body to apply one of the two sets of variables.
I prefer going with what Chris Coyier calls it.. FART 😆
https://css-tricks.com/flash-of-inaccurate-color-theme-fart/
I’ve used a small inline script directly below the opening body tag that reads the system / user preferences and initializes the theme. Worked perfectly and completely avoided FART.
Nice elegant and natural solution 😄 🥁