shiny-bslib-theming

Theme Shiny apps with bslib and Bootstrap 5 color modes.

Updated Mar 30, 2026
One-click install
npx skills add https://github.com/erlebach/gordon --skill shiny-bslib-theming-erlebach
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shiny-bslib-theming
Source: https://github.com/erlebach/gordon/tree/main/skills/shiny-bslib-theming
Command: npx skills add https://github.com/erlebach/gordon --skill shiny-bslib-theming-erlebach

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Shiny developers often struggle to craft polished UIs that adapt cleanly across light and dark modes, while requiring deep Bootstrap theming knowledge. This skill provides a ready-to-use approach to theme Shiny apps with bslib and Bootstrap 5, including brand integration and dynamic theming.

Core Features & Use Cases

  • Advanced theming with bs_theme() to control global aesthetics (colors, fonts, spacings) across an app.
  • Support for Bootstrap color modes, brand.yml integration, and per-component theming with data-bs-theme.
  • Real-world use: unify the look of a Shiny dashboard and its plots, and enable quick skin changes for branding or audience.

Quick Start

Start by calling bs_theme() with your desired presets and then apply bs_add_rules() or input_dark_mode() to tailor the theme for your app.

Frequently Asked Questions about shiny-bslib-theming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add dark mode to a Shiny app using Bootstrap 5?

To add dark mode to a Shiny app, use bslib's input_dark_mode() and toggle_dark_mode() functions to enable dynamic Bootstrap 5 color mode switching across your dashboard components.

How do I customize global colors and fonts in Shiny with bslib?

Customize global aesthetics in Shiny by calling bs_theme() to define colors, fonts, and spacings, then use bs_add_variables() and bs_add_rules() to inject custom Bootstrap 5 CSS rules.

Can I dynamically switch themes in a Shiny dashboard without reloading?

Yes, you can dynamically switch themes in a Shiny dashboard without reloading by using session$setCurrentTheme() combined with bslib's toggle_dark_mode() to update the Bootstrap 5 color mode.

How do I apply brand.yml integration for Shiny app theming?

Apply brand.yml integration for Shiny app theming by configuring bs_theme() to read brand settings, allowing you to unify the look of your dashboard and enable quick skin changes for different audiences.

Does bslib support per-component theming in Shiny layouts?

Yes, bslib supports per-component theming in Shiny layouts by applying the data-bs-theme attribute, allowing you to target and style specific dashboard components independently within your Bootstrap 5 app.

What is the best way to unify Shiny dashboard and plot appearances?

The best way to unify Shiny dashboard and plot appearances is to use bslib's bs_theme() to establish global Bootstrap 5 variables, ensuring consistent branding and color modes across all UI elements and plots.