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!