dash.theme

The app’s colours, corner radius and font, so a pane looks like part of the canvas. They are set as CSS variables on the pane’s page, and dash.theme holds the same values for your script.

dash.theme: Readonly<Record<string, string>>

Example

Use the variables in style.css. Give each one a fallback, in case a value is missing:

.card {
  background: var(--dash-surface, #fff);
  color: var(--dash-text, #17191c);
  border: 1px solid var(--dash-border, #d5d9df);
  border-radius: var(--dash-radius, 8px);
  font-family: var(--dash-font, system-ui, sans-serif);
}

.card small {
  color: var(--dash-muted, #555d6a);
}

.card a {
  color: var(--dash-accent, #2456d3);
}

Read a value from script when you draw with something CSS cannot style, such as a canvas chart:

const accent = dash.theme['--dash-accent'] ?? '#2456d3';

The variables

Variable	What it is for
--dash-bg	The page background. The pane’s page uses it by default.
--dash-surface	Cards and panels.
--dash-text	Main text. The pane’s page uses it by default.
--dash-muted	Secondary text, such as labels and hints.
--dash-border	Borders and dividers.
--dash-accent	Links, buttons and highlights.
--dash-radius	The corner radius of cards.
--dash-font	The font stack. The pane’s page uses it by default.

Behaviour

• The keys of dash.theme are the variable names, dashes included: write dash.theme['--dash-accent'], not dash.theme.accent.
• The variables are set on the pane’s <html> element before your code runs. Your own CSS can override them.
• The pane’s page starts with no margin, the --dash-bg background, --dash-text text and the --dash-font font.
• A variable is left out when the app has no value for it, which is why the example gives fallbacks.
• Each value is a string of up to 200 characters.
• The app has a single light theme for now. There is no callback for theme changes.
• dash.theme is read-only and reading it never fails.