oobabooga/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2025-12-06 07:12:10 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix light/dark theme persistence across page reloads

Browse source
This commit is contained in:
oobabooga 2025-06-08 15:04:05 -07:00
parent 78899244d5
commit eb0ab9db1d
2 changed files with 21 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
modules/ui_session.py
View file

@ -31,7 +31,7 @@ def create_ui():
shared.gradio['toggle_dark_mode'].click(
lambda x: 'dark' if x == 'light' else 'light', gradio('theme_state'), gradio('theme_state')).then(
None, None, None, js=f'() => {{{ui.dark_theme_js}; toggleDarkMode()}}')
None, None, None, js=f'() => {{{ui.dark_theme_js}; toggleDarkMode(); localStorage.setItem("theme", document.body.classList.contains("dark") ? "dark" : "light")}}')
# Reset interface event
shared.gradio['reset_interface'].click(

25
server.py
View file

@ -163,11 +163,26 @@ def create_interface():
gradio('show_controls'),
None,
js=f"""(x) => {{
if ({str(shared.settings['dark_theme']).lower()}) {{
document.getElementsByTagName('body')[0].classList.add('dark');
}}
else {{
document.getElementsByTagName('body')[0].classList.remove('dark');
// 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');
}}
}}
{js}
{ui.show_controls_js}