Advertisement
AHOHNMYC

Changing styles by time

Jul 13th, 2019
228
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Here you have to set your styles
  2. // ` allows you to use multiline styles
  3. const darkTheme = `body {background-color: black}
  4. muliLine::allowed {use: this};
  5. `;
  6. const grayTheme = `body {background-color: gray}`;
  7. const lightTheme = `body {background-color: white}`;
  8.  
  9. // Array of [theme, hourOfChanging]
  10. // e.g. now in 7-19 appends lightTheme, 19-23 — grayTheme, 23 till 7am — darkTheme
  11. const themes = [[lightTheme, 7], [grayTheme, 19], [darkTheme, 23]];
  12.  
  13. // Black magic. Do not touch
  14. themes.first = 0;
  15. themes.last = themes.length-1;
  16. themes.time = n => themes[n][1];
  17. themes.text = n => themes[n][0];
  18.  
  19. const setStyle = style => document.head.appendChild(document.createElement('style')).textContent = style;
  20. const currentHour = new Date().getHours();
  21. if (currentHour < themes.time(themes.first))
  22.     setStyle(themes.text(themes.last));
  23. else {
  24.     let style = themes.text(themes.first);
  25.     for (let i=0; i<themes.length; i++)
  26.         if (currentHour >= themes.time(i))
  27.             style = themes.text(i);
  28.     setStyle(style);
  29. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement