dark-light-theme.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. function darkMode(remember) {
  2. // Set the theme to dark and optionally remember the preference.
  3. document.body.classList.remove("light");
  4. document.body.classList.add("dark");
  5. if (remember) {
  6. console.log("Saving theme preference as dark.");
  7. window.localStorage.setItem("theme-preference", "dark");
  8. }
  9. }
  10. function lightMode(remember) {
  11. // Set the theme to light and optionally remember the preference.
  12. document.body.classList.remove("dark");
  13. document.body.classList.add("light");
  14. if (remember) {
  15. console.log("Saving theme preference as light.");
  16. window.localStorage.setItem("theme-preference", "light");
  17. }
  18. }
  19. function setThemeFromHour() {
  20. // If the user has set no preference, do some rudimentary switching based on
  21. // hour of the day.
  22. var hour = new Date().getHours();
  23. var noPreference = window.matchMedia("(prefers-color-scheme:no-preference)")
  24. .matches;
  25. if (noPreference) {
  26. console.log("Setting theme based on hour.");
  27. if (hour > 18 && hour < 7) {
  28. darkMode();
  29. } else {
  30. lightMode();
  31. }
  32. } else {
  33. console.log("Setting theme based system preference.");
  34. }
  35. }
  36. // If the user has previously set either way, restore that.
  37. var preference = window.localStorage.getItem("theme-preference");
  38. switch (preference) {
  39. case "dark":
  40. console.log("Setting theme to dark based on user preference.");
  41. darkMode();
  42. break;
  43. case "light":
  44. console.log("Setting theme to light based on user preference.");
  45. lightMode();
  46. break;
  47. default:
  48. setThemeFromHour();
  49. }