Dark Mode Switch

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| components: [viewer]
#| viewerHeight: 200

## file: app.py
from shiny import ui, render, App

app_ui = ui.page_fluid(ui.input_dark_mode()).add_class("h-100 w-100 align-content-center text-center")

def server(input, output, session):
    pass

app = App(app_ui, server)
from shiny.express import input, render, ui

ui.input_dark_mode() 
from shiny import ui, render, App

app_ui = ui.page_fluid(
    ui.input_dark_mode() 
)

def server(input, output, session):
    pass

app = App(app_ui, server)
No matching items

Relevant Functions

No matching items

Details

A dark mode switch input toggles the app between dark and light modes.

To add a dark mode switch to your app:

  1. Add ui.input_dark_mode() to the UI of your app to create a dark mode switch. Where you call this function will determine where the dark mode switch will appear within the app’s layout.

  2. Optionally, specify the id parameter of ui.input_dark_mode() to define the identifier of the switch. When id is specified, you can use it to access the current color mode.

  3. By default, the user’s system settings for the preferred color scheme will be used for the initial mode of the app. To force the initial mode, set the mode parameter to "light" or "dark".

The value of an input component is accessible as a reactive value within the server() function. To access the value of a dark mode switch:

  1. Use input.<dark_mode_switch_id>() (e.g., input.mode()) to access the value of the dark mode switch. The server value of a dark mode switch is a string: either "light" or "dark".

Variations

Dark mode switch in a navbar

To add a dark mode switch to a navbar, use ui.page_navbar() to create a page with a navbar, and ui.nav_spacer() to push the dark mode switch to the right. Place the ui.input_dark_mode() element within a ui.nav_control() element, to add the control to the navbar without creating a corresponding panel.

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| components: [viewer]
#| viewerHeight: 300

from shiny import App, ui

app_ui = ui.page_navbar(
    ui.nav_spacer(), 
    ui.nav_control(ui.input_dark_mode()), 
    title="Dark mode switch in navbar"
)

def server(input, output, session):
    pass

app = App(app_ui, server)
from shiny.express import ui

ui.page_opts(title="Dark mode switch in navbar", fillable=True, id="page")

ui.nav_spacer()  
with ui.nav_control():  
    ui.input_dark_mode()  
from shiny import App, ui

app_ui = ui.page_navbar(
    ui.nav_spacer(), 
    ui.nav_control(ui.input_dark_mode()), 
    title="Dark mode switch in navbar"
)

def server(input, output, session):
    pass

app = App(app_ui, server)
No matching items