21–30 of 34 posts
> the server-rendered HTML will always default to light mode. This creates a flicker for night owls
You might consider switching this - render the dark-mode version by default, and have the flicker be from dark-to-light. For users operating mostly in dark mode, a bright flash of white can be painful. The same is not true for users operating in light mode - they will barely notice a moment of dark.
Really great article, and the site looks great! One small piece of feedback: > the server-rendered HTML will always default to light mode. This creates a flicker for night owls You might consider switching this - render the dark-mode version by default, and have the flicker be from dark-to-light. For users operating mostly in dark mode, a bright flash of white can be painful. The same is not true for users operating…
The bulb is a really nice detail, and the color schemes are both really nice.
Really great article, and the site looks great! One small piece of feedback: > the server-rendered HTML will always default to light mode. This creates a flicker for night owls You might consider switching this - render the dark-mode version by default, and have the flicker be from dark-to-light. For users operating mostly in dark mode, a bright flash of white can be painful. The same is not true for users operating…
Really great article, and the site looks great! One small piece of feedback: > the server-rendered HTML will always default to light mode. This creates a flicker for night owls You might consider switching this - render the dark-mode version by default, and have the flicker be from dark-to-light. For users operating mostly in dark mode, a bright flash of white can be painful. The same is not true for users operating…
To avoid a flicker, add to the tag, and also put the JavaScript code in so it runs before any content is shown.
I like this a lot. I had a similar idea for my own site[0], but I leaned a bit more heavily into the actual cord behavior of the thing. [0] https://svarden.se/post/the-worlds-most-satisfying-toggle
Two improvements that could be made: 1. My dark mode preferences change throughout the day. Caching the value in localStorage means that it will require manual updates twice a day. Add a behavior that automatically unsets the localStorage key whenever it would set it to the currently system-preferred value. 2. Apply the override using a CSS class on the body element calculated from a synchronous JavaScript block to a…
#2 is a great idea. I made a todo for myself to do that at some point.
Very cool! Love the little cord pull. > ...the server-rendered HTML will always default to light mode. This creates a flicker for night owls... I played with this a bit and yes, that flicker is harsh. I appreciate the fade-in, but maybe have the initial color on load be somewhere between light and dark and then fade it to whichever is set by the client.