Shiny Dashboards

CPAL theming functions for Shiny applications

cpaltemplates provides functions for styling Shiny applications with CPAL branding. These functions integrate with bslib for Bootstrap 5 theming and provide ggplot2 theme switching for reactive dark/light mode support.

For a live example of these functions in action, see the CPAL Shiny Showcase application. The source code is available on GitHub at childpovertyactionlab/shiny-showcase.

Dashboard Theme Functions

cpal_dashboard_theme()

The primary function for creating CPAL-styled Shiny dashboards. Creates a Bootstrap 5 theme using bslib that automatically incorporates brand settings from _brand.yml.

cpal_dashboard_theme()

This function returns a bs_theme object that can be passed to any bslib page function (page_sidebar, page_navbar, page_fillable).

Features

  • Bootstrap 5 foundation with CPAL brand colors
  • Automatic integration with _brand.yml configuration
  • Google Fonts (Poppins, Inter) integration
  • Consistent component styling across the application

Usage

library(shiny)
library(bslib)
library(cpaltemplates)

ui <- page_sidebar(
  theme = cpal_dashboard_theme(),
  title = "My Dashboard",
  sidebar = sidebar(...),
  ...
)

cpal_add_scss_enhancements()

Extends a base theme with additional SCSS-based styling for advanced CPAL components.

cpal_add_scss_enhancements(
  base_theme,
  include_geometric_headers = FALSE,
  include_datatable_enhancements = TRUE,
  include_metric_cards = TRUE
)

Arguments

Argument Description
base_theme A bslib theme object from cpal_dashboard_theme()
include_geometric_headers Include geometric header styling (default: FALSE)
include_datatable_enhancements Include enhanced DataTables styling (default: TRUE)
include_metric_cards Include metric card styling (default: TRUE)

Usage

theme <- cpal_dashboard_theme() |>
  cpal_add_scss_enhancements()

ui <- page_sidebar(
  theme = theme,
  ...
)

cpal_export_scss()

Exports the CPAL SCSS file for use in custom projects, Quarto documents, or standalone CSS compilation.

cpal_export_scss(path = "cpal-enhanced.scss", overwrite = FALSE)

Arguments

Argument Description
path File path for the exported SCSS (default: “cpal-enhanced.scss”)
overwrite Whether to overwrite existing file (default: FALSE)

ggplot2 Theme Switching

These functions enable reactive theme switching in Shiny applications, useful for dark/light mode toggles.

theme_cpal_switch()

Returns the appropriate ggplot2 theme based on a mode parameter. Useful for direct theme switching in render functions.

theme_cpal_switch(mode = "light", ...)

Arguments

Argument Description
mode Either “light” or “dark”
... Additional arguments passed to theme functions

Usage

output$plot <- renderPlot({
  ggplot(data, aes(x, y)) +
    geom_point() +
    theme_cpal_switch(input$dark_mode_toggle)
})

make_theme_reactive()

Creates a reactive expression that returns the appropriate theme. Call once in your server function to create a reusable theme reactive.

make_theme_reactive(input, toggle_id = "dark_mode_toggle", ...)

Arguments

Argument Description
input The Shiny input object
toggle_id ID of the dark mode toggle input (default: “dark_mode_toggle”)
... Additional arguments passed to theme functions

Usage

server <- function(input, output, session) {
  # Create reusable theme reactive
  current_theme <- make_theme_reactive(input)

  output$plot1 <- renderPlot({
    ggplot(data1, aes(x, y)) +
      geom_point() +
      current_theme()
  })

  output$plot2 <- renderPlot({
    ggplot(data2, aes(x, y)) +
      geom_line() +
      current_theme()
  })
}

Deprecated Functions

cpal_shiny()

This function is deprecated. Use cpal_dashboard_theme() instead, which integrates with _brand.yml for more flexible theming.

theme_cpal_auto()

This function is deprecated. Use theme_cpal_switch() instead, which provides direct light/dark mode switching without requiring the thematic package.

Live Example

The best way to see these functions in action is through the CPAL Shiny Showcase:

The showcase demonstrates dashboard theming, ggplot2 integration, reactable tables, and dark/light mode switching using the functions documented above.

Quick Reference

Function Purpose
cpal_dashboard_theme() Create Bootstrap 5 theme with CPAL branding
cpal_add_scss_enhancements() Add enhanced SCSS styling to theme
cpal_export_scss() Export SCSS for custom use
theme_cpal_switch() Switch ggplot2 theme based on mode
make_theme_reactive() Create reactive theme for multiple plots

Next Steps