Spaces:

build-small-hackathon
/

lolaby

Running

App Files Files Community

Apply theme synchronously before first paint

by volivers - opened about 1 month ago

base: refs/heads/main

←

from: refs/pr/9

Discussion Files changed

+70

-9

Files changed (1) hide show

app.py +70 -9

app.py CHANGED Viewed

@@ -2383,6 +2383,46 @@ ATTRIBUTION_HTML = """
 """
 # JS injected once; the buttons call pickInstrument() which writes the chosen
 # value into the hidden Gradio textbox for that group and triggers its change.
 SELECTION_JS = """
@@ -2393,6 +2433,11 @@ SELECTION_JS = """
         document.body.classList.toggle('dark', dark);
         const container = document.querySelector('.gradio-container');
         if (container) container.classList.toggle('dark', dark);
     }
     function toggleDark() {
@@ -2409,14 +2454,22 @@ SELECTION_JS = """
     window._lolaby_applyTheme = applyTheme;
     window._lolaby_toggleDark = toggleDark;
-    window.addEventListener('load', function() {
-        const url = new URL(window.location);
-        const isBrowserDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
-        const noTheme = !url.searchParams.has('__theme');
-        const isDark = noTheme ? isBrowserDark : url.searchParams.get('__theme') === 'dark';
         applyTheme(isDark);
-    });
 })();
 // Ordered multi-select picker. Up to 2 instruments.
@@ -2590,8 +2643,16 @@ function flashComboHint() {
 """
 with gr.Blocks(css_paths="style.css", title="Lolaby", theme=gr.themes.Citrus(),
-                head=f"<script>{SELECTION_JS}</script>") as demo:
     gr.HTML("""
     <div style="text-align:right; padding: 12px 18px 0;">
     <label class="dark-toggle-label">
@@ -3051,7 +3112,7 @@ gr.mount_gradio_app(
     path="/",
     theme=gr.themes.Citrus(),
     css_paths="style.css",
-    head=f"<script>{SELECTION_JS}</script>",
 )

 """
+# ---------------------------------------------------------------------------
+# EARLY_THEME_JS — must run as the FIRST thing in <head>, synchronously,
+# before any CSS/markup is painted.
+#
+# Why: the old approach decided light vs. dark inside a
+# `window.addEventListener('load', ...)` handler. `load` fires only after
+# the ENTIRE page (styles, fonts, the whole Gradio bundle) has finished
+# loading — by which point the page has already been painted once in the
+# default (light) theme. For anyone whose browser/OS prefers dark mode (or
+# who has `?__theme=dark` in the URL), every reload showed a flash of the
+# light theme that then snapped/animated to dark — the reported "flicker".
+#
+# Fix: read the theme preference (URL param > OS preference) and add the
+# `.dark` class to <html> immediately, in a blocking inline script placed
+# before any stylesheet. Since all theme tokens live on `:root`/`.dark`
+# (style.css), this means the very first paint already has the correct
+# variables — there's nothing to flip after the fact, so no flash and no
+# transition to animate.
+# ---------------------------------------------------------------------------
+EARLY_THEME_JS = """
+(function() {
+    try {
+        var url = new URL(window.location.href);
+        var isDark;
+        if (url.searchParams.has('__theme')) {
+            isDark = url.searchParams.get('__theme') === 'dark';
+        } else {
+            isDark = !!(window.matchMedia &&
+                         window.matchMedia('(prefers-color-scheme: dark)').matches);
+        }
+        if (isDark) {
+            document.documentElement.classList.add('dark');
+        }
+    } catch (e) {
+        // If anything above throws (e.g. matchMedia unavailable), just fall
+        // back to the light-mode default rather than breaking the page.
+    }
+})();
+"""
 # JS injected once; the buttons call pickInstrument() which writes the chosen
 # value into the hidden Gradio textbox for that group and triggers its change.
 SELECTION_JS = """
         document.body.classList.toggle('dark', dark);
         const container = document.querySelector('.gradio-container');
         if (container) container.classList.toggle('dark', dark);
+        // Keep the visible toggle switch in sync with the active theme —
+        // without this, a theme applied via EARLY_THEME_JS (system
+        // preference or ?__theme=dark) left the switch showing "off".
+        const toggleBtn = document.getElementById('dark-toggle-btn');
+        if (toggleBtn) toggleBtn.checked = dark;
     }
     function toggleDark() {
     window._lolaby_applyTheme = applyTheme;
     window._lolaby_toggleDark = toggleDark;
+    // EARLY_THEME_JS already set the `.dark` class on <html> (synchronously,
+    // before first paint) if needed. Here we just propagate that class to
+    // <body>/.gradio-container and sync the toggle switch — and we do it on
+    // DOMContentLoaded (as soon as the DOM exists) rather than `load` (which
+    // waits for every image/font/asset), so there's no extra delay where the
+    // body/container could render with mismatched classes.
+    function syncThemeClasses() {
+        const isDark = document.documentElement.classList.contains('dark');
         applyTheme(isDark);
+    }
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', syncThemeClasses);
+    } else {
+        syncThemeClasses();
+    }
 })();
 // Ordered multi-select picker. Up to 2 instruments.
 """
+# EARLY_THEME_JS comes FIRST (before css_paths/style.css is linked in the
+# head) so the .dark class is set before any themed CSS rule is evaluated —
+# that's what eliminates the light->dark flash on reload. SELECTION_JS comes
+# after; it's fine for it to load alongside/after stylesheets since it only
+# touches non-paint-critical bookkeeping (button wiring, class sync, etc.).
+HEAD_HTML = f"<script>{EARLY_THEME_JS}</script><script>{SELECTION_JS}</script>"
 with gr.Blocks(css_paths="style.css", title="Lolaby", theme=gr.themes.Citrus(),
+                head=HEAD_HTML) as demo:
     gr.HTML("""
     <div style="text-align:right; padding: 12px 18px 0;">
     <label class="dark-toggle-label">
     path="/",
     theme=gr.themes.Citrus(),
     css_paths="style.css",
+    head=HEAD_HTML,
 )