Skip to content

Theme Support for Workbench

Need Help?

The SuperCowPowers team is happy to give any assistance needed when setting up AWS and Workbench. So please contact us at workbench@supercowpowers.com or on chat us up on Discord

Workbench interfaces are going to have full support for theming and branding to enable customizations of components, and pages. The theming support will include all of the default pages/components but will also support full theming for plugin components and pages Workbench Plugins

Summary of Theming Mechanisms

1. CSS Files

CSS affects global styling of the entire application, including:

  • Font styles and sizes.
  • Layout styles (e.g., margins, padding, spacing).
  • Background and text colors for non-Bootstrap or custom elements.
  • Borders and shadows.
  • Interactive element styling (e.g., hover effects, link colors).
  • Dash custom components.

2. Plotly Figure Templates

Plotly templates control figure-specific styling for Plotly charts and graphs:

  • Axis styling (e.g., line colors, grid lines, and ticks).
  • Color scales for heatmaps, bar charts, and scatter plots.*
  • Marker and line styles.
  • Background colors for the figure and plot areas.
  • Font styles inside the figures.

3. DBC Components Light/Dark

The data-bs-theme=light/dark html attribute affects Bootstrap-specific components, primarily from Dash Bootstrap Components (DBC):

  • Buttons.
  • Tables.
  • Forms (e.g., input boxes, checkboxes, radio buttons).
  • Cards, modals, and alerts.

Key Differences

Aspect CSS Files Plotly Templates DBC Dark/Light
Scope Global app styling Plotly figures DBC Components
Level of Control Full Range Partial/Full* Just Light and Dark
Dynamic Switching? Not easily (reloading needed) Can update dynamically Supports dynamic switching
  • Some figure parameters will automatically work, but for stuff like colorscales the component code needs to 'pull' that from the template meta data when it updates it's figure.

Additional Resources

Need help with plugins? Want to develop a customized application tailored to your business needs?