☰

novelupdates auto darkmode

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

// ==UserScript==
// https://greasyfork.org/scripts/445361-novelupdates-auto-darkmode
// @name         novelupdates auto darkmode
// @namespace    somethingthatshouldnotclashwithotherscripts
// @version      1.0
// @description  override theme selection on native browser darkmode change. Basic Idea from Reddit Auto Dark Mode
// @author       SZ
// @match        www.novelupdates.com/*
// @license      Apache-2.0
// @supportURL   https://greasyfork.org/scripts/445361-novelupdates-auto-darkmode/feedback
// @grant       GM_setValue
// @grant       GM_getValue
// ==/UserScript==
/*jshint esversion: 6 */

let defaultDarkmodeIndex = 1;
let isDarkModeActive = false;
let darkModeTheme = defaultDarkmodeIndex;
let standardTheme = 0;
(function () {
	"use strict";
	const savedDarkModeValue = GM_getValue("darkModeTheme");
	const savedStandardModeValue = GM_getValue("standardTheme");

	darkModeTheme = savedDarkModeValue ?? defaultDarkmodeIndex;
	standardTheme = savedStandardModeValue ?? standardTheme;

	let selectField = document.getElementById("wi_themes");
	const setDarkMode = (isDarkMode) => {
		isDarkModeActive = isDarkMode;
		if (selectField) {
			//in case of wrong site (not working for forum theme toggle)
			//Admins of novelupdate forum could implement https://xenvn.com/threads/th-style-switch-xenforo-2.329/
			let currentStyleIndex = selectField.selectedIndex;
			let currentStyleName = document.getElementById("wi_themes").options[
				currentStyleIndex
			].value;

			if (isDarkMode) {
				if (currentStyleIndex != darkModeTheme)
					selectField.selectedIndex = darkModeTheme;
			} else {
				if (currentStyleIndex != standardTheme)
					selectField.selectedIndex = standardTheme;
			}

			selectField.dispatchEvent(new Event("change", { bubbles: true }));
		}
	};

	const updateDarkMode = (e) => {
		setDarkMode(e.matches);
	};
	
	if (window.matchMedia) {
		// if the browser/os supports system-level color scheme
		const darkModeSetting = window.matchMedia("(prefers-color-scheme: dark)");
		setDarkMode(darkModeSetting.matches);
		darkModeSetting.addEventListener("change", updateDarkMode);
	} else {
		// otherwise use local time to decide
		let hour = new Date().getHours();
		setDarkMode(hour > 18 || hour < 8);
	}

	const setSelectedTheme = (selectedIndex) => {
		let currentStyleIndex = selectField.selectedIndex;
		if (isDarkModeActive) {
			darkModeTheme = currentStyleIndex;
			GM_setValue("darkModeTheme", darkModeTheme);
		} else {
			standardTheme = currentStyleIndex;
			GM_setValue("standardTheme", standardTheme);
		}
	};

	const changeSelectedTheme = (e) => {
		setSelectedTheme(e.matches);
	};

	selectField?.addEventListener("change", changeSelectedTheme);
	window.removeEventListener("beforeunload", changeSelectedTheme);
	window.removeEventListener("beforeunload", updateDarkMode);
})();