// Here you have to set your styles // ` allows you to use multiline styles const darkTheme = `body {background-color: black} muliLine::allowed {use: this}; `; const grayTheme = `body {background-color: gray}`; const lightTheme = `body {background-color: white}`; // Array of [theme, hourOfChanging] // e.g. now in 7-19 appends lightTheme, 19-23 — grayTheme, 23 till 7am — darkTheme const themes = [[lightTheme, 7], [grayTheme, 19], [darkTheme, 23]]; // Black magic. Do not touch themes.first = 0; themes.last = themes.length-1; themes.time = n => themes[n][1]; themes.text = n => themes[n][0]; const setStyle = style => document.head.appendChild(document.createElement('style')).textContent = style; const currentHour = new Date().getHours(); if (currentHour < themes.time(themes.first)) setStyle(themes.text(themes.last)); else { let style = themes.text(themes.first); for (let i=0; i= themes.time(i)) style = themes.text(i); setStyle(style); }