Change CSS based on date

by akmiecik

HTML

<p id="demo"></p>

CSS

:root {
  --season: #FFD700;
  --season_contrast: #F51720;
  --season_calendar_header: #F51720;
  }
  #demo {
    background-color: var(--season);
    color: #ffffff;
  }

JavaScript

var today = new Date('05/28/2023');	
today.setHours(0,0,0,0);
var advent = new Date('11/27/2022');
advent.setHours(0,0,0,0);
var christmas = new Date('12/25/2022');
christmas.setHours(0,0,0,0);
var ordinary_1 = new Date('01/10/2023');
ordinary_1.setHours(0,0,0,0);
var ash_wednesday = new Date('02/22/2023');
ash_wednesday.setHours(0,0,0,0);
var triduum = new Date('04/06/2023');
triduum.setHours(0,0,0,0);
var easter = new Date('04/09/2023');
easter.setHours(0,0,0,0);
var pentecost = new Date('05/28/2023');
pentecost.setHours(0,0,0,0);
var ordinary_2 = new Date('05/29/2023');
ordinary_2.setHours(0,0,0,0);
var advent_next = new Date('12/03/2023');
advent_next.setHours(0,0,0,0);
//ORDINARY TIME IS THE ELSE AT BOTTOM
//ADVENT AND LENT
if (((today.valueOf() >= advent.valueOf()) && (today.valueOf() < christmas.valueOf())) || ((today.valueOf() >= ash_wednesday.valueOf()) && (today.valueOf() < triduum.valueOf()))) {
  document.body.style.setProperty('--season', '#3E0A4C');
  document.body.style.setProperty('--season_contrast', '#751390');
  document.body.style.setProperty('--season_calendar_header', '#2c0735');
   document.getElementById('demo').innerHTML = "advent";
}
//CHRISTMAS AND EASTER
else if (((today.valueOf() >= christmas.valueOf()) && (today.valueOf() < ordinary_1.valueOf())) || ((today.valueOf() >= easter.valueOf()) && (today.valueOf() < pentecost.valueOf())))  {
     document.body.style.setProperty('--season', '#FFD700');
     document.getElementById('demo').innerHTML = "Christmas AND EASTER";
}     
//TRIDUUM AND PENTECOST
else if (((today.valueOf() >= triduum.valueOf()) && (today.valueOf() < easter.valueOf())) || (today.valueOf() == pentecost.valueOf()))  {
    document.body.style.setProperty('--season', '#CC0000');
     document.getElementById('demo').innerHTML = "Triduum OR PENTECOST";
} else {
	document.body.style.setProperty('--season', '#004400');
  document.body.style.setProperty('--season_contrast', '#00ee00');
 ...