Seasonal.css

Seasonal.css supplies a seasonal colour scheme based on the day of the year.

Use the slider to pick a day:

<link rel="stylesheet" type="text/css" href="https://seasonal-css.incoherency.co.uk/seasonal.css">

CSS variables:

var(--seasonal-bg)
var(--seasonal-bgdark)
var(--seasonal-fg)
var(--seasonal-hl)
var(--seasonal-hldark)

You get:

Read the CSS to learn more: /seasonal.css.

Fetch the CSS with ?day=123 to request the theme for a specific day of the year, ranging from 0 to 365. This is useful to test how your page is going to look.

Fetch the CSS with ?varsonly=1 to get the CSS variables without any of the styles. This is useful if you want to use the Seasonal.css colour scheme but don't want the default styles.

Some times of year have better contrast ratios than others. The current values are the best compromise I have found between having a decent contrast ratio and not looking too muddy-brown, but I'm definitely interested in making improvements. If you wanted to have a go, the colours are configured in the keyframes array in seasonal.js.

Please contribute changes and bug reports on https://github.com/jes/seasonal-css.


Seasonal.css is created by James Stanley, taking inspiration from Rob Weychert.