Skip to content

The best dark mode toggle is absolutely the one I have on my personal website because I say so

I am not here to contribute to the discord about the optimal dark mode toggle design, I just want to talk about me me me. ;) Why go for two-state or tri-state when I can go for hexa-state? I had fun making these modes. Let’s break them down.

My personal website.

Dark? mode

Um, why the question mark? Well, I seriously cannot say for sure this mode is truly dark. Surely it uses white text but the page background gradient animates with vibrant colors. One can argue these vibrant colors are bright, hehe.

Light? mode

The opposite of dark?: it uses black text. The page background gradient still animates with vibrant colors and some might argue they look kinda dark at times, relatively speaking, seen with black text, lol.

Plain dark mode

This removes the animated gradient background altogether and changes all colors to black and white.

Plain light mode

Similar to plain dark: no colors and animated gradient background.

Raw mode

This one is fun. Almost no CSS!!! I only set a content max width and changed the font to Verdana for better readability.

System mode

This adapts to your system settings, taking light/dark mode, reduce motion, and Windows High Contrast all into consideration.

You do you, boo

In the context of personal websites, go wild, do whatever the fuck makes you happy. Make the web fun again.