Class ThemeManager

Constructs a ThemeManager.

If a themeMap isn't provided, this gets default light and dark themes that are copies of Themes.Light and Themes.Dark, respectively.

Gets or sets whether this ThemeManager changes the div background color when currentTheme changes.

If true, the background color will be set to the CSS color string denoted by the div property of the Theme.colors object.

Gets or sets the current theme for this ThemeManager.

A value of system will rely on the browser's preferred color scheme, using light or dark themes.

Gets or sets the default theme for this ThemeManager.

This property determines which theme is used as a fallback if a lookup doesn't find a value in the current theme.

This read-only property returns the user's preferred color scheme, useful when currentTheme is set to system.

See https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme.

Gets or sets whether this ThemeManager reads var(...) values via getComputedStyle and getPropertyValue.

The values will be read from the :root CSS element. This may be especially useful if you need to reference CSS variables from another library, or if you've defined CSS variables that are used to theme the rest of your application.

The CSS variable's value will be read before any ThemeBinding.themeConverter functions have run.

NOTE: The syntax to reference a CSS variable in a theme is 'var(<varname>)'. Only a single variable may be referenced, and any fallbacks should be defined either on the template or in the referenced CSS variable.

CSS:

:root {
  --color-bg: var(--color-slate-50);
  --color-primary: var(--color-emerald-300);
}

.dark {
  --color-bg: var(--color-slate-950);
  --color-primary: var(--color-emerald-700);
}
Copy

ThemeManager:

// using a single theme
diagram.themeManager = new go.ThemeManager({
  changesDivBackground: true,  // may not be needed in cases where the diagram background is transparent
  defaultTheme: 'default',
  currentTheme: 'default',
  themeMap: new go.Map([
    {
      key: 'default',
      value: {
        ...go.Themes.Dark,
        colors: {
          ...go.Themes.Dark.colors,  // take some default colors from the built-in dark theme
          div: 'var(--color-bg)',
          primary: 'var(--color-primary)'
        }
      }
    }
  ])
});

// using multiple themes
diagram.themeManager = new go.ThemeManager({
  changesDivBackground: true,
  themeMap: new go.Map([
    {
      key: 'light',
      value: {
        ...go.Themes.Light,
        colors: {
          ...go.Themes.Light.colors,
          div: 'var(--color-slate-50)',
          primary: 'var(--color-emerald-300)'
        }
      }
    },
    {
      key: 'dark',
      value: {
        ...go.Themes.Dark,
        colors: {
          ...go.Themes.Dark.colors,
          div: 'var(--color-slate-900)',
          primary: 'var(--color-emerald-700)'
        }
      }
    }
  ])
});
Copy

Switching themes:

// on theme change, set :root class and update diagrams
// not strictly needed if using two themes
document.documentElement.classList.toggle('dark', ...);

// using a single theme
themeManager.updateDiagrams();

// using multiple themes
themeManager.currentTheme = mode;

Copy

See getComputedStyle and getPropertyValue for more information on reading CSS from JS.

Gets or sets the map of theme names -> Themes for this ThemeManager.

Make sure this ThemeManager knows about a Diagram for which it should handle theming.

Finds the Theme with the specified name, or if the name is system, the preferred light or dark theme.

Finds a value in this ThemeManager's themes.

By default, this first looks in the currentTheme, then the defaultTheme. Because findTheme is called, this method also handles currentTheme being system.

The default implementation is:

return this.getValue(this.findTheme(this.currentTheme), prop, source, tprop) || this.getValue(this.findTheme(this.defaultTheme), prop, source, tprop);
Copy

This method may be overridden to search Themes in different orders. Please read the Learn page on Extensions for how to override methods and how to call this base method.

Gets a value from the given Theme.

Inform this ThemeManager that it will no longer handle theming for a given diagram.

Set a particular theme and update all associated theme bindings. Note that this will modify the named Theme object via a merge if it exists.

If passed system, this method will create/update the preferredColorScheme theme.

Updates all theme bindings and backgrounds for diagrams associated with this ThemeManager.

You should only need to call this if referencing CSS variables that may change.