A fancy light/dark mode switcher that simulates a sunset.
### how it works
The code for the slider lives in [/script/sunset.js](/script/sunset.js). The entrypoint, `attachSlider`, is imported into our main script file, [`script.js`](/script/script.js), which is loaded on almost every page (it's part of the [page template](/template)). Among a few other things, `script.js` calls `attachSlider` to append the slider to the page's (first) `header` element, if there is one.
The slider controls the two colors present in the background – a simple two-color gradient with the midpoint color at 70% – and a selection of color variables used throughout the site's styling. Each of these variables has its own array of breakpoints, which are spaced evenly along the slider's length. (I considered adding bespoke positioning for the breakpoints, but I actually like it this way – the constraint makes choosing colors more interesting.) When the slider moves, we identify the breakpoints to the left and right of its position for each variable, then interpolate between those colors using [`Color.js`](https://colorjs.io/).
Text is a special case, because transitioning smoothly from dark to light text while the background transitions from light to dark would cause states where the text is grey-on-grey. Instead, we run the text color through an additional calculation that checks the intended color's contrast against the background and turns the text white if that would be better, effectively flipping the text from dark to white instantly at the most appropriate point.
### context
When I started this website in early 2024, I was about to move out of my much-loved apartment and into an uncertain future. Establishing this home base on the web – such as it is – was largely an effort to cultivate a stable sense of place during a time of transition and rootlessness.
My favorite things about that apartment were the access road behind the neighborhood which led to a small park – the only place I've been able to maintain a running habit – and the west-facing sliding glass doors in my office bedroom, both of which offered excellent views of the evening sky.
Winter and spring are the dry season in south Florida, and that sky was often preternaturally clear: a perfect gradient of glowing, searing color. I spent many, many evenings watching it fade from rose to dusk while I worked on this website, or went out to jog and think and say my silent goodbyes to home.