# Class ThemeManager

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

- new ThemeManager(init?: Partial<ThemeManager>): 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.

  #### Parameters

  - ##### `Optional` init: Partial<ThemeManager>

    Optional initialization properties.

  #### Returns ThemeManager

## 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`

### `Readonly` preferredColorScheme
: "light" | "dark"

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

### themeMap
: Map<string, Theme>

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

## Methods

### addDiagram

- addDiagram(diagram: Diagram): ThemeManager

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

  #### Parameters

  - ##### diagram: Diagram

    A Diagram that this ThemeManager is theming.

  #### Returns ThemeManager

  this

  `see`

  removeDiagram

### 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

### `Virtual` findValue

- 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

### `Virtual` getValue

- 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

- removeDiagram(diagram: Diagram): ThemeManager

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

  this

  `see`

  addDiagram

### 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

Copyright © 1998-2024 by Northwoods Software Corporation.