Class ThemeManager

GoJS® Diagramming Components
version 3.0.1
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

constructor

Accessors

changesDivBackground currentTheme defaultTheme preferredColorScheme themeMap

Methods

addDiagram findTheme findValue getValue removeDiagram set

Constructors

constructor

Accessors

changesDivBackground
: boolean

  • 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

currentTheme
: string

  • 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

defaultTheme
: string

  • 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

ReadonlypreferredColorScheme
: "light" | "dark"

themeMap
: Map<string, Theme>

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

Methods

addDiagram

findTheme

  • findTheme(themeName: string): Theme

  • 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

VirtualfindValue

  • findValue(prop: string | number | string[], source?: string | string[], tprop?: string): any

  • 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

VirtualgetValue

  • getValue(theme: Theme, prop: string | number | string[], source?: string | string[], tprop?: string): any

  • 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

removeDiagram

set

  • set(themeName: string, props: Partial<Theme>): ThemeManager

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

    this

On This Page

Theme

Copyright © 1998-2024 by Northwoods Software Corporation.