My website has been gaslighting you
I have a confession to make. You probably sensed it, but weren’t able to articulate what was happening. Your loved ones think you’re losing your grasp on reality. For the last six months I’ve been incrementally changing the color scheme on my website every single day. I boiled you like a frog! Mu-wa-ha-ha. Don’t believe me? Try for yourself…
At the center of this CSS-trick is setting a --hue variable and rotating the hue about 1deg each day to make it 360º around the color wheel over the year. Because I like blue, I set the default --hue to 196 and add the current day’s --hue-rotate value to calculate my final --rotated-hue value.
The math for the --hue-rotate isn’t that complex, but since CSS doesn’t have a Date() function, I set the initial --hue-rotate value inside my Liquid template when I generate the site with Jekyll.
The next bit of magic was to use a slightly more complicated calc() function for the saturation value. Using some of the new CSS math functions, I take the cos() of the --rotated-hue to get a value between 1 and -1, then multiply that by 45% which is my “base saturation” for my light mode theme. That gives me a value between -45% and +45%, so I double it and add another 45% to avoid the gray zone of negative saturation.
