express.ui.input_dark_mode

express.ui.input_dark_mode(id=None, mode=None, **kwargs)

Creates a dark mode switch input that toggles the app between dark and light modes.

Parameters

id : Optional[str] = None

An optional ID for the dark mode switch. When included, the current color mode is reported in the value of the input with this ID.

mode : Optional[BootstrapColorMode] = None

The initial mode of the dark mode switch. By default or when set to None, the user’s system settings for the preferred color scheme will be used. Otherwise, set to "light" or "dark" to force the initial mode.

****kwargs** : TagAttrValue = {}

Additional attributes to be added to the dark mode switch, such as class_ or style.

Returns

: Tag

A dark mode toggle switch UI element.

References

• https://getbootstrap.com/docs/5.3/customize/color-modes

Examples

#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
import matplotlib.pyplot as plt
import numpy as np

from shiny import reactive
from shiny.express import input, render, ui

ui.page_opts(title="Shiny Dark Mode", fillable="One")

with ui.nav_panel("One"):
    with ui.layout_sidebar():
        with ui.sidebar():
            ui.input_slider("n", "N", min=0, max=100, value=20)

        @render.plot(alt="A histogram")
        def plot() -> object:
            np.random.seed(19680801)
            x = 100 + 15 * np.random.randn(437)

            fig, ax = plt.subplots()
            ax.hist(x, input.n(), density=True)

            # Theme the plot to match light/dark mode
            fig.patch.set_facecolor("none")
            ax.set_facecolor("none")

            color_fg = "black" if input.mode() == "light" else "silver"
            ax.tick_params(axis="both", colors=color_fg)
            ax.spines["bottom"].set_color(color_fg)
            ax.spines["top"].set_color(color_fg)
            ax.spines["left"].set_color(color_fg)
            ax.spines["right"].set_color(color_fg)

            return fig


with ui.nav_panel("Two"):
    with ui.layout_column_wrap():
        with ui.card():
            "Second page content."

        with ui.card():
            ui.card_header("More content on the second page.")
            ui.input_action_button("make_light", "Switch to light mode")
            ui.input_action_button("make_dark", "Switch to dark mode")

ui.nav_spacer()
with ui.nav_control():
    ui.input_dark_mode(id="mode")


@reactive.effect
@reactive.event(input.make_light)
def _():
    ui.update_dark_mode("light")


@reactive.effect
@reactive.event(input.make_dark)
def _():
    ui.update_dark_mode("dark")