Fix: Night mode

ts/routes/reviewer-inner/index.ts

@@ -2,6 +2,7 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 import "../base.scss";
 import "../../reviewer/reviewer.scss";
+import { enableNightMode } from "../reviewer/reviewer";
 
 addEventListener("message", (e) => {
     switch (e.data.type) {
@@ -9,21 +10,6 @@ addEventListener("message", (e) => {
             document.body.innerHTML = e.data.value;
             break;
         }
-        case "nightMode": {
-            // This method currently "Flashbangs" the user if they have nightmode on and is a placeholder
-            // I will probably use #night-mode in the url.
-            const root = document.querySelector("html")!;
-            const nightMode = e.data.value;
-            if (e.data.value) {
-                root.classList.add("night-mode");
-            } else {
-                root.classList.remove("night-mode");
-            }
-            document.body.className = nightMode ? "nightMode card" : "card";
-            root.className = nightMode ? "night-mode" : "";
-            root.setAttribute("data-bs-theme", nightMode ? "dark" : "light");
-            break;
-        }
         default: {
             console.warn(`Unknown message type: ${e.data.type}`);
             break;
@@ -39,3 +25,10 @@ function pycmd(cmd: string) {
     window.parent.postMessage({ type: "pycmd", value: cmd }, "*");
 }
 globalThis.pycmd = pycmd;
+
+const params = new URLSearchParams(location.search);
+const theme = params.get("nightMode");
+if (theme !== null) {
+    enableNightMode();
+}
+document.documentElement.classList.add("card");

ts/routes/reviewer/+page.svelte

@@ -3,11 +3,15 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script>
-    import { ReviewerState } from "./reviewer";
+    import { onMount } from "svelte";
+    import { ReviewerState, updateNightMode } from "./reviewer";
     import ReviewerBottom from "./reviewer-bottom/ReviewerBottom.svelte";
     import Reviewer from "./Reviewer.svelte";
 
     const state = new ReviewerState();
+    onMount(() => {
+        updateNightMode();
+    });
 </script>
 
 <div>

ts/routes/reviewer/Reviewer.svelte

@@ -3,7 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import type { ReviewerState } from "./reviewer";
+    import { isNightMode, type ReviewerState } from "./reviewer";
 
     let iframe: HTMLIFrameElement;
     export let state: ReviewerState;
@@ -16,7 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <div id="qa">
     <iframe
-        src="/_anki/pages/reviewer-inner.html"
+        src={"/_anki/pages/reviewer-inner.html" + (isNightMode() ? "?nightMode" : "")}
         bind:this={iframe}
         title="card"
         frameborder="0"

ts/routes/reviewer/reviewer.ts

@@ -4,6 +4,25 @@ import { CardAnswer, type NextCardDataResponse_NextCardData } from "@generated/a
 import { nextCardData } from "@generated/backend";
 import { derived, get, writable } from "svelte/store";
 
+export function isNightMode() {
+    // https://stackoverflow.com/a/57795518
+    // This will be true in browsers if darkmode but also false in the reviewer if darkmode
+    // If in the reviewer then this will need to be set by the python instead
+    return (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches)
+        || document.documentElement.classList.contains("night-mode");
+}
+
+export function enableNightMode() {
+    document.documentElement.classList.add("night-mode");
+    document.documentElement.setAttribute("data-bs-theme", "dark");
+}
+
+export function updateNightMode() {
+    if (isNightMode()) {
+        enableNightMode();
+    }
+}
+
 export class ReviewerState {
     answerHtml = "";
     _cardData: NextCardDataResponse_NextCardData | undefined = undefined;
@@ -16,7 +35,6 @@ export class ReviewerState {
     iframe: HTMLIFrameElement | undefined = undefined;
 
     onReady() {
-        this.iframe?.contentWindow?.postMessage({ type: "nightMode", value: true }, "*");
         this.showQuestion(null);
     }