Light / dark / auto preset select input

Drop-in shiny::selectInput() for the glass theme preset. The client applies the change immediately via window.shinyglass.setPreset() (marked with data-glass-preset-input), so Light/Dark/Auto works even when custom messages are delayed or rewritten (e.g. on some shinyapps.io hosts). Pair with observe_glass_preset_input() so the server stays in sync.

Usage

glass_preset_input(
  inputId = "glass_preset",
  label = "Theme preset",
  selected = c("auto", "light", "dark"),
  choices = c(Light = "light", Dark = "dark", `Auto (OS)` = "auto"),
  width = NULL
)

Arguments

inputId

The input slot that will be used to access the value.

label

Display label for the control (or NULL for none).

selected

Initially selected mode ("light", "dark", or "auto").

choices

Named character vector of choices. Defaults to Light / Dark / Auto (OS). Names are labels; values must be light, dark, and/or auto.

width

The width of the input (e.g. "100%").

Value

A shiny::selectInput() tag (with glass client bindings).

See also

observe_glass_preset_input(), glass_theme_toggle(), update_glass_theme()

Other glass controls: glass_accent_input(), glass_intensity_slider(), glass_plot_surface_input(), glass_resolved_preset(), glass_scene_input(), glass_system_colors(), glass_theme_toggle(), observe_glass(), observe_glass_accent(), observe_glass_intensity(), observe_glass_plot_surface(), observe_glass_preset_input(), observe_glass_scene(), observe_glass_theme_toggle()

Examples

glass_preset_input(selected = "light")
#> <div class="form-group shiny-input-container">
#>   <label class="control-label" id="glass_preset-label" for="glass_preset">Theme preset</label>
#>   <div>
#>     <select id="glass_preset" class="shiny-input-select glass-preset-input" data-glass-preset-input="glass_preset"><option value="light" selected>Light</option>
#> <option value="dark">Dark</option>
#> <option value="auto">Auto (OS)</option></select>
#>     <script type="application/json" data-for="glass_preset" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#>   </div>
#> </div>