Seasonal.css

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

Use the slider to pick a day:

CSS variables:

You get:

• different theme colour every day of the year
• simple styles that aim to "do the right thing" out of the box
• CSS variables that you can use in your own rules

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.