Changing a web page's style based on the time of the year

A fun gimmick that I decided to look into is changing a web page's style based on the current date of the year. Making a page look more frosty when its winter would make for a fun interactive feature that I think would appeal to most.

The solution to this simple gimmick was to use CSS custom properties / variables, which allows for different values to be stored and used throughout the CSS file. For a basic web page, variables for the background colour, text colour and a filter for the background image were created (since the filter property will affect all children elements, the background image has been put into a separate div under the 'body' tag with a special 'bg' ID). These variables can be referenced using 'var()'. Then for each unique page style I wanted, I created a new class that modifies the CSS custom properties.

CSS classes for the default (root) style and page styles.

Now all that's left is to implement some JavaScript that will determine which class to add to the body tag, or anywhere since the variables will be modified when the class is used anywhere within the HTML. All that is needed for the conditions of each even is simply comparing the current date's month to whichever month the event style should be active in, adding the corresponding style class to the body tag.

JavaScript of adding each unique style class (there is only one body tag in every web page, so we can get the first one from the 'getElementsByTagName' function's returned array).

It's a very simple concept that can be implemented in anything that uses CSS variables for its elements and classes. This working example can be seen in Web Design Portfolio and events taking place at different times can be looked at simply by changing your device's local time as the JavaScript will only run locally on your device.

Alternatively, I have added a dropdown menu at the top of the page containing all of the page styles I have implemented to look at how each one looks. This was created by adding a 'select' tag into the HTML, with 'option' tags as children that each had values that corresponded to each page style. In the JavaScript, an event listener is made to check for inputs from our specific select menu with the ID 'style'. All classes are removed from the 'body' tag and an efficient check is made for valid page styles from the select menu. This efficiency means that I will not have to come back to this listener in the future when I want to add more page styles linked to dates and events.

Input event listener with efficient value checks.

The JavaScript from earlier will need to be updated, changing the value of the style select menu when the web page first checks for each event.

Updating 'page style' select menu value in each initial event check.

This will not save, however, but that is another project that I would like to learn through caching the preferences on the local user's device.

Winter (December - February) example.

The source code for this small learning journey can be found at the GitHub repository that my web design portfolio is being hosted from, with the CSS and JS files being found under the '/main-assets' directory and the 'index.html' at the root directory!

Merry Christmas and happy New Year!