force light mode

gradio-web/main.py

@@ -145,7 +145,9 @@ def main():
         debug=True,
         show_error=True,
         quiet=False,
+        theme=getattr(demo, "theme", None),
         css=CSS,
+        head=getattr(demo, "head", None),
     )
 
 

gradio-web/test/test_main_launch_config.py

@@ -7,6 +7,8 @@ import types
 class _FakeDemo:
     def __init__(self):
         self.launch_kwargs = None
+        self.theme = "default"
+        self.head = "<script>window.__robommeForceLightTheme=()=>{};</script>"
 
     def launch(self, **kwargs):
         self.launch_kwargs = kwargs
@@ -36,4 +38,6 @@ def test_main_launch_passes_ui_css(monkeypatch, reload_module):
     assert fake_demo.launch_kwargs is not None
     assert fake_demo.launch_kwargs["server_name"] == "0.0.0.0"
     assert fake_demo.launch_kwargs["server_port"] == 7861
+    assert fake_demo.launch_kwargs["theme"] == fake_demo.theme
     assert fake_demo.launch_kwargs["css"] == fake_ui_layout.CSS
+    assert fake_demo.launch_kwargs["head"] == fake_demo.head

gradio-web/test/test_ui_native_layout_contract.py

@@ -45,6 +45,25 @@ def test_native_ui_css_excludes_header_title_from_global_font_size(reload_module
     assert "font-size: var(--text-xxl) !important;" in ui_layout.CSS
 
 
+def test_native_ui_forces_light_theme_and_uses_light_overlay_baseline(reload_module):
+    ui_layout = reload_module("ui_layout")
+
+    css = ui_layout.CSS
+
+    assert "color-scheme: light !important;" in css
+    assert "background: rgba(255, 255, 255, 0.92) !important;" in css
+    assert "color: var(--body-text-color) !important;" in css
+    assert "body.dark," not in css
+    assert ".dark," not in css
+    assert ":root.dark" not in css
+    assert "rgba(15, 23, 42, 0.92)" not in css
+
+    assert "window.__robommeForceLightTheme = applyLightTheme;" in ui_layout.THEME_LOCK_HEAD
+    assert 'store.setItem("gradio-theme", "light");' in ui_layout.THEME_LOCK_HEAD
+    assert 'node.classList.remove("dark");' in ui_layout.THEME_LOCK_HEAD
+    assert "window.__robommeForceLightTheme();" in ui_layout.THEME_LOCK_JS
+
+
 def test_native_ui_css_highlights_media_card_not_live_obs_transform(reload_module):
     ui_layout = reload_module("ui_layout")
 
@@ -84,6 +103,8 @@ def test_native_ui_config_contains_phase_machine_and_precheck_chain(reload_modul
 
     try:
         cfg = demo.get_config_file()
+        assert cfg.get("theme") == "default"
+        assert cfg.get("head") == ui_layout.THEME_LOCK_HEAD
 
         elem_ids = {
             comp.get("props", {}).get("elem_id")

gradio-web/test/test_ui_phase_machine_runtime_e2e.py

@@ -284,6 +284,36 @@ def _read_font_probe_snapshot(page) -> dict[str, str | None]:
     )
 
 
+def _read_theme_snapshot(page) -> dict[str, str | bool | None]:
+    return page.evaluate(
+        """() => {
+            const html = document.documentElement;
+            const body = document.body;
+            const overlay = document.getElementById('loading_overlay_group');
+            const readStore = (store, key) => {
+                try {
+                    return store.getItem(key);
+                } catch (error) {
+                    return null;
+                }
+            };
+            return {
+                htmlHasDark: html ? html.classList.contains('dark') : null,
+                bodyHasDark: body ? body.classList.contains('dark') : null,
+                htmlTheme: html ? html.dataset.theme || null : null,
+                bodyTheme: body ? body.dataset.theme || null : null,
+                htmlInlineColorScheme: html ? html.style.colorScheme || null : null,
+                bodyInlineColorScheme: body ? body.style.colorScheme || null : null,
+                htmlColorScheme: html ? getComputedStyle(html).colorScheme : null,
+                bodyColorScheme: body ? getComputedStyle(body).colorScheme : null,
+                overlayBackground: overlay ? getComputedStyle(overlay).backgroundColor : null,
+                storedTheme: readStore(window.localStorage, 'theme'),
+                storedGradioTheme: readStore(window.localStorage, 'gradio-theme'),
+            };
+        }"""
+    )
+
+
 @pytest.fixture
 def font_size_probe_ui_url(monkeypatch):
     config_module = importlib.reload(importlib.import_module("config"))
@@ -589,6 +619,129 @@ def test_global_font_size_applies_except_header_title(font_size_probe_ui_url):
         browser.close()
 
 
+def test_create_ui_blocks_stays_light_under_dark_system_preference(monkeypatch):
+    ui_layout = importlib.reload(importlib.import_module("ui_layout"))
+
+    fake_obs = np.zeros((24, 24, 3), dtype=np.uint8)
+    fake_obs_img = Image.fromarray(fake_obs)
+
+    def fake_init_app(_request):
+        return (
+            "uid-1",
+            gr.update(visible=True),
+            fake_obs_img,
+            "ready",
+            gr.update(choices=[("pick", 0)], value=None),
+            "goal",
+            "No need for coordinates",
+            gr.update(value=None, visible=False),
+            gr.update(visible=False, interactive=False),
+            "PickXtimes (Episode 1)",
+            "Completed: 0",
+            gr.update(interactive=True),
+            gr.update(interactive=True),
+            gr.update(interactive=True),
+            gr.update(visible=False),
+            gr.update(visible=True),
+            gr.update(visible=True),
+            gr.update(value="hint"),
+            gr.update(visible=False),
+            gr.update(interactive=True),
+        )
+
+    monkeypatch.setattr(ui_layout, "init_app", fake_init_app)
+
+    demo = ui_layout.create_ui_blocks()
+    port = _free_port()
+    _app, root_url, _share_url = demo.launch(
+        server_name="127.0.0.1",
+        server_port=port,
+        prevent_thread_lock=True,
+        quiet=True,
+        show_error=True,
+        ssr_mode=False,
+        theme=ui_layout.APP_THEME,
+        css=ui_layout.CSS,
+        head=ui_layout.THEME_LOCK_HEAD,
+    )
+    _wait_http_ready(root_url)
+
+    try:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(headless=True)
+            context = browser.new_context(
+                viewport={"width": 1280, "height": 900},
+                color_scheme="dark",
+            )
+            context.add_init_script(
+                """
+                window.localStorage.setItem('theme', 'dark');
+                window.localStorage.setItem('gradio-theme', 'dark');
+                """
+            )
+            page = context.new_page()
+            page.goto(root_url, wait_until="domcontentloaded")
+
+            page.wait_for_function(
+                """() => {
+                    const html = document.documentElement;
+                    const body = document.body;
+                    if (!html || !body) return false;
+                    return (
+                        typeof window.__robommeForceLightTheme === 'function' &&
+                        !html.classList.contains('dark') &&
+                        !body.classList.contains('dark') &&
+                        html.dataset.theme === 'light' &&
+                        body.dataset.theme === 'light' &&
+                        html.style.colorScheme === 'light' &&
+                        body.style.colorScheme === 'light'
+                    );
+                }""",
+                timeout=15000,
+            )
+
+            snapshot = _read_theme_snapshot(page)
+            assert snapshot["htmlHasDark"] is False
+            assert snapshot["bodyHasDark"] is False
+            assert snapshot["htmlTheme"] == "light"
+            assert snapshot["bodyTheme"] == "light"
+            assert snapshot["htmlInlineColorScheme"] == "light"
+            assert snapshot["bodyInlineColorScheme"] == "light"
+            assert snapshot["storedTheme"] == "light"
+            assert snapshot["storedGradioTheme"] == "light"
+
+            page.reload(wait_until="domcontentloaded")
+            page.wait_for_function(
+                """() => {
+                    const html = document.documentElement;
+                    const body = document.body;
+                    return (
+                        !!html &&
+                        !!body &&
+                        typeof window.__robommeForceLightTheme === 'function' &&
+                        !html.classList.contains('dark') &&
+                        !body.classList.contains('dark') &&
+                        html.dataset.theme === 'light' &&
+                        body.dataset.theme === 'light'
+                    );
+                }""",
+                timeout=15000,
+            )
+
+            reloaded_snapshot = _read_theme_snapshot(page)
+            assert reloaded_snapshot["htmlHasDark"] is False
+            assert reloaded_snapshot["bodyHasDark"] is False
+            assert reloaded_snapshot["htmlInlineColorScheme"] == "light"
+            assert reloaded_snapshot["bodyInlineColorScheme"] == "light"
+            assert reloaded_snapshot["storedTheme"] == "light"
+            assert reloaded_snapshot["storedGradioTheme"] == "light"
+
+            context.close()
+            browser.close()
+    finally:
+        demo.close()
+
+
 def test_phase_machine_runtime_flow_and_execute_precheck(phase_machine_ui_url):
     root_url, state = phase_machine_ui_url
 

gradio-web/ui_layout.py

@@ -44,6 +44,8 @@ PHASE_DEMO_VIDEO = "demo_video"
 PHASE_ACTION_KEYPOINT = "action_keypoint"
 PHASE_EXECUTION_PLAYBACK = "execution_playback"
 
+APP_THEME = gr.themes.Default()
+
 
 # Deprecated: no legacy runtime JS logic in native Gradio mode.
 SYNC_JS = ""
@@ -234,6 +236,97 @@ LIVE_OBS_CLIENT_RESIZE_JS = r"""
 """
 
 
+THEME_LOCK_HEAD = r"""
+<script>
+(() => {
+    const applyLightTheme = () => {
+        const normalizeThemeState = (store) => {
+            try {
+                store.setItem("theme", "light");
+                store.setItem("color-scheme", "light");
+                store.setItem("gradio-theme", "light");
+                for (const key of Object.keys(store)) {
+                    if (!/theme|color-scheme/i.test(key)) {
+                        continue;
+                    }
+                    const value = store.getItem(key);
+                    if (typeof value === "string" && /dark/i.test(value)) {
+                        store.setItem(key, value.replace(/dark/gi, "light"));
+                    }
+                }
+            } catch (error) {
+                console.debug("Failed to normalize theme state", error);
+            }
+        };
+        const normalizeNode = (node) => {
+            if (!node) {
+                return;
+            }
+            if (node.classList.contains("dark")) {
+                node.classList.remove("dark");
+            }
+            if (node.dataset.theme !== "light") {
+                node.dataset.theme = "light";
+            }
+            if (node.getAttribute("data-color-scheme") !== "light") {
+                node.setAttribute("data-color-scheme", "light");
+            }
+            if (node.style.colorScheme !== "light") {
+                node.style.colorScheme = "light";
+            }
+        };
+
+        normalizeThemeState(window.localStorage);
+        normalizeThemeState(window.sessionStorage);
+        normalizeNode(document.documentElement);
+        normalizeNode(document.body);
+    };
+
+    applyLightTheme();
+    window.__robommeForceLightTheme = applyLightTheme;
+
+    if (window.__robommeThemeLockInstalled) {
+        return;
+    }
+
+    const observer = new MutationObserver(() => applyLightTheme());
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["class", "data-theme", "style"],
+    });
+
+    const attachBodyObserver = () => {
+        if (!document.body || document.body.dataset.robommeThemeObserved === "1") {
+            return;
+        }
+        document.body.dataset.robommeThemeObserved = "1";
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ["class", "data-theme", "style"],
+        });
+    };
+
+    attachBodyObserver();
+    document.addEventListener("DOMContentLoaded", attachBodyObserver, { once: true });
+    window.addEventListener("load", applyLightTheme, { once: true });
+    window.setTimeout(applyLightTheme, 0);
+    window.setTimeout(applyLightTheme, 100);
+    window.__robommeThemeLockInstalled = true;
+})();
+</script>
+"""
+
+
+THEME_LOCK_JS = r"""
+() => {
+    if (typeof window.__robommeForceLightTheme === "function") {
+        window.__robommeForceLightTheme();
+        window.setTimeout(window.__robommeForceLightTheme, 0);
+    }
+}
+"""
+
+
 CSS = f"""
 :root {{
     --body-text-size: {UI_GLOBAL_FONT_SIZE} !important;
@@ -248,6 +341,7 @@ CSS = f"""
     --button-small-text-size: {UI_GLOBAL_FONT_SIZE} !important;
     --section-header-text-size: {UI_GLOBAL_FONT_SIZE} !important;
     --text-md: {UI_GLOBAL_FONT_SIZE} !important;
+    color-scheme: light !important;
 }}
 
 .native-card {{
@@ -262,6 +356,7 @@ CSS = f"""
     inset: 0 !important;
     z-index: 9999 !important;
     background: rgba(255, 255, 255, 0.92) !important;
+    color: var(--body-text-color) !important;
     text-align: center !important;
 }}
 
@@ -461,6 +556,8 @@ def create_ui_blocks():
 
     with gr.Blocks(title="Oracle Planner Interface") as demo:
         demo.css = CSS
+        demo.theme = APP_THEME
+        demo.head = THEME_LOCK_HEAD
 
         gr.Markdown("## RoboMME Interactive Demo 🚀🚀🚀", elem_id="header_title")
         with gr.Row():
@@ -898,6 +995,12 @@ def create_ui_blocks():
             show_progress="hidden",
         )
 
+        demo.load(
+            fn=None,
+            js=THEME_LOCK_JS,
+            queue=False,
+        )
+
         demo.load(
             fn=None,
             js=LIVE_OBS_CLIENT_RESIZE_JS,