Force dark theme on the Gradio login page

js/global_scope_js.js

@@ -351,3 +351,25 @@ function handleMorphdomUpdate(data) {
     }
   });
 }
+
+// Wait for Gradio to finish setting its styles, then force dark theme
+const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes' &&
+            mutation.target.tagName === 'GRADIO-APP' &&
+            mutation.attributeName === 'style') {
+
+            // Gradio just set its styles, now force dark theme
+            document.body.classList.add('dark');
+
+            observer.disconnect();
+        }
+    });
+});
+
+// Start observing
+observer.observe(document.documentElement, {
+    attributes: true,
+    subtree: true,
+    attributeFilter: ['style']
+});

modules/block_requests.py

@@ -1,5 +1,6 @@
 import builtins
 import io
+import re
 
 import requests
 
@@ -62,6 +63,13 @@ def my_open(*args, **kwargs):
             '\n  </head>'
         )
 
+        file_contents = re.sub(
+            r'@media \(prefers-color-scheme: dark\) \{\s*body \{([^}]*)\}\s*\}',
+            r'body.dark {\1}',
+            file_contents,
+            flags=re.DOTALL
+        )
+
         if len(args) > 1 and args[1] == 'rb':
             file_contents = file_contents.encode('utf-8')
             return io.BytesIO(file_contents)