How to carry user choice for dark/light across all pages in an app

[brunnenhof]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

I am using the modularization example and added these 3 lines to the theme.py file:
    dark = ui.dark_mode()
        with ui.switch().bind_value(dark):
            ui.tooltip('Toggle light and dark').classes('bg-green text-xl')


from contextlib import contextmanager
from menu import menu
from nicegui import ui

@contextmanager
def frame(navigation_title: str):
    """Custom page frame to share the same styling and behavior across all pages"""
    ui.colors(primary='#6E93D6', secondary='#53B689', accent='#111B1E', positive='#53B689')
    dark = ui.dark_mode()
    with ui.header():
        ui.label('Modularization Example').classes('font-bold')
        ui.space()
        ui.label(navigation_title)
        ui.space()
        with ui.switch().bind_value(dark):
            ui.tooltip('Toggle light and dark').classes('bg-green text-xl')

        with ui.row():
            menu()
    with ui.column().classes('absolute-center items-center'):
        yield

Description

App works as per the modularization example.
In the header (in theme.py) I added a switch for the user to set light / dark mode. Works fine on the each individual page, but a choice on any page is not carried over to any other pages.
My hunch is that I need to store the choice in app.storage.user and then read that choice on each page load. However, I can't for the life of me figure out what to set, when and how to read it back in (on another page) and set the mode accordingly. Most likely, a testimony to my deep lack of understanding.

NiceGUI Version

3.2.0

Python Version

3.12

Browser

Firefox

Operating System

Windows

Additional Context

VSCode as my editor

[falkoschindler]

Hi @brunnenhof,

I'd recommend binding both ui.dark_mode and ui.switch against app.storage.user:

ui.dark_mode().bind_value(app.storage.user, 'dark_mode')
...
ui.switch('Dark Mode').bind_value(app.storage.user, 'dark_mode').props('color=white')

Note that I chose "color=white". Otherwise the color turns "primary" when activating the switch, so the switch would be invisible on the "primary"-colored header.

[brunnenhof]

Works perfect! Thanks - and thanks for the quick answer!