Package {shinyglass}

Liquid Glass Design Themes for 'shiny' Applications

Description

Drop-in Liquid Glass themes for shiny. Call glass_theme() and pass the result to ⁠theme =⁠ on fluidPage(), navbarPage(), or any bslib-aware page function to get translucent surfaces, backdrop blur, and system typography.

Getting started

library(shiny)
library(shinyglass)

ui <- glass_page(
  title = "Liquid Glass",
  persist = TRUE,
  sliderInput("n", "Bars", 5, 30, 15),
  plotOutput("plot")
)

server <- function(input, output, session) {
  observe_glass(input, session)
  output$plot <- renderPlot(
    barplot(seq_len(input$n), col = "#007AFF", border = NA),
    bg = "transparent"
  )
}

Light and dark presets are available via glass_theme(preset = "dark"), or preset = "auto" to follow the OS. Switch at runtime with update_glass_theme() or glass_theme_toggle(). Material density is controlled with glass_intensity_slider() (Ultra Clear to Tinted, matching iOS 27 Settings -> Appearance -> Liquid Glass) or glass_theme(intensity = ). Use plot_surface = "opaque" when plots and tables need a denser panel. Named scenes (glass_scenes()), flatten mode (glass_flatten()), and public CSS tokens (glass_css_tokens()) are available. Accent color, blur, saturation, corner radius, and JS behaviors (tint, specular, nav_morph) are configurable.

For teal apps, set options(teal.bs_theme = glass_theme()) before calling teal::init().

Author(s)

Maintainer: Eric Anderson eric.ray.anderson@gmail.com [copyright holder]

Authors:

• Eric Anderson eric.ray.anderson@gmail.com [copyright holder]

See Also

glass_page(), glass_theme(), theme_glass(), glass_intensity_slider(), update_glass_theme(), glass_flatten(), glass_css_tokens()

DT options that pair with glass plot surfaces

Description

Host CSS already skins DataTables (pagination, ink, opaque/clear panels). This helper is optional: it keeps tables inside glass cards with wrapping headers and in-card horizontal scroll — the same contract used by the dashboard demo.

Usage

dt_options_glass(..., page_length = 8, scroll_x = FALSE)

Arguments

Value

A named list for DT::datatable(options = ).

Examples

dt_options_glass(page_length = 8)
dt_options_glass(searching = FALSE, scroll_x = TRUE)

Accent color wells

Description

Compact row of color wells. The client applies window.shinyglass.setPrimary() immediately; the value is also a Shiny input (input[[inputId]]) so the server can persist or restyle plots. Pair with observe_glass_accent() if you also want update_glass_theme() to echo the change.

Usage

glass_accent_input(
  inputId = "glass_accent",
  label = "Accent",
  selected = "blue",
  colors = glass_system_colors()
)

Arguments

Value

A Shiny UI tag hierarchy.

Override glass CSS tokens on a theme

Description

Injects ⁠:root { --glass-*: ... }⁠ without forking SCSS. Accepts public token names from glass_css_tokens() ("blur"), CSS names ("--glass-blur"), or glass-blur. Unknown names that already start with ⁠--⁠ are passed through; others must be in the catalog.

Usage

glass_add_tokens(theme, tokens = list(), ...)

Arguments

Value

The theme, with an extra HTML dependency.

Examples

th <- glass_theme()
th <- glass_add_tokens(th, list(blur = "28px", radius = "1.25rem"))

Stable Liquid Glass CSS tokens

Description

Catalog of public ⁠--glass-*⁠ custom properties. Override them with glass_add_tokens() or glass_theme() tokens= without forking inst/scss/glass.scss. Light/dark packs already ship as dual ⁠[data-glass-preset]⁠ rules; prefer these variables over Sass ⁠$glass-*⁠.

Usage

glass_css_tokens()

Details

Contrast floor (wallpaper / scenes): body ink is ⁠#1d1d1f⁠ (light) or ⁠#f5f5f7⁠ (dark). User wallpapers are blurred and washed (--glass-wallpaper-wash) so text sits on glass or a dimmed photo, not raw imagery. Overlay menus use --glass-menu-bg (~86% light / ~88% dark). Target 4.5:1 for body text and 3:1 for large UI chrome.

Value

A data frame with token, css_var, category, and description.

Examples

head(glass_css_tokens())
glass_css_tokens()$css_var

Flatten glass for print, PDF, and screenshots

Description

Neutralizes backdrop blur and translucent fills so chromote, pagedown, print-to-PDF, static HTML, and shareable shots stay readable. The live page can enter or leave flatten without a reload.

Usage

glass_flatten(session, on = TRUE)

Arguments

Details

Ways to enter flatten:

• glass_theme() flatten = TRUE (first paint)

• glass_flatten() / update_glass_theme() flatten = TRUE (live)

• window.shinyglass.setFlatten(true) (or .enterFlatten() / .exitFlatten())

• Query string ?glass_flatten=1 (handy for chromote / visual QA)

• ⁠@media print⁠ (automatic for browser print / PDF)

Value

session, invisibly.

See Also

update_glass_theme(), glass_theme()

Examples

if (interactive()) {
  library(shiny)
  library(shinyglass)

  ui <- fluidPage(
    theme = glass_theme(),
    actionButton("flat", "Flatten for capture"),
    actionButton("live", "Live glass")
  )
  server <- function(input, output, session) {
    observeEvent(input$flat, glass_flatten(session, TRUE))
    observeEvent(input$live, glass_flatten(session, FALSE))
  }
  shinyApp(ui, server)
}

Liquid Glass intensity slider (iOS 27-style)

Description

UI control matching iOS 27 Settings -> Appearance -> Liquid Glass: a continuous slider from Ultra Clear (0) to Tinted (1) that live-updates the glass material without a page reload. Browsers cannot read the OS Appearance slider, so this in-app control is the supported way to match that look.

Usage

glass_intensity_slider(
  inputId = "glass_intensity",
  label = "Liquid Glass",
  value = NULL,
  min = 0,
  max = 1,
  step = 0.01,
  min_label = "Ultra Clear",
  max_label = "Tinted",
  preview = TRUE,
  width = NULL
)

Arguments

Details

The client applies changes immediately via window.shinyglass.setIntensity(). The value is also a normal Shiny input (input[[inputId]]) so the server can react or persist it. Pair with glass_theme() ⁠intensity=⁠ for the starting value, and optionally observe_glass_intensity() to push server-driven updates through update_glass_theme().

Value

A Shiny UI tag hierarchy.

Examples

if (interactive()) {
  library(shiny)
  library(shinyglass)

  ui <- fluidPage(
    theme = glass_theme(intensity = 0.35),
    glass_theme_toggle(),
    glass_intensity_slider("glass_intensity"),
    plotOutput("p")
  )

  server <- function(input, output, session) {
    observe_glass_theme_toggle(input, session)
    # optional: mirror slider -> server message (client already updates live)
    observe_glass_intensity(input, session, "glass_intensity")
    output$p <- renderPlot(plot(rnorm(100), rnorm(100), pch = 16, col = "#007AFF"))
  }

  shinyApp(ui, server)
}

One-call glass page

Description

Wraps shiny::fluidPage() with glass_theme() and, by default, the Light / Dark / Auto toggle, intensity slider, and accent wells. Pair with observe_glass() in the server function.

Usage

glass_page(
  ...,
  title = NULL,
  preset = "auto",
  intensity = 0.45,
  persist = TRUE,
  scene = "tahoe",
  wallpaper = NULL,
  plot_surface = "clear",
  flatten = FALSE,
  controls = TRUE,
  theme = NULL
)

Arguments

Value

A Shiny UI tag list suitable as shinyApp(ui = ...).

Examples

if (interactive()) {
  library(shiny)
  library(shinyglass)

  ui <- glass_page(
    title = "Hello, glass",
    plotOutput("plot")
  )
  server <- function(input, output, session) {
    observe_glass(input, session)
    output$plot <- renderPlot(plot(1:10), bg = "transparent")
  }
  shinyApp(ui, server)
}

Ink and grid colors for the current glass appearance

Description

Ink and grid colors for the current glass appearance

Usage

glass_plot_colors(preset = NULL, input = NULL, surface = c("clear", "opaque"))

Arguments

Value

A list with preset, ink, grid, fill, paper, and surface.

Plot / table surface select

Description

Drop-in shiny::selectInput() that applies window.shinyglass.setPlotSurface() immediately. Pair with observe_glass_plot_surface() so the server stays in sync.

Usage

glass_plot_surface_input(
  inputId = "plot_surface",
  label = "Plot / table surface",
  selected = c("clear", "opaque"),
  width = NULL
)

Arguments

Value

A shiny::selectInput() tag marked for client bindings.

See Also

observe_glass_plot_surface(), glass_theme()

Light / dark / auto preset select input

Description

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

Value

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

See Also

observe_glass_preset_input(), glass_theme_toggle(), update_glass_theme()

Resolved light or dark appearance

Description

When the user picks Auto, input$preset stays "auto" so checks like identical(input$preset, "dark") stay FALSE and plots keep light ink on a dark page. The client publishes the resolved appearance as input$glass_resolved_preset ("light" or "dark").

Usage

glass_resolved_preset(input, default = c("light", "dark"))

Arguments

Value

"light" or "dark".

Scene picker for wallpaper packs

Description

Drop-in shiny::selectInput() that applies window.shinyglass.setScene() immediately. Pair with observe_glass_scene() so the server stays in sync.

Usage

glass_scene_input(
  inputId = "glass_scene",
  label = "Wallpaper scene",
  selected = "default",
  choices = glass_scenes(),
  width = NULL
)

Arguments

Value

A shiny::selectInput() tag marked for client bindings.

See Also

glass_scenes(), observe_glass_scene(), update_glass_theme()

Named wallpaper scenes

Description

Curated page backgrounds for glass_theme() scene=. Each name ships light and dark gradient/orb packs. Pair with wallpaper= for a user photo; the photo is blurred and washed so body ink stays above the contrast floor documented in glass_css_tokens().

Usage

glass_scenes()

Value

A named character vector: names are scene ids, values are labels.

Examples

names(glass_scenes())
glass_scenes()[["aurora"]]

iOS system accent colors

Description

Named hex colors matching iOS Settings wells: blue, purple, pink, orange, green, and teal.

Usage

glass_system_colors()

Value

A named character vector of ⁠#RRGGBB⁠ colors.

Liquid Glass theme for 'shiny'

Description

Create a bslib::bs_theme() styled with a Liquid Glass look: translucent surfaces, backdrop blur, soft depth, and system typography. Pass the result to ⁠theme =⁠ on fluidPage(), navbarPage(), bslib::page_sidebar(), or any other page function that accepts a bslib theme.

Usage

glass_theme(
  preset = c("light", "dark", "auto"),
  primary = "#007AFF",
  blur = 36,
  saturation = 200,
  radius = "1.5rem",
  material = c("regular", "clear"),
  plot_surface = c("clear", "opaque"),
  intensity = 0.45,
  tint = TRUE,
  specular = TRUE,
  nav_morph = TRUE,
  ambient_motion = TRUE,
  persist = FALSE,
  scene = c("default", "tahoe", "dusk", "mesh", "aurora", "harbor", "grove"),
  wallpaper = NULL,
  flatten = FALSE,
  tokens = NULL,
  ...
)

Arguments

Details

Light and dark surface tokens are compiled into dual CSS custom-property packs. Switching preset at runtime (via update_glass_theme() or preset = "auto") updates document.documentElement.dataset.glassPreset without recompiling Sass or reloading the page. Accent color can also be updated live with update_glass_theme() ⁠primary=⁠ (CSS variables).

Value

A bslib::bs_theme() object suitable for 'shiny' page functions.

Examples

theme <- glass_theme()
opaque <- glass_theme(
  plot_surface = "opaque",
  scene = "aurora",
  tokens = list(blur = "28px")
)

if (interactive()) {
  library(shiny)

  ui <- fluidPage(
    theme = glass_theme(preset = "auto"),
    titlePanel("Liquid Glass"),
    glass_theme_toggle(),
    selectInput("color", "Color", c("Blue", "Purple", "Orange")),
    plotOutput("plot")
  )

  server <- function(input, output, session) {
    # Client onclick already switches; keep session in sync:
    observe_glass_theme_toggle(input, session)
  }

  shinyApp(ui, server)
}

Light / dark / auto theme toggle buttons

Description

Drop-in button group for switching the glass preset. Each button sets the preset on the client immediately (window.shinyglass.setPreset) and also has a 'shiny' input id so observe_glass_theme_toggle() can keep the server in sync (important on hosts that rewrite custom messages).

Usage

glass_theme_toggle(
  inputId = "glass_toggle",
  selected = c("auto", "light", "dark"),
  labels = c(light = "Light", dark = "Dark", auto = "Auto (OS)"),
  class = "glass-theme-toggle"
)

Arguments

Value

An htmltools::tag() button group.

See Also

observe_glass_theme_toggle(), update_glass_theme()

Default CSS variable pack for a preset

Description

Values that glass_theme() compiles into ⁠[data-glass-preset]⁠. Use as a starting point for glass_add_tokens() overrides.

Usage

glass_token_pack(preset = c("light", "dark"))

Arguments

Value

A named list of CSS custom properties (names include ⁠--⁠).

Examples

names(glass_token_pack("light"))
glass_token_pack("dark")[["--glass-body-color"]]

gt table options that match glass chrome

Description

Transparent table chrome so glass cards show through. Requires gt.

Usage

gt_theme_glass(
  data,
  preset = NULL,
  input = NULL,
  surface = c("clear", "opaque")
)

Arguments

Value

A gt table.

Observe every built-in glass control

Description

Registers observe_glass_theme_toggle(), observe_glass_intensity(), and observe_glass_accent() with the default input ids used by glass_page().

Usage

observe_glass(
  input,
  session,
  toggle_id = "glass_toggle",
  intensity_id = "glass_intensity",
  accent_id = "glass_accent"
)

Arguments

Value

NULL, invisibly.

Keep session accent in sync with glass_accent_input()

Description

The wells already update glass live on the client. This observer echoes the hex through update_glass_theme() so plots and other sessions can follow.

Usage

observe_glass_accent(input, session, inputId = "glass_accent")

Arguments

Value

An shiny::observeEvent() observer (invisibly).

Keep session intensity in sync with glass_intensity_slider()

Description

The slider already updates glass live on the client. This observer optionally echoes the value through update_glass_theme() so other clients / server state stay aligned.

Usage

observe_glass_intensity(input, session, inputId = "glass_intensity")

Arguments

Value

An shiny::observeEvent() observer (invisibly).

Observe glass_plot_surface_input() on the server

Description

Observe glass_plot_surface_input() on the server

Usage

observe_glass_plot_surface(input, session, inputId = "plot_surface")

Arguments

Value

An shiny::observeEvent() observer (invisibly).

Observe glass_preset_input() on the server

Description

Wires a preset select to update_glass_theme() so session state stays aligned with the client (the client already applied the preset live).

Usage

observe_glass_preset_input(input, session, inputId = "glass_preset")

Arguments

Value

An shiny::observeEvent() observer (invisibly).

Observe glass_scene_input() on the server

Description

Observe glass_scene_input() on the server

Usage

observe_glass_scene(input, session, inputId = "glass_scene")

Arguments

Value

An shiny::observeEvent() observer (invisibly).

Observe glass_theme_toggle() buttons on the server

Description

Wires the three toggle inputs to update_glass_theme() so session state stays aligned with the client (needed on some hosts that rewrite 'shiny' messaging).

Usage

observe_glass_theme_toggle(input, session, inputId = "glass_toggle")

Arguments

Value

NULL, invisibly. Called for side effects (registers observers).

plotly layout that matches glass chrome

Description

Transparent paper/plot backgrounds and ink that follows the resolved preset. Requires plotly. Call as plotly_glass(p) or do.call(plotly::layout, c(list(p), plotly_glass())).

Usage

plotly_glass(
  p = NULL,
  preset = NULL,
  input = NULL,
  surface = c("clear", "opaque")
)

Arguments

Value

p with layout applied, or a list of layout arguments.

ggplot2 theme that follows glass light/dark ink

Description

Transparent panel and plot backgrounds so the page wallpaper shows through glass cards. Use surface = "opaque" for a near-solid panel when dense charts must stay readable. Requires ggplot2 (a Suggests dependency).

Usage

theme_glass(
  preset = NULL,
  base_size = 13,
  input = NULL,
  surface = c("clear", "opaque"),
  ...
)

Arguments

Value

A ggplot2 theme object.

Examples

if (requireNamespace("ggplot2", quietly = TRUE)) {
  ggplot2::ggplot(mtcars, ggplot2::aes(wt, mpg)) +
    ggplot2::geom_point() +
    theme_glass("light")
}

Update glass theme options in a running app

Description

Send a message to the browser to change the Liquid Glass preset, accent color, intensity, or content-tint behavior without reloading the page. Requires a page that used glass_theme() (so shiny-glass.js is loaded).

Usage

update_glass_theme(
  session,
  preset = NULL,
  tint = NULL,
  primary = NULL,
  intensity = NULL,
  material = NULL,
  plot_surface = NULL,
  ambient_motion = NULL,
  scene = NULL,
  flatten = NULL,
  tokens = NULL
)

Arguments

Details

primary updates CSS variables (--bs-primary, --bs-primary-rgb, --glass-primary) so buttons, checks, and other accent surfaces follow the new color. Sass-baked one-off colors may not all switch until a full reload. intensity updates fill/blur along the Ultra Clear to Tinted spectrum (see glass_intensity_slider()).

Value

session, invisibly.

Examples

if (interactive()) {
  library(shiny)
  library(shinyglass)

  ui <- fluidPage(
    theme = glass_theme(),
    glass_theme_toggle(),
    selectInput("accent", "Accent", c("#007AFF", "#AF52DE", "#FF9500"))
  )

  server <- function(input, output, session) {
    observe_glass_theme_toggle(input, session)
    observeEvent(input$accent, {
      update_glass_theme(session, primary = input$accent)
    }, ignoreInit = TRUE)
  }

  shinyApp(ui, server)
}