ui.input_dark_mode

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

Type	Description
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 App, Inputs, Outputs, Session, reactive, render, ui

app_ui = ui.page_navbar(
    ui.nav_panel(
        "One",
        ui.layout_sidebar(
            ui.sidebar(
                ui.input_slider("n", "N", min=0, max=100, value=20),
            ),
            ui.output_plot("plot"),
        ),
    ),
    ui.nav_panel(
        "Two",
        ui.layout_column_wrap(
            ui.card("Second page content."),
            ui.card(
                ui.card_header("Server-side color mode setting"),
                ui.input_action_button("make_light", "Switch to light mode"),
                ui.input_action_button("make_dark", "Switch to dark mode"),
            ),
        ),
    ),
    ui.nav_spacer(),
    ui.nav_control(ui.input_dark_mode(id="mode")),
    title="Shiny Dark Mode",
    id="page",
    fillable="One",
)


def server(input: Inputs, output: Outputs, session: Session):
    @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")

    @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


app = App(app_ui, server)