From df964423daae9c6e0fa8b317ea8ff2d9da36c645 Mon Sep 17 00:00:00 2001
From: Ling Zheng <zheng980@purdue.edu>
Date: Wed, 5 Nov 2025 14:30:38 -0500
Subject: [PATCH] cooked

---
 content/content.js | 29 +++++++++++++++++++++++++++++
 content/styles.css |  4 ++++
 2 files changed, 33 insertions(+)

diff --git a/content/content.js b/content/content.js
index 2bd2c1e..a076dda 100644
--- a/content/content.js
+++ b/content/content.js
@@ -3,11 +3,40 @@
 (function() {
     'use strict';
 
+    // Apply color mode immediately (before DOM is ready) to prevent flash of unstyled content
+    // This ensures CSS variables are set before the page renders
+    function applyColorModeEarly() {
+        try {
+            let storedMode = localStorage.getItem("styles")
+            if (!storedMode || storedMode === "auto") {
+                // Auto mode - use system preference
+                let mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? "darkMode" : "lightMode"
+                // Don't add class yet, let setColorMode handle it properly
+                colorScheme = mode
+            } else {
+                colorScheme = storedMode
+                // Apply class immediately if not auto
+                if (storedMode === "darkMode" || storedMode === "lightMode") {
+                    document.documentElement.classList.add(storedMode)
+                }
+            }
+        } catch (e) {
+            // If localStorage fails, use auto mode
+            let mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? "darkMode" : "lightMode"
+            colorScheme = mode
+        }
+    }
+
+    // Apply color mode as early as possible
+    applyColorModeEarly()
+
     // Initialize the extension
     async function init() {
         await changeTitle()
         settings("apply")
+        setCssFilters()  // Set CSS filters after settings are applied (matches original userscript order)
         parseTicket()
+        parseOtherElements()  // Call parseOtherElements to inject styles into shadow DOMs (matches original)
         checkPath()
     }
     
diff --git a/content/styles.css b/content/styles.css
index d4c1a99..f84298b 100644
--- a/content/styles.css
+++ b/content/styles.css
@@ -1798,6 +1798,10 @@ box-shadow: 0 8px 16px var(--shadow-1),0 24px 38px var(--shadow-2) !important;
 background-color: var(--bg-0) !important;
 }
 
+#divHeader {
+background-color: var(--col-100) !important;
+}
+
 .tdx-right-side-panel__drag-border {
 background: linear-gradient(var(--col-400),var(--col-400)) no-repeat left/1px 10% !important;
 }