Spaces:

nvidia
/

nv-generate

Running on Zero

zephyrie Claude Opus 4.7 commited on 15 days ago

Commit

68d0499

1 Parent(s): 89c8f24

Fix light mode by collapsing the theme, not hacking the DOM

The previous fix forced Gradio's .dark class via a <head> script +
MutationObserver. That fought Gradio's SSR hydration and triggered a
remount loop: the hero cards (gr.HTML) never rendered and the page was
left with three dead buttons.

Root cause of the original bug: Gradio's _get_theme_css() emits every
token under both :root (light) and :root.dark (dark). Our UI is
dark-native, so light mode looked washed out.

Real fix: build the theme with gr.themes.Base(), then copy every *_dark
token value onto its light counterpart. Gradio's :root block then
carries dark colors and the app renders dark for every visitor -- pure
server-rendered CSS, no client-side script, nothing to break hydration.
Verified against gradio 6.14.0: 84 tokens collapsed, server serves
theme.css with dark values in :root, build_app() and launch() clean.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Files changed (1) hide show

app.py +26 -42

app.py CHANGED Viewed

@@ -1425,45 +1425,30 @@ footer { display: none !important; }
 """
-# The UI is dark-mode-native (navy "MAISI Console" aesthetic, no light variant).
-# Gradio drives light/dark by toggling a `.dark` class on the DOM; HF Spaces'
-# own theme switch can remove it. We pin the class on every plausible host
-# element and re-add it via MutationObserver whenever it's stripped, so the app
-# always renders dark regardless of OS preference or the HF theme toggle.
-_FORCE_DARK_BODY = """
-function force() {
-  document.documentElement.classList.add('dark');
-  if (document.body) document.body.classList.add('dark');
-  document.querySelectorAll('gradio-app').forEach(function (el) {
-    el.classList.add('dark');
-  });
-}
-force();
-new MutationObserver(force).observe(document.documentElement, {
-  attributes: true, attributeFilter: ['class']
-});
-function watchBody() {
-  force();
-  if (document.body) {
-    new MutationObserver(force).observe(document.body, {
-      attributes: true, attributeFilter: ['class']
-    });
-  }
-}
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', watchBody);
-} else {
-  watchBody();
-}
-"""
-FORCE_DARK_HEAD = (
-    '<meta name="color-scheme" content="dark">'
-    "<script>(function () {" + _FORCE_DARK_BODY + "})();</script>"
-)
-# Re-assert once more after the Gradio app finishes loading (belt-and-suspenders).
-FORCE_DARK_JS = "() => {" + _FORCE_DARK_BODY + "}"
 def build_app() -> gr.Blocks:
@@ -1499,7 +1484,6 @@ if __name__ == "__main__":
         server_port=int(os.environ.get("PORT", "7860")),
         show_error=True,
         css=CSS,
-        theme=gr.themes.Base(),
-        js=FORCE_DARK_JS,
-        head=FORCE_DARK_HEAD,
     )

 """
+# The UI is dark-mode-native (navy "MAISI Console" aesthetic) — there is no
+# light variant. Rather than fight Gradio's light/dark toggle at the DOM level
+# (DOM/observer hacks break SSR hydration), we collapse the theme itself:
+# Gradio's _get_theme_css() emits every token twice — under `:root` (light) and
+# `:root.dark` (dark). By copying each token's dark value onto its light
+# counterpart, `:root` carries dark colors too, so the app renders dark
+# regardless of OS preference or the HF Spaces theme switch. Pure CSS output —
+# nothing client-side to break.
+def _all_dark_theme() -> gr.themes.Base:
+    theme = gr.themes.Base()
+    for attr in list(theme.__dict__):
+        if attr.startswith("_") or not attr.endswith("_dark"):
+            continue
+        dark_val = theme.__dict__[attr]
+        if dark_val is None:  # None => dark inherits light; leave light as-is
+            continue
+        light_attr = attr[: -len("_dark")]
+        if light_attr in theme.__dict__:
+            theme.__dict__[light_attr] = dark_val
+    return theme
+# Keep the browser's native chrome (scrollbars, form controls) dark too.
+DARK_HEAD = '<meta name="color-scheme" content="dark">'
 def build_app() -> gr.Blocks:
         server_port=int(os.environ.get("PORT", "7860")),
         show_error=True,
         css=CSS,
+        theme=_all_dark_theme(),
+        head=DARK_HEAD,
     )