From c09a367c6460a3fb5e44f2f5d4c24c34a7506715 Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Sat, 14 Mar 2026 14:01:34 -0700
Subject: [PATCH] UI: Fix dark theme using light theme syntax highlighting

---
 js/main.js | 6 ++++++
 server.py  | 4 ++++
 2 files changed, 10 insertions(+)

diff --git a/js/main.js b/js/main.js
index 5f79c3ec..394553d0 100644
--- a/js/main.js
+++ b/js/main.js
@@ -2,6 +2,12 @@
 // Main
 // ------------------------------------------------
 
+// Sync highlight.js theme with the actual Gradio theme
+var defined_hljs_css = document.body.classList.contains("dark") ? "file/css/highlightjs/github-dark.min.css" : "file/css/highlightjs/github.min.css";
+if (document.getElementById("highlight-css").getAttribute("href") !== defined_hljs_css) {
+  document.getElementById("highlight-css").setAttribute("href", defined_hljs_css);
+}
+
 let main_parent = document.getElementById("chat-tab").parentNode;
 let extensions = document.getElementById("extensions");
 
diff --git a/server.py b/server.py
index 340f7126..1aa9fc04 100644
--- a/server.py
+++ b/server.py
@@ -218,6 +218,10 @@ def create_interface():
 
         shared.gradio['interface'].load(partial(ui.apply_interface_values, {}, use_persistent=True), None, gradio(ui.list_interface_input_elements()), show_progress=False)
 
+        # Sync theme_state with the actual client-side theme so that
+        # autosave always writes the correct dark_theme value.
+        shared.gradio['interface'].load(None, None, gradio('theme_state'), js='() => document.body.classList.contains("dark") ? "dark" : "light"')
+
         extensions_module.create_extensions_tabs()  # Extensions tabs
         extensions_module.create_extensions_block()  # Extensions block