how to add different logo image depending on dark/light mode?

shiny
1

The following example app create a page_navbar with a dark/light mode switch.

I'd like to ask how to load different logo image in front of the title depending on the display mode selected, e.g. for dark model use a logo with black backgroupd, and for light mode load the logo with a white background.

app.py

from shiny import App, ui
from pathlib import Path

app_ui = ui.page_navbar(  
    ui.nav_panel("A", "Page A content"),  
    ui.nav_panel("B", "Page B content"),  
    ui.nav_panel("C", "Page C content"),  
    ui.nav_control(ui.input_dark_mode(id='mode')),
    title = ui.div(
        ui.tags.img(
            src='asset/sample_logo.png',
            height='40px',
            style='margin-right: 10px;',
        ),
        'App with Navbar & Logo',
    ),
    id="page",  
)  


def server(input, output, session):
    pass

app_dir = Path(__file__).parent
app = App(app_ui, server, static_assets=app_dir / 'www')

Currently the logo image file "logo.png" is stored at the "www/asset/" folder in the root directory of the app. (Reference: Serve local files)

Screenshot 2025-02-28 at 5.07.57 PM
Screenshot 2025-02-28 at 5.07.57 PM3144×1518 434 KB

1 Like
2

You can have two logos and only show one at a time based on the current value for your light/dark mode toggle. Using a conditional panel means this is handled client-side using JavaScript.

from shiny import App, ui
from pathlib import Path

app_ui = ui.page_navbar(
    ui.nav_panel("A", "Page A content"),
    ui.nav_panel("B", "Page B content"),
    ui.nav_panel("C", "Page C content"),
    ui.nav_control(ui.input_dark_mode(id="mode")),
    title=ui.div(
        ui.panel_conditional(
            "input.mode=='dark'",
            ui.tags.img(
                src="https://placehold.co/40x40/brown/yellow",
                height="40px",
                style="margin-right: 10px;",
            ),
        ),
        ui.panel_conditional(
            "input.mode=='light'",
            ui.tags.img(
                src="https://placehold.co/40x40/yellow/black",
                height="40px",
                style="margin-right: 10px;",
            ),
        ),
        "App with Navbar & Logo",
    ),
    id="page",
)


def server(input, output, session):
    pass


app_dir = Path(__file__).parent
app = App(app_ui, server, static_assets=app_dir / "www")

See a live demo in Shiny editor

3

Thanks, @keithn, for the suggestion.

I'm using the following solution now:

app_ui = ui.page_navbar(
    ui.nav_panel('p1', page_1_layout),
    ui.nav_panel('p2', page_2_layout),
    ui.nav_control(ui.input_dark_mode(id='dark_mode')),
    title = ui.div(
        ui.tags.a(
            ui.output_ui('toggle_logo'),
            href = 'https://abcd.com/',
            target='_blank',
            title='abcd.com',
            style='display: inline-block;'
        ),
        'Title',
    ),
    fillable=True,
)

def server(input, output, session):
    @output
    @render.ui    
    def toggle_logo():
        """ toggle btw black/white logo based on dark/light mode """
        current_mode = input.dark_mode()
        logo_img_by_mode = 'image/logo_white.png' if current_mode=='dark' else 'image/logo_black.png'
        logo_tag = ui.tags.img(
            src    = logo_img_by_mode,
            height = '30px',
            style  = 'margin-right: 10px;'
        )
        return logo_tag