Class ThemeManager

GoJS® Diagramming Components
version 3.0.15
by Northwoods Software®

This class is responsible for managing a Diagram's theming (or multiple Diagrams, if shared).

Read more about theming at Theming.

Your templates can make use of the values held by the current Theme by calling GraphObject.theme or GraphObject.themeData or GraphObject.themeModel methods, or by adding a ThemeBinding to a GraphObject when using GraphObject.make. All theme bindings are OneWay only -- from source data to target GraphObject property.

Use GraphObject.theme to look up a value directly from the current Theme. Use GraphObject.themeData to look up a value in the current Theme based on the value of a data property. Use GraphObject.themeModel to look up a value in the current Theme based on the value of a data property on the Model.modelData shared object.

For example:

myDiagram.nodeTemplate =
new go.Node('Auto').add(
new go.Shape('RoundedRectangle', { strokeWidth: 2 })
.theme('fill', 'primary') // Shape.fill is set to the current theme's colors.primary
.theme('stroke', 'border'), // Shape.stroke is set to the current theme's colors.border
new go.TextBlock({ margin: 8 })
.bind('text', 'key')
.theme('stroke', 'text') // stroke color is a dark or light gray
);

See Themes for the definitions of the two predefined Themes that are normally used.

There are additional theming resources defined in Themes.js in the extensions or extensionsJSM directories.

since

3.0

Index

Constructors

Accessors

  • 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.

    defaultValue

    false

  • 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.

    defaultValue

    light

  • 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.

    defaultValue

    light

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

Methods

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

    Parameters

    Returns this

    this

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

    Parameters

    • themeName: string

      the theme name to get from themeMap

    Returns Theme

    a Theme, or undefined if the Theme was not found

  • 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);
    

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

    Parameters

    • prop: string | number | string[]

      a property to search for in the Theme, also accepting '.'-separated paths, an array of strings representing a path, or an index to an array element

    • Optional source: string | string[]

      where to perform the lookup within the Theme object

    • Optional tprop: string

      an optional target property name, used if a full path is not provided, which can determine the property on the Theme object to search via Theme.targetPropertyMap

    Returns any

    the value found, or undefined if not found

  • Gets a value from the given Theme.

    Parameters

    • theme: Theme

      the Theme to search

    • prop: string | number | string[]

      a property to search for in the Theme, also accepting '.'-separated paths, an array of strings representing a path, or an index to an array element

    • Optional source: string | string[]

      where to perform the lookup within the Theme object

    • Optional tprop: string

      an optional target property name, used if a full path is not provided, which can determine the property on the Theme object to search via Theme.targetPropertyMap

    Returns any

    the value in the given Theme, or undefined if not found

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

    Parameters

    • diagram: Diagram

      A Diagram that this ThemeManager should no longer theme.

    Returns this

    this

  • 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.

    Parameters

    • themeName: string

      which theme to change, or the empty string to update the default theme

    • props: Partial<Theme>

      a partial Theme object to merge into the given theme or add as a new theme

    Returns this

    this