oobabooga/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2026-03-06 13:43:49 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Simplify dark theme handling using gradio fork's new dark_theme parameter

Browse source
This commit is contained in:
oobabooga 2026-03-03 18:41:47 -08:00
parent b3fd0d16e0
commit 866c48e55b
2 changed files with 3 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
js/global_scope_js.js
View file

@ -352,27 +352,6 @@ 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"]
});
//------------------------------------------------
// Suppress "Attempted to select a non-interactive or hidden tab" warning
//------------------------------------------------

24
server.py
View file

@ -157,7 +157,7 @@ def create_interface():
f'<script>{ui.global_scope_js}</script>',
])
with gr.Blocks(css=css, analytics_enabled=False, title=title, theme=ui.theme, head=head_html) as shared.gradio['interface']:
with gr.Blocks(css=css, analytics_enabled=False, title=title, theme=ui.theme, head=head_html, dark_theme=shared.settings['dark_theme']) as shared.gradio['interface']:
# Interface state
shared.gradio['interface_state'] = gr.State({k: None for k in shared.input_elements})
@ -209,26 +209,8 @@ def create_interface():
gradio('show_controls'),
None,
js=f"""(x) => {{
// Check if this is first visit or if localStorage is out of sync
const savedTheme = localStorage.getItem('theme');
const serverTheme = {str(shared.settings['dark_theme']).lower()} ? 'dark' : 'light';
// If no saved theme or mismatch with server on first load, use server setting
if (!savedTheme || !sessionStorage.getItem('theme_synced')) {{
localStorage.setItem('theme', serverTheme);
sessionStorage.setItem('theme_synced', 'true');
if (serverTheme === 'dark') {{
document.getElementsByTagName('body')[0].classList.add('dark');
}} else {{
document.getElementsByTagName('body')[0].classList.remove('dark');
}}
}} else {{
// Use localStorage for subsequent reloads
if (savedTheme === 'dark') {{
document.getElementsByTagName('body')[0].classList.add('dark');
}} else {{
document.getElementsByTagName('body')[0].classList.remove('dark');
}}
if (!localStorage.getItem('theme')) {{
localStorage.setItem('theme', {str(shared.settings['dark_theme']).lower()} ? 'dark' : 'light');
}}
{js}
{ui.show_controls_js}