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
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 in light mode - they will barely notice a moment of dark.
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 avoid the flash.
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.
Regarding the local storage Vs server side defaults I don't understand why you wouldn't use a web cookie to store the on/off state? Am I missing something
If he’d run the dark mode JavaScript in the head and control the style through a css class, it would not flash.
Cute bulb and effect. I like that your dark mode isn’t so harsh, as well. I feel they’re often max contrast, which is the last thing my eyes want to see. This is more of a … solarized?
Generally, pulling down on a light bulb only turns it off once.
I love the landscape at the bottom of the page! It really gives a sense of the page being a place. I might have to steal that page bottom concept! I've never actually seen it before.
The bulb is a really nice detail, and the color schemes are both really nice.
This looks nice and all, but this doesn’t work on mobile devices due to pull to refresh.
That's one classy looking personal page.
Ironically dragging doesn’t work on mobile
What if there was a real Edison bulb having a night mode?
I imagined it having a circuit to dim it during the night, like a night light. For example having a few filaments inside a bulb and switching between parallel for more light and serial for less light.
Our home was not well insulated and in a corner of our sleeping room we had condensing moisture (it was unavoidable because in the corner the temperature was way too low,the lowest I had was 9°C or 48°F). I thought about putting some nichrome wire (for example terrarium heating wires) in the corners and having a switch between parallel and serial as a means for two different power levels. The idea is a parallel switch. If you turn the switch, multiple contacts are connected and disconnected. If you connect the wires cleverly, you can switch between parallel and serial. Luckily our landlord found a permanent solution for this problem after I showed him the measurement I made, so I didn't need to build this.
So that's why I started to get a picture of an Edison bulb that has such a switch inside its base.