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. There are different points along this line with different colors, that are then interpolated.
Basically this:
The current UTC time is used to calculate this, so 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 was popular
at the time, and that I loved at the time. I probably would not have done that
again. 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 (prefers-color-scheme: dark) which
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 bar color, which is a really neat effect!