Seasonal themes

The application supports seasonal themes (summer, autumn, winter, spring) using CSS attribute-based styling.

• To activate a theme, there is a toggle-button in settings and the theme displayed depends on the season.

All seasonal theme selectors are defined in theme.css but only one theme is in use, to add css for other themes you write your css in these selectors:

[data-theme='summer'] {
}

[data-theme='autumn'] {
}

[data-theme='winter'] {
}

To add an image to the navbar for each theme, you need to edit the Navbar.js file. First, import the images for each theme, then assign them based on the current season in the switch-case.

Example import:

import spring from '../../assets/cherry-blossom.png';

Example case:

case 'spring':
    navbarImg.current.src = spring;
    navbarImg.current.style.display = 'block';
    break;

All seasonal themes are defined in MontlyThemes.js and can be modified. For example, a theme can be assigned to a specific day, such as Midsummer.

Example of returning spring from months:

const month = new Date().getMonth() + 1;
if (month >= 3 && month <= 5) {
	return 'spring';
}

Additins to MontlyThemes.js such as defining Midsummer requires:

• New switch cases in Navbar.js to set an image.
• New data-theme selector in theme.css.