Check this please~

src/runtime/helper.ts

@@ -0,0 +1,44 @@
+// prettier-ignore
+export function isKeyDownDarkMode(e: KeyboardEvent) {
+	const ok = (
+		!e.ctrlKey &&
+		!e.altKey &&
+		(e.key.toLowerCase() === "`" || e.keyCode === 192)
+	)
+	return ok
+}
+
+// prettier-ignore
+export function isKeyDownDebugMode(e: KeyboardEvent) {
+	const ok = (
+		e.ctrlKey &&
+		!e.altKey &&
+		(e.key.toLowerCase() === "`" || e.keyCode === 192)
+	)
+	return ok
+}
+
+// prettier-ignore
+export function parseDurationMs(durStr : any){
+	let [numStr, unit] = durStr.trim().split(/(ms|s|m)$/);
+	if(!numStr){
+		throw new Error(`parseDurationMs: expected \`ms\`, \`s\`, or \`m\`; durStr=${durStr}`)
+	}
+
+	let n = +numStr;
+  switch (unit) {
+    case 'ms':
+      // No-op
+      break;
+    case 's':
+      n *= 1000;
+      break;
+    case 'm':
+      n *= 1000 * 60;
+      break;
+    default:
+      // No-op
+      break;
+  }
+  return n;
+}

src/runtime/runtime.ts

@@ -1,3 +1,5 @@
+import * as helper from './helper'
+
 declare global {
 	interface Window {
 		Duomo: Runtime
@@ -45,25 +47,6 @@ function matchMediaPreference() {
 	return value
 }
 
-// prettier-ignore
-function isKeyDownDarkMode(e: KeyboardEvent) {
-	const ok = (
-		!e.ctrlKey &&
-		!e.altKey &&
-		(e.key.toLowerCase() === "`" || e.keyCode === 192)
-	)
-	return ok
-}
-
-// prettier-ignore
-function isKeyDownDebugMode(e: KeyboardEvent) {
-	const ok = (
-		e.ctrlKey &&
-		!e.altKey &&
-		(e.key.toLowerCase() === "`" || e.keyCode === 192)
-	)
-	return ok
-}
 
 class Duomo implements Runtime {
 	static localStorageKey = "duomo-theme-preference"
@@ -77,6 +60,7 @@ class Duomo implements Runtime {
 	// Tracks whether dark mode was set once; for FOUC.
 	// FOUC: Flash Of Unstyled Content.
 	#didInitDarkMode: boolean = false
+	#shouldNoOpDarkMode: boolean = false
 
 	#deferrers: (() => void)[] = []
 
@@ -115,14 +99,14 @@ class Duomo implements Runtime {
 		// `keydown` handlers.
 		if (env === "development") {
 			const handleDarkMode = (e: KeyboardEvent) => {
-				if (isKeyDownDarkMode(e)) {
+				if (helper.isKeyDownDarkMode(e)) {
 					this.toggleDarkMode()
 				}
 			}
 			document.addEventListener("keydown", handleDarkMode)
 			this.#deferrers.push(() => document.removeEventListener("keydown", handleDarkMode))
 			const handleDebugMode = (e: KeyboardEvent) => {
-				if (isKeyDownDebugMode(e)) {
+				if (helper.isKeyDownDebugMode(e)) {
 					this.toggleDebugMode()
 				}
 			}
@@ -144,7 +128,10 @@ class Duomo implements Runtime {
 		return this.#darkMode
 	}
 	setDarkMode(mode: boolean) {
+		if (this.#shouldNoOpDarkMode) return;
 		this.#darkMode = mode
+
+		const durValue = getComputedStyle(document.documentElement).getPropertyValue('--default-theme-transition-duration');
 
 		const toggle = (mode: boolean) => {
 			const action = !mode
@@ -160,12 +147,14 @@ class Duomo implements Runtime {
 			this.#didInitDarkMode = true
 			return
 		} else {
+			this.#shouldNoOpDarkMode = true
 			this.#html!.setAttribute("data-theme-effect", "true")
 			setTimeout(() => {
 				toggle(mode)
 				setTimeout(() => {
 					this.#html!.removeAttribute("data-theme-effect")
-				}, 300)
+					this.#shouldNoOpDarkMode = false
+				}, helper.parseDurationMs(durValue))
 			}, 25)
 		}
 	}