☰

novelupdates auto darkmode

override theme selection on native browser darkmode change. Basic Idea from Reddit Auto Dark Mode

  1. // ==UserScript==
  2. // https://greasyfork.org/scripts/445361-novelupdates-auto-darkmode
  3. // @name         novelupdates auto darkmode
  4. // @namespace    somethingthatshouldnotclashwithotherscripts
  5. // @version      1.0
  6. // @description  override theme selection on native browser darkmode change. Basic Idea from Reddit Auto Dark Mode
  7. // @author       SZ
  8. // @match        www.novelupdates.com/*
  9. // @license      Apache-2.0
  10. // @supportURL   https://greasyfork.org/scripts/445361-novelupdates-auto-darkmode/feedback
  11. // @grant       GM_setValue
  12. // @grant       GM_getValue
  13. // ==/UserScript==
  14. /*jshint esversion: 6 */
  15.  
  16. let defaultDarkmodeIndex = 1;
  17. let isDarkModeActive = false;
  18. let darkModeTheme = defaultDarkmodeIndex;
  19. let standardTheme = 0;
  20. (function () {
  21. 	"use strict";
  22. 	const savedDarkModeValue = GM_getValue("darkModeTheme");
  23. 	const savedStandardModeValue = GM_getValue("standardTheme");
  24.  
  25. 	darkModeTheme = savedDarkModeValue ?? defaultDarkmodeIndex;
  26. 	standardTheme = savedStandardModeValue ?? standardTheme;
  27.  
  28. 	let selectField = document.getElementById("wi_themes");
  29. 	const setDarkMode = (isDarkMode) => {
  30. 		isDarkModeActive = isDarkMode;
  31. 		if (selectField) {
  32. 			//in case of wrong site (not working for forum theme toggle)
  33. 			//Admins of novelupdate forum could implement https://xenvn.com/threads/th-style-switch-xenforo-2.329/
  34. 			let currentStyleIndex = selectField.selectedIndex;
  35. 			let currentStyleName = document.getElementById("wi_themes").options[
  36. 				currentStyleIndex
  37. 			].value;
  38.  
  39. 			if (isDarkMode) {
  40. 				if (currentStyleIndex != darkModeTheme)
  41. 					selectField.selectedIndex = darkModeTheme;
  42. 			} else {
  43. 				if (currentStyleIndex != standardTheme)
  44. 					selectField.selectedIndex = standardTheme;
  45. 			}
  46.  
  47. 			selectField.dispatchEvent(new Event("change", { bubbles: true }));
  48. 		}
  49. 	};
  50.  
  51. 	const updateDarkMode = (e) => {
  52. 		setDarkMode(e.matches);
  53. 	};
  54. 	
  55. 	if (window.matchMedia) {
  56. 		// if the browser/os supports system-level color scheme
  57. 		const darkModeSetting = window.matchMedia("(prefers-color-scheme: dark)");
  58. 		setDarkMode(darkModeSetting.matches);
  59. 		darkModeSetting.addEventListener("change", updateDarkMode);
  60. 	} else {
  61. 		// otherwise use local time to decide
  62. 		let hour = new Date().getHours();
  63. 		setDarkMode(hour > 18 || hour < 8);
  64. 	}
  65.  
  66. 	const setSelectedTheme = (selectedIndex) => {
  67. 		let currentStyleIndex = selectField.selectedIndex;
  68. 		if (isDarkModeActive) {
  69. 			darkModeTheme = currentStyleIndex;
  70. 			GM_setValue("darkModeTheme", darkModeTheme);
  71. 		} else {
  72. 			standardTheme = currentStyleIndex;
  73. 			GM_setValue("standardTheme", standardTheme);
  74. 		}
  75. 	};
  76.  
  77. 	const changeSelectedTheme = (e) => {
  78. 		setSelectedTheme(e.matches);
  79. 	};
  80.  
  81. 	selectField?.addEventListener("change", changeSelectedTheme);
  82. 	window.removeEventListener("beforeunload", changeSelectedTheme);
  83. 	window.removeEventListener("beforeunload", updateDarkMode);
  84. })();