styles/plotly/themeTokens#

currentThemeBase()#

function currentThemeBase(): "light" | "dark";

Whether the active theme is a dark one.

Reads data-theme-base, which every theme (built-in or plugin-provided) stamps alongside data-theme — an id allowlist would silently mislabel warm-paper and every plugin skin as dark.

Returns#

"light" | "dark"

currentThemeName()#

function currentThemeName(): string;

Current value of data-theme on , or 'dark' before it is set.

Returns#

string

getPlotColors()#

function getPlotColors(): PlotThemeColors;

Resolved plot colors for the current theme. Cached; recomputed only when data-theme changes.

Returns#

PlotThemeColors

invalidatePlotColors()#

function invalidatePlotColors(): void;

Drop all caches. Call if tokens are mutated without a data-theme flip.

Returns#

void

resolveToken()#

function resolveToken(name, fallback?): string;

Resolve a single CSS custom property to a literal color string. name may be given with or without the leading --.

Parameters#

Returns#

string

resolveTokens()#

function resolveTokens<K>(names): Record<K, string>;

Resolve several tokens at once (single getComputedStyle pass).

Type Parameters#

Parameters#

Returns#

Record<K, string>

seriesColor()#

function seriesColor(index): string;

Pick the Nth categorical color, wrapping with modulo.

Parameters#

Returns#

string

seriesColorAlpha()#

function seriesColorAlpha(index, alpha): string;

Same as seriesColor but tinted to alpha.

Parameters#

Returns#

string

themedPlotlyLayout()#

function themedPlotlyLayout(): Layout;

Plotly layout fragment carrying the current theme's chrome. Merge this after the selected template so it wins over the template's baked colors.

Returns#

Layout

usePlotColors()#

function usePlotColors(): PlotThemeColors;

Resolved plot colors, re-rendering the component when the theme changes. Prefer this over getPlotColors() inside React components.

Returns#

PlotThemeColors

withAlpha()#

function withAlpha(color, alpha): string;

Add alpha to a resolved token color. Accepts #rgb, #rrggbb, rgb()/rgba(). Returns the input unchanged if it cannot be parsed.

Parameters#

Returns#

string

PlotThemeColors#

Properties#

accent#

accent: string;

axisFontColor#

axisFontColor: string;

axisLineColor#

axisLineColor: string;

border#

border: string;

critical#

critical: string;

error#

error: string;

gridColor#

gridColor: string;

hoverBg#

hoverBg: string;

hoverBorder#

hoverBorder: string;

hoverFont#

hoverFont: string;

idle#

idle: string;

info#

info: string;

integrationCurve#

integrationCurve: string;

isDark#

isDark: boolean;

True when the resolved theme is a dark one.

jLabel#

jLabel: string;

legendBg#

legendBg: string;

legendBorder#

legendBorder: string;

ok#

ok: string;

onAccent#

onAccent: string;

onSolid#

onSolid: string;

overlayBorder#

overlayBorder: string;

overlayHover#

overlayHover: string;

overlayScrim#

overlayScrim: string;

overlaySelected#

overlaySelected: string;

paperBg#

paperBg: string;

patternLabel#

patternLabel: string;

peakLabel#

peakLabel: string;

peakLabelManual#

peakLabelManual: string;

peakLabelSelected#

peakLabelSelected: string;

plotBg#

plotBg: string;

projection#

projection: string;

series#

series: string[];

surfaceCard#

surfaceCard: string;

surfaceFloating#

surfaceFloating: string;

text#

text: string;

textDisabled#

textDisabled: string;

textSecondary#

textSecondary: string;

theme#

theme: string;

The theme these values were resolved for.

titleFontColor#

titleFontColor: string;

warn#

warn: string;

zeroLineColor#

zeroLineColor: string;