If you have a keen eye and visited my website multiple times, then you may have noticed that the theme of the website changes.
In fact, depending on the time of day, you may be seeing a totally different color. Not only that, it also changes depending on whether you're using dark mode or not.
Imagine a very long gradient that goes through several colors. Now imagine that one end if it is midnight, and the other is midnight of the next day. The midpoint represents midday, and all other hours the day are mapped to their respective fraction of the day. Here's what that gradient looks like: 1
The current UTC time is used to calculate this, so theoretically every person across the world should see the same color at any given moment.
First, this is my website and I thought it was cool :(
But more seriously, I think of the Web as a space. This space is independent from physical reality, but I like to borrow some of its characteristics for effect.
This gradient is sort of designed to sync to my local day-night cycle. I say "sort of" because it doesn't take seasons into account and other factors, but it's close enough. It's also tuned to be sort of correct for my timezone. So, in effect, whoever comes into my website can share that one little bit with me.
But to go back to my original point, it's just cool.
This entire website is actually implemented in Next.js. I did this because I liked the fast loading times I could get, and being able to occasionally do interactive things with little effort. Overall it has been a good developer experience for my very niche needs.
The color theme is implemented as a theme in
styled-components, a library that I have grown
to love (I barely write "real" CSS anymore). I wrote a function to spit out a
theme, which is simply fed into ThemeProvider.
Darkmode reverses the colors (and slightly tweaks them) and is implemented at
the CSS level via @media (perfers-color-theme: dark) which, surprisingly, is
widely supported.
As an added bonus, the site also sets the theme-color meta tag, which is used
by Android phones to set the browser's title, which is a really neat effect!
Technically speaking, the figure below actually shows an approximation. The color space I used to interpolate between the different colors is OKLab which CSS doesn't actually support at this time. Instead this page samples it a few times across the range and displays a linear gradient with the result. ↩