# Class: UibThemeChanger

## Alpha.UibThemeChanger()

A uibuilder for Node-RED Theme Changer component

## Constructor

#### new UibThemeChanger()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag

##### Properties:

Name | Type | Description
--- | --- | ---
`name` | string | Optional. Will be used to synthesize an ID if no ID is provided. attr {string} data-* - Optional. All data-* attributes are returned in the _meta prop as a _meta.data object. slot Container contents

Source:
  - alpha/uib-theme-changer.js, line 201

### Extends

- HTMLElement

### Members

#### $ :function

Mini jQuery-like shadow dom selector (see constructor)

##### Type:

- function

Source:
  - alpha/uib-theme-changer.js, line 214

#### $ :function

Mini jQuery-like shadow dom selector (see constructor)

##### Type:

- function

Source:
  - alpha/uib-theme-changer.js, line 214

#### $ :function

Mini jQuery-like shadow dom selector (see constructor)

##### Type:

- function

Source:
  - alpha/uib-theme-changer.js, line 214

#### $$ :function

Mini jQuery-like shadow dom multi-selector (see constructor)

##### Type:

- function

Source:
  - alpha/uib-theme-changer.js, line 220

#### $$ :function

Mini jQuery-like shadow dom multi-selector (see constructor)

##### Type:

- function

Source:
  - alpha/uib-theme-changer.js, line 220

#### $$ :function

Mini jQuery-like shadow dom multi-selector (see constructor)

##### Type:

- function

Source:
  - alpha/uib-theme-changer.js, line 220

#### _iCount

Holds a count of how many instances of this component are on the page that don't have their own id Used to ensure a unique id if needing to add one dynamically

Source:
  - alpha/uib-theme-changer.js, line 224

#### _iCount

Holds a count of how many instances of this component are on the page that don't have their own id Used to ensure a unique id if needing to add one dynamically

Source:
  - alpha/uib-theme-changer.js, line 224

#### _iCount

Holds a count of how many instances of this component are on the page that don't have their own id Used to ensure a unique id if needing to add one dynamically

Source:
  - alpha/uib-theme-changer.js, line 224

#### _ui

Standard _ui object to include in msgs

Source:
  - alpha/uib-theme-changer.js, line 252

#### _ui

Standard _ui object to include in msgs

Source:
  - alpha/uib-theme-changer.js, line 252

#### _ui

Standard _ui object to include in msgs

Source:
  - alpha/uib-theme-changer.js, line 252

#### opts

Runtime configuration settings

Source:
  - alpha/uib-theme-changer.js, line 227

#### opts

Runtime configuration settings

Source:
  - alpha/uib-theme-changer.js, line 227

#### opts

Runtime configuration settings

Source:
  - alpha/uib-theme-changer.js, line 227

#### scheme

What is the current scheme? 'light', 'dark' or 'auto'

Source:
  - alpha/uib-theme-changer.js, line 261

#### scheme

What is the current scheme? 'light', 'dark' or 'auto'

Source:
  - alpha/uib-theme-changer.js, line 261

#### scheme

What is the current scheme? 'light', 'dark' or 'auto'

Source:
  - alpha/uib-theme-changer.js, line 261

#### uib

Is UIBUILDER for Node-RED loaded?

Source:
  - alpha/uib-theme-changer.js, line 208

#### uib

Is UIBUILDER for Node-RED loaded?

Source:
  - alpha/uib-theme-changer.js, line 208

#### uib

Is UIBUILDER for Node-RED loaded?

Source:
  - alpha/uib-theme-changer.js, line 208

#### uibThemeSettings

Holds the uib theme settings for all pages in this domain (from/to localStorage)

Source:
  - alpha/uib-theme-changer.js, line 249

#### uibThemeSettings

Holds the uib theme settings for all pages in this domain (from/to localStorage)

Source:
  - alpha/uib-theme-changer.js, line 249

#### uibThemeSettings

Holds the uib theme settings for all pages in this domain (from/to localStorage)

Source:
  - alpha/uib-theme-changer.js, line 249

#### version

Component version

Source:
  - alpha/uib-theme-changer.js, line 203

#### version

Report the current component version string

Source:
  - alpha/uib-theme-changer.js, line 244

#### version

Component version

Source:
  - alpha/uib-theme-changer.js, line 203

#### version

Report the current component version string

Source:
  - alpha/uib-theme-changer.js, line 244

#### version

Component version

Source:
  - alpha/uib-theme-changer.js, line 203

#### version

Report the current component version string

Source:
  - alpha/uib-theme-changer.js, line 244

#### (static) observedAttributes

Makes HTML attribute change watched

Source:
  - alpha/uib-theme-changer.js, line 233

#### (static) observedAttributes

Makes HTML attribute change watched

Source:
  - alpha/uib-theme-changer.js, line 233

#### (static) observedAttributes

Makes HTML attribute change watched

Source:
  - alpha/uib-theme-changer.js, line 233

### Methods

#### _uibMsgHandler(evt)

Handle a `uibuilder:msg:_ui:update:${this.id}` custom event

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | CustomEvent | uibuilder `uibuilder:msg:_ui:update:${this.id}` custom event evt.details contains the data

Source:
  - alpha/uib-theme-changer.js, line 469

#### _uibMsgHandler(evt)

Handle a `uibuilder:msg:_ui:update:${this.id}` custom event

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | CustomEvent | uibuilder `uibuilder:msg:_ui:update:${this.id}` custom event evt.details contains the data

Source:
  - alpha/uib-theme-changer.js, line 469

#### _uibMsgHandler(evt)

Handle a `uibuilder:msg:_ui:update:${this.id}` custom event

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | CustomEvent | uibuilder `uibuilder:msg:_ui:update:${this.id}` custom event evt.details contains the data

Source:
  - alpha/uib-theme-changer.js, line 469

#### attributeChangedCallback(attrib, oldVal, newVal)

Runs when an observed attribute changes - Note: values are always strings

##### Parameters:

Name | Type | Description
--- | --- | ---
`attrib` | string | Name of watched attribute that has changed
`oldVal` | string | The previous attribute value
`newVal` | string | The new attribute value

Source:
  - alpha/uib-theme-changer.js, line 396

#### attributeChangedCallback(attrib, oldVal, newVal)

Runs when an observed attribute changes - Note: values are always strings

##### Parameters:

Name | Type | Description
--- | --- | ---
`attrib` | string | Name of watched attribute that has changed
`oldVal` | string | The previous attribute value
`newVal` | string | The new attribute value

Source:
  - alpha/uib-theme-changer.js, line 396

#### attributeChangedCallback(attrib, oldVal, newVal)

Runs when an observed attribute changes - Note: values are always strings

##### Parameters:

Name | Type | Description
--- | --- | ---
`attrib` | string | Name of watched attribute that has changed
`oldVal` | string | The previous attribute value
`newVal` | string | The new attribute value

Source:
  - alpha/uib-theme-changer.js, line 396

#### config(config) → {object}

OPTIONAL. Update runtime configuration, return complete config

##### Parameters:

Name | Type | Description
--- | --- | ---
`config` | object | undefined | If present, partial or full set of options. If undefined, fn returns the current full option settings

Source:
  - alpha/uib-theme-changer.js, line 439

##### Returns:

The current full option settings

Type
  object

#### config(config) → {object}

OPTIONAL. Update runtime configuration, return complete config

##### Parameters:

Name | Type | Description
--- | --- | ---
`config` | object | undefined | If present, partial or full set of options. If undefined, fn returns the current full option settings

Source:
  - alpha/uib-theme-changer.js, line 439

##### Returns:

The current full option settings

Type
  object

#### config(config) → {object}

OPTIONAL. Update runtime configuration, return complete config

##### Parameters:

Name | Type | Description
--- | --- | ---
`config` | object | undefined | If present, partial or full set of options. If undefined, fn returns the current full option settings

Source:
  - alpha/uib-theme-changer.js, line 439

##### Returns:

The current full option settings

Type
  object

#### connectedCallback()

Runs when an instance is added to the DOM

Source:
  - alpha/uib-theme-changer.js, line 279

#### connectedCallback()

Runs when an instance is added to the DOM

Source:
  - alpha/uib-theme-changer.js, line 279

#### connectedCallback()

Runs when an instance is added to the DOM

Source:
  - alpha/uib-theme-changer.js, line 279

#### disconnectedCallback()

Runs when an instance is removed from the DOM

Source:
  - alpha/uib-theme-changer.js, line 376

#### disconnectedCallback()

Runs when an instance is removed from the DOM

Source:
  - alpha/uib-theme-changer.js, line 376

#### disconnectedCallback()

Runs when an instance is removed from the DOM

Source:
  - alpha/uib-theme-changer.js, line 376

#### (async) doInheritStyles(url)

Optionally apply an external linked style sheet (called from connectedCallback)

##### Parameters:

Name | Type | Description
--- | --- | ---
`url` | * | The URL for the linked style sheet

Source:
  - alpha/uib-theme-changer.js, line 422

#### (async) doInheritStyles(url)

Optionally apply an external linked style sheet (called from connectedCallback)

##### Parameters:

Name | Type | Description
--- | --- | ---
`url` | * | The URL for the linked style sheet

Source:
  - alpha/uib-theme-changer.js, line 422

#### (async) doInheritStyles(url)

Optionally apply an external linked style sheet (called from connectedCallback)

##### Parameters:

Name | Type | Description
--- | --- | ---
`url` | * | The URL for the linked style sheet

Source:
  - alpha/uib-theme-changer.js, line 422

#### evtClickChooser(evt)

Handle the light/dark theme chooser. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 543

#### evtClickChooser(evt)

Handle the light/dark theme chooser. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 543

#### evtClickChooser(evt)

Handle the light/dark theme chooser. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 543

#### evtClickContrast(evt)

Handle contrast click. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | Click event

Source:
  - alpha/uib-theme-changer.js, line 578

#### evtClickContrast(evt)

Handle contrast click. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | Click event

Source:
  - alpha/uib-theme-changer.js, line 578

#### evtClickContrast(evt)

Handle contrast click. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | Click event

Source:
  - alpha/uib-theme-changer.js, line 578

#### evtClickReset(evt)

Handle reset button. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 558

#### evtClickReset(evt)

Handle reset button. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 558

#### evtClickReset(evt)

Handle reset button. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 558

#### evtClickToggle(evt)

TODO Handle the icon

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 536

#### evtClickToggle(evt)

TODO Handle the icon

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 536

#### evtClickToggle(evt)

TODO Handle the icon

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 536

#### setTheme(theme) → {string}

##### Parameters:

Name | Type | Description
--- | --- | ---
`theme` | * | _

Source:
  - alpha/uib-theme-changer.js, line 487

##### Returns:

_

Type
  string

#### setTheme(theme) → {string}

##### Parameters:

Name | Type | Description
--- | --- | ---
`theme` | * | _

Source:
  - alpha/uib-theme-changer.js, line 487

##### Returns:

_

Type
  string

#### setTheme(theme) → {string}

##### Parameters:

Name | Type | Description
--- | --- | ---
`theme` | * | _

Source:
  - alpha/uib-theme-changer.js, line 487

##### Returns:

_

Type
  string

#### (static) deepAssign(target, …sources) → {object}

Utility object deep merge fn

##### Parameters:

Name | Type | Attributes | Description
--- | --- | --- | ---
`target` | object |  | Merge target object
`sources` | object | <repeatable> | 1 or more source objects to merge

Source:
  - alpha/uib-theme-changer.js, line 451

##### Returns:

Deep merged object

Type
  object

#### (static) deepAssign(target, …sources) → {object}

Utility object deep merge fn

##### Parameters:

Name | Type | Attributes | Description
--- | --- | --- | ---
`target` | object |  | Merge target object
`sources` | object | <repeatable> | 1 or more source objects to merge

Source:
  - alpha/uib-theme-changer.js, line 451

##### Returns:

Deep merged object

Type
  object

#### (static) deepAssign(target, …sources) → {object}

Utility object deep merge fn

##### Parameters:

Name | Type | Attributes | Description
--- | --- | --- | ---
`target` | object |  | Merge target object
`sources` | object | <repeatable> | 1 or more source objects to merge

Source:
  - alpha/uib-theme-changer.js, line 451

##### Returns:

Deep merged object

Type
  object

## Alpha.UibThemeChanger()

A uibuilder for Node-RED Theme Changer component

## Constructor

#### new UibThemeChanger()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag

##### Properties:

Name | Type | Description
--- | --- | ---
`name` | string | Optional. Will be used to synthesize an ID if no ID is provided. attr {string} data-* - Optional. All data-* attributes are returned in the _meta prop as a _meta.data object. slot Container contents

Source:
  - alpha/uib-theme-changer.js, line 201

### Extends

- HTMLElement

### Members

#### $ :function

Mini jQuery-like shadow dom selector (see constructor)

##### Type:

- function

Source:
  - alpha/uib-theme-changer.js, line 214

#### $ :function

Mini jQuery-like shadow dom selector (see constructor)

##### Type:

- function

Source:
  - alpha/uib-theme-changer.js, line 214

#### $ :function

Mini jQuery-like shadow dom selector (see constructor)

##### Type:

- function

Source:
  - alpha/uib-theme-changer.js, line 214

#### $$ :function

Mini jQuery-like shadow dom multi-selector (see constructor)

##### Type:

- function

Source:
  - alpha/uib-theme-changer.js, line 220

#### $$ :function

Mini jQuery-like shadow dom multi-selector (see constructor)

##### Type:

- function

Source:
  - alpha/uib-theme-changer.js, line 220

#### $$ :function

Mini jQuery-like shadow dom multi-selector (see constructor)

##### Type:

- function

Source:
  - alpha/uib-theme-changer.js, line 220

#### _iCount

Holds a count of how many instances of this component are on the page that don't have their own id Used to ensure a unique id if needing to add one dynamically

Source:
  - alpha/uib-theme-changer.js, line 224

#### _iCount

Holds a count of how many instances of this component are on the page that don't have their own id Used to ensure a unique id if needing to add one dynamically

Source:
  - alpha/uib-theme-changer.js, line 224

#### _iCount

Holds a count of how many instances of this component are on the page that don't have their own id Used to ensure a unique id if needing to add one dynamically

Source:
  - alpha/uib-theme-changer.js, line 224

#### _ui

Standard _ui object to include in msgs

Source:
  - alpha/uib-theme-changer.js, line 252

#### _ui

Standard _ui object to include in msgs

Source:
  - alpha/uib-theme-changer.js, line 252

#### _ui

Standard _ui object to include in msgs

Source:
  - alpha/uib-theme-changer.js, line 252

#### opts

Runtime configuration settings

Source:
  - alpha/uib-theme-changer.js, line 227

#### opts

Runtime configuration settings

Source:
  - alpha/uib-theme-changer.js, line 227

#### opts

Runtime configuration settings

Source:
  - alpha/uib-theme-changer.js, line 227

#### scheme

What is the current scheme? 'light', 'dark' or 'auto'

Source:
  - alpha/uib-theme-changer.js, line 261

#### scheme

What is the current scheme? 'light', 'dark' or 'auto'

Source:
  - alpha/uib-theme-changer.js, line 261

#### scheme

What is the current scheme? 'light', 'dark' or 'auto'

Source:
  - alpha/uib-theme-changer.js, line 261

#### uib

Is UIBUILDER for Node-RED loaded?

Source:
  - alpha/uib-theme-changer.js, line 208

#### uib

Is UIBUILDER for Node-RED loaded?

Source:
  - alpha/uib-theme-changer.js, line 208

#### uib

Is UIBUILDER for Node-RED loaded?

Source:
  - alpha/uib-theme-changer.js, line 208

#### uibThemeSettings

Holds the uib theme settings for all pages in this domain (from/to localStorage)

Source:
  - alpha/uib-theme-changer.js, line 249

#### uibThemeSettings

Holds the uib theme settings for all pages in this domain (from/to localStorage)

Source:
  - alpha/uib-theme-changer.js, line 249

#### uibThemeSettings

Holds the uib theme settings for all pages in this domain (from/to localStorage)

Source:
  - alpha/uib-theme-changer.js, line 249

#### version

Component version

Source:
  - alpha/uib-theme-changer.js, line 203

#### version

Report the current component version string

Source:
  - alpha/uib-theme-changer.js, line 244

#### version

Component version

Source:
  - alpha/uib-theme-changer.js, line 203

#### version

Report the current component version string

Source:
  - alpha/uib-theme-changer.js, line 244

#### version

Component version

Source:
  - alpha/uib-theme-changer.js, line 203

#### version

Report the current component version string

Source:
  - alpha/uib-theme-changer.js, line 244

#### (static) observedAttributes

Makes HTML attribute change watched

Source:
  - alpha/uib-theme-changer.js, line 233

#### (static) observedAttributes

Makes HTML attribute change watched

Source:
  - alpha/uib-theme-changer.js, line 233

#### (static) observedAttributes

Makes HTML attribute change watched

Source:
  - alpha/uib-theme-changer.js, line 233

### Methods

#### _uibMsgHandler(evt)

Handle a `uibuilder:msg:_ui:update:${this.id}` custom event

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | CustomEvent | uibuilder `uibuilder:msg:_ui:update:${this.id}` custom event evt.details contains the data

Source:
  - alpha/uib-theme-changer.js, line 469

#### _uibMsgHandler(evt)

Handle a `uibuilder:msg:_ui:update:${this.id}` custom event

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | CustomEvent | uibuilder `uibuilder:msg:_ui:update:${this.id}` custom event evt.details contains the data

Source:
  - alpha/uib-theme-changer.js, line 469

#### _uibMsgHandler(evt)

Handle a `uibuilder:msg:_ui:update:${this.id}` custom event

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | CustomEvent | uibuilder `uibuilder:msg:_ui:update:${this.id}` custom event evt.details contains the data

Source:
  - alpha/uib-theme-changer.js, line 469

#### attributeChangedCallback(attrib, oldVal, newVal)

Runs when an observed attribute changes - Note: values are always strings

##### Parameters:

Name | Type | Description
--- | --- | ---
`attrib` | string | Name of watched attribute that has changed
`oldVal` | string | The previous attribute value
`newVal` | string | The new attribute value

Source:
  - alpha/uib-theme-changer.js, line 396

#### attributeChangedCallback(attrib, oldVal, newVal)

Runs when an observed attribute changes - Note: values are always strings

##### Parameters:

Name | Type | Description
--- | --- | ---
`attrib` | string | Name of watched attribute that has changed
`oldVal` | string | The previous attribute value
`newVal` | string | The new attribute value

Source:
  - alpha/uib-theme-changer.js, line 396

#### attributeChangedCallback(attrib, oldVal, newVal)

Runs when an observed attribute changes - Note: values are always strings

##### Parameters:

Name | Type | Description
--- | --- | ---
`attrib` | string | Name of watched attribute that has changed
`oldVal` | string | The previous attribute value
`newVal` | string | The new attribute value

Source:
  - alpha/uib-theme-changer.js, line 396

#### config(config) → {object}

OPTIONAL. Update runtime configuration, return complete config

##### Parameters:

Name | Type | Description
--- | --- | ---
`config` | object | undefined | If present, partial or full set of options. If undefined, fn returns the current full option settings

Source:
  - alpha/uib-theme-changer.js, line 439

##### Returns:

The current full option settings

Type
  object

#### config(config) → {object}

OPTIONAL. Update runtime configuration, return complete config

##### Parameters:

Name | Type | Description
--- | --- | ---
`config` | object | undefined | If present, partial or full set of options. If undefined, fn returns the current full option settings

Source:
  - alpha/uib-theme-changer.js, line 439

##### Returns:

The current full option settings

Type
  object

#### config(config) → {object}

OPTIONAL. Update runtime configuration, return complete config

##### Parameters:

Name | Type | Description
--- | --- | ---
`config` | object | undefined | If present, partial or full set of options. If undefined, fn returns the current full option settings

Source:
  - alpha/uib-theme-changer.js, line 439

##### Returns:

The current full option settings

Type
  object

#### connectedCallback()

Runs when an instance is added to the DOM

Source:
  - alpha/uib-theme-changer.js, line 279

#### connectedCallback()

Runs when an instance is added to the DOM

Source:
  - alpha/uib-theme-changer.js, line 279

#### connectedCallback()

Runs when an instance is added to the DOM

Source:
  - alpha/uib-theme-changer.js, line 279

#### disconnectedCallback()

Runs when an instance is removed from the DOM

Source:
  - alpha/uib-theme-changer.js, line 376

#### disconnectedCallback()

Runs when an instance is removed from the DOM

Source:
  - alpha/uib-theme-changer.js, line 376

#### disconnectedCallback()

Runs when an instance is removed from the DOM

Source:
  - alpha/uib-theme-changer.js, line 376

#### (async) doInheritStyles(url)

Optionally apply an external linked style sheet (called from connectedCallback)

##### Parameters:

Name | Type | Description
--- | --- | ---
`url` | * | The URL for the linked style sheet

Source:
  - alpha/uib-theme-changer.js, line 422

#### (async) doInheritStyles(url)

Optionally apply an external linked style sheet (called from connectedCallback)

##### Parameters:

Name | Type | Description
--- | --- | ---
`url` | * | The URL for the linked style sheet

Source:
  - alpha/uib-theme-changer.js, line 422

#### (async) doInheritStyles(url)

Optionally apply an external linked style sheet (called from connectedCallback)

##### Parameters:

Name | Type | Description
--- | --- | ---
`url` | * | The URL for the linked style sheet

Source:
  - alpha/uib-theme-changer.js, line 422

#### evtClickChooser(evt)

Handle the light/dark theme chooser. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 543

#### evtClickChooser(evt)

Handle the light/dark theme chooser. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 543

#### evtClickChooser(evt)

Handle the light/dark theme chooser. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 543

#### evtClickContrast(evt)

Handle contrast click. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | Click event

Source:
  - alpha/uib-theme-changer.js, line 578

#### evtClickContrast(evt)

Handle contrast click. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | Click event

Source:
  - alpha/uib-theme-changer.js, line 578

#### evtClickContrast(evt)

Handle contrast click. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | Click event

Source:
  - alpha/uib-theme-changer.js, line 578

#### evtClickReset(evt)

Handle reset button. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 558

#### evtClickReset(evt)

Handle reset button. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 558

#### evtClickReset(evt)

Handle reset button. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 558

#### evtClickToggle(evt)

TODO Handle the icon

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 536

#### evtClickToggle(evt)

TODO Handle the icon

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 536

#### evtClickToggle(evt)

TODO Handle the icon

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 536

#### setTheme(theme) → {string}

##### Parameters:

Name | Type | Description
--- | --- | ---
`theme` | * | _

Source:
  - alpha/uib-theme-changer.js, line 487

##### Returns:

_

Type
  string

#### setTheme(theme) → {string}

##### Parameters:

Name | Type | Description
--- | --- | ---
`theme` | * | _

Source:
  - alpha/uib-theme-changer.js, line 487

##### Returns:

_

Type
  string

#### setTheme(theme) → {string}

##### Parameters:

Name | Type | Description
--- | --- | ---
`theme` | * | _

Source:
  - alpha/uib-theme-changer.js, line 487

##### Returns:

_

Type
  string

#### (static) deepAssign(target, …sources) → {object}

Utility object deep merge fn

##### Parameters:

Name | Type | Attributes | Description
--- | --- | --- | ---
`target` | object |  | Merge target object
`sources` | object | <repeatable> | 1 or more source objects to merge

Source:
  - alpha/uib-theme-changer.js, line 451

##### Returns:

Deep merged object

Type
  object

#### (static) deepAssign(target, …sources) → {object}

Utility object deep merge fn

##### Parameters:

Name | Type | Attributes | Description
--- | --- | --- | ---
`target` | object |  | Merge target object
`sources` | object | <repeatable> | 1 or more source objects to merge

Source:
  - alpha/uib-theme-changer.js, line 451

##### Returns:

Deep merged object

Type
  object

#### (static) deepAssign(target, …sources) → {object}

Utility object deep merge fn

##### Parameters:

Name | Type | Attributes | Description
--- | --- | --- | ---
`target` | object |  | Merge target object
`sources` | object | <repeatable> | 1 or more source objects to merge

Source:
  - alpha/uib-theme-changer.js, line 451

##### Returns:

Deep merged object

Type
  object

## Alpha.UibThemeChanger()

A uibuilder for Node-RED Theme Changer component

## Constructor

#### new UibThemeChanger()

Define a new zero dependency custom web component ECMA module that can be used as an HTML tag

##### Properties:

Name | Type | Description
--- | --- | ---
`name` | string | Optional. Will be used to synthesize an ID if no ID is provided. attr {string} data-* - Optional. All data-* attributes are returned in the _meta prop as a _meta.data object. slot Container contents

Source:
  - alpha/uib-theme-changer.js, line 201

### Extends

- HTMLElement

### Members

#### $ :function

Mini jQuery-like shadow dom selector (see constructor)

##### Type:

- function

Source:
  - alpha/uib-theme-changer.js, line 214

#### $ :function

Mini jQuery-like shadow dom selector (see constructor)

##### Type:

- function

Source:
  - alpha/uib-theme-changer.js, line 214

#### $ :function

Mini jQuery-like shadow dom selector (see constructor)

##### Type:

- function

Source:
  - alpha/uib-theme-changer.js, line 214

#### $$ :function

Mini jQuery-like shadow dom multi-selector (see constructor)

##### Type:

- function

Source:
  - alpha/uib-theme-changer.js, line 220

#### $$ :function

Mini jQuery-like shadow dom multi-selector (see constructor)

##### Type:

- function

Source:
  - alpha/uib-theme-changer.js, line 220

#### $$ :function

Mini jQuery-like shadow dom multi-selector (see constructor)

##### Type:

- function

Source:
  - alpha/uib-theme-changer.js, line 220

#### _iCount

Holds a count of how many instances of this component are on the page that don't have their own id Used to ensure a unique id if needing to add one dynamically

Source:
  - alpha/uib-theme-changer.js, line 224

#### _iCount

Holds a count of how many instances of this component are on the page that don't have their own id Used to ensure a unique id if needing to add one dynamically

Source:
  - alpha/uib-theme-changer.js, line 224

#### _iCount

Holds a count of how many instances of this component are on the page that don't have their own id Used to ensure a unique id if needing to add one dynamically

Source:
  - alpha/uib-theme-changer.js, line 224

#### _ui

Standard _ui object to include in msgs

Source:
  - alpha/uib-theme-changer.js, line 252

#### _ui

Standard _ui object to include in msgs

Source:
  - alpha/uib-theme-changer.js, line 252

#### _ui

Standard _ui object to include in msgs

Source:
  - alpha/uib-theme-changer.js, line 252

#### opts

Runtime configuration settings

Source:
  - alpha/uib-theme-changer.js, line 227

#### opts

Runtime configuration settings

Source:
  - alpha/uib-theme-changer.js, line 227

#### opts

Runtime configuration settings

Source:
  - alpha/uib-theme-changer.js, line 227

#### scheme

What is the current scheme? 'light', 'dark' or 'auto'

Source:
  - alpha/uib-theme-changer.js, line 261

#### scheme

What is the current scheme? 'light', 'dark' or 'auto'

Source:
  - alpha/uib-theme-changer.js, line 261

#### scheme

What is the current scheme? 'light', 'dark' or 'auto'

Source:
  - alpha/uib-theme-changer.js, line 261

#### uib

Is UIBUILDER for Node-RED loaded?

Source:
  - alpha/uib-theme-changer.js, line 208

#### uib

Is UIBUILDER for Node-RED loaded?

Source:
  - alpha/uib-theme-changer.js, line 208

#### uib

Is UIBUILDER for Node-RED loaded?

Source:
  - alpha/uib-theme-changer.js, line 208

#### uibThemeSettings

Holds the uib theme settings for all pages in this domain (from/to localStorage)

Source:
  - alpha/uib-theme-changer.js, line 249

#### uibThemeSettings

Holds the uib theme settings for all pages in this domain (from/to localStorage)

Source:
  - alpha/uib-theme-changer.js, line 249

#### uibThemeSettings

Holds the uib theme settings for all pages in this domain (from/to localStorage)

Source:
  - alpha/uib-theme-changer.js, line 249

#### version

Component version

Source:
  - alpha/uib-theme-changer.js, line 203

#### version

Report the current component version string

Source:
  - alpha/uib-theme-changer.js, line 244

#### version

Component version

Source:
  - alpha/uib-theme-changer.js, line 203

#### version

Report the current component version string

Source:
  - alpha/uib-theme-changer.js, line 244

#### version

Component version

Source:
  - alpha/uib-theme-changer.js, line 203

#### version

Report the current component version string

Source:
  - alpha/uib-theme-changer.js, line 244

#### (static) observedAttributes

Makes HTML attribute change watched

Source:
  - alpha/uib-theme-changer.js, line 233

#### (static) observedAttributes

Makes HTML attribute change watched

Source:
  - alpha/uib-theme-changer.js, line 233

#### (static) observedAttributes

Makes HTML attribute change watched

Source:
  - alpha/uib-theme-changer.js, line 233

### Methods

#### _uibMsgHandler(evt)

Handle a `uibuilder:msg:_ui:update:${this.id}` custom event

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | CustomEvent | uibuilder `uibuilder:msg:_ui:update:${this.id}` custom event evt.details contains the data

Source:
  - alpha/uib-theme-changer.js, line 469

#### _uibMsgHandler(evt)

Handle a `uibuilder:msg:_ui:update:${this.id}` custom event

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | CustomEvent | uibuilder `uibuilder:msg:_ui:update:${this.id}` custom event evt.details contains the data

Source:
  - alpha/uib-theme-changer.js, line 469

#### _uibMsgHandler(evt)

Handle a `uibuilder:msg:_ui:update:${this.id}` custom event

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | CustomEvent | uibuilder `uibuilder:msg:_ui:update:${this.id}` custom event evt.details contains the data

Source:
  - alpha/uib-theme-changer.js, line 469

#### attributeChangedCallback(attrib, oldVal, newVal)

Runs when an observed attribute changes - Note: values are always strings

##### Parameters:

Name | Type | Description
--- | --- | ---
`attrib` | string | Name of watched attribute that has changed
`oldVal` | string | The previous attribute value
`newVal` | string | The new attribute value

Source:
  - alpha/uib-theme-changer.js, line 396

#### attributeChangedCallback(attrib, oldVal, newVal)

Runs when an observed attribute changes - Note: values are always strings

##### Parameters:

Name | Type | Description
--- | --- | ---
`attrib` | string | Name of watched attribute that has changed
`oldVal` | string | The previous attribute value
`newVal` | string | The new attribute value

Source:
  - alpha/uib-theme-changer.js, line 396

#### attributeChangedCallback(attrib, oldVal, newVal)

Runs when an observed attribute changes - Note: values are always strings

##### Parameters:

Name | Type | Description
--- | --- | ---
`attrib` | string | Name of watched attribute that has changed
`oldVal` | string | The previous attribute value
`newVal` | string | The new attribute value

Source:
  - alpha/uib-theme-changer.js, line 396

#### config(config) → {object}

OPTIONAL. Update runtime configuration, return complete config

##### Parameters:

Name | Type | Description
--- | --- | ---
`config` | object | undefined | If present, partial or full set of options. If undefined, fn returns the current full option settings

Source:
  - alpha/uib-theme-changer.js, line 439

##### Returns:

The current full option settings

Type
  object

#### config(config) → {object}

OPTIONAL. Update runtime configuration, return complete config

##### Parameters:

Name | Type | Description
--- | --- | ---
`config` | object | undefined | If present, partial or full set of options. If undefined, fn returns the current full option settings

Source:
  - alpha/uib-theme-changer.js, line 439

##### Returns:

The current full option settings

Type
  object

#### config(config) → {object}

OPTIONAL. Update runtime configuration, return complete config

##### Parameters:

Name | Type | Description
--- | --- | ---
`config` | object | undefined | If present, partial or full set of options. If undefined, fn returns the current full option settings

Source:
  - alpha/uib-theme-changer.js, line 439

##### Returns:

The current full option settings

Type
  object

#### connectedCallback()

Runs when an instance is added to the DOM

Source:
  - alpha/uib-theme-changer.js, line 279

#### connectedCallback()

Runs when an instance is added to the DOM

Source:
  - alpha/uib-theme-changer.js, line 279

#### connectedCallback()

Runs when an instance is added to the DOM

Source:
  - alpha/uib-theme-changer.js, line 279

#### disconnectedCallback()

Runs when an instance is removed from the DOM

Source:
  - alpha/uib-theme-changer.js, line 376

#### disconnectedCallback()

Runs when an instance is removed from the DOM

Source:
  - alpha/uib-theme-changer.js, line 376

#### disconnectedCallback()

Runs when an instance is removed from the DOM

Source:
  - alpha/uib-theme-changer.js, line 376

#### (async) doInheritStyles(url)

Optionally apply an external linked style sheet (called from connectedCallback)

##### Parameters:

Name | Type | Description
--- | --- | ---
`url` | * | The URL for the linked style sheet

Source:
  - alpha/uib-theme-changer.js, line 422

#### (async) doInheritStyles(url)

Optionally apply an external linked style sheet (called from connectedCallback)

##### Parameters:

Name | Type | Description
--- | --- | ---
`url` | * | The URL for the linked style sheet

Source:
  - alpha/uib-theme-changer.js, line 422

#### (async) doInheritStyles(url)

Optionally apply an external linked style sheet (called from connectedCallback)

##### Parameters:

Name | Type | Description
--- | --- | ---
`url` | * | The URL for the linked style sheet

Source:
  - alpha/uib-theme-changer.js, line 422

#### evtClickChooser(evt)

Handle the light/dark theme chooser. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 543

#### evtClickChooser(evt)

Handle the light/dark theme chooser. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 543

#### evtClickChooser(evt)

Handle the light/dark theme chooser. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 543

#### evtClickContrast(evt)

Handle contrast click. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | Click event

Source:
  - alpha/uib-theme-changer.js, line 578

#### evtClickContrast(evt)

Handle contrast click. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | Click event

Source:
  - alpha/uib-theme-changer.js, line 578

#### evtClickContrast(evt)

Handle contrast click. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | Click event

Source:
  - alpha/uib-theme-changer.js, line 578

#### evtClickReset(evt)

Handle reset button. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 558

#### evtClickReset(evt)

Handle reset button. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 558

#### evtClickReset(evt)

Handle reset button. Override contrast css variables and set appropriate class on html

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 558

#### evtClickToggle(evt)

TODO Handle the icon

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 536

#### evtClickToggle(evt)

TODO Handle the icon

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 536

#### evtClickToggle(evt)

TODO Handle the icon

##### Parameters:

Name | Type | Description
--- | --- | ---
`evt` | MouseEvent | _

Source:
  - alpha/uib-theme-changer.js, line 536

#### setTheme(theme) → {string}

##### Parameters:

Name | Type | Description
--- | --- | ---
`theme` | * | _

Source:
  - alpha/uib-theme-changer.js, line 487

##### Returns:

_

Type
  string

#### setTheme(theme) → {string}

##### Parameters:

Name | Type | Description
--- | --- | ---
`theme` | * | _

Source:
  - alpha/uib-theme-changer.js, line 487

##### Returns:

_

Type
  string

#### setTheme(theme) → {string}

##### Parameters:

Name | Type | Description
--- | --- | ---
`theme` | * | _

Source:
  - alpha/uib-theme-changer.js, line 487

##### Returns:

_

Type
  string

#### (static) deepAssign(target, …sources) → {object}

Utility object deep merge fn

##### Parameters:

Name | Type | Attributes | Description
--- | --- | --- | ---
`target` | object |  | Merge target object
`sources` | object | <repeatable> | 1 or more source objects to merge

Source:
  - alpha/uib-theme-changer.js, line 451

##### Returns:

Deep merged object

Type
  object

#### (static) deepAssign(target, …sources) → {object}

Utility object deep merge fn

##### Parameters:

Name | Type | Attributes | Description
--- | --- | --- | ---
`target` | object |  | Merge target object
`sources` | object | <repeatable> | 1 or more source objects to merge

Source:
  - alpha/uib-theme-changer.js, line 451

##### Returns:

Deep merged object

Type
  object

#### (static) deepAssign(target, …sources) → {object}

Utility object deep merge fn

##### Parameters:

Name | Type | Attributes | Description
--- | --- | --- | ---
`target` | object |  | Merge target object
`sources` | object | <repeatable> | 1 or more source objects to merge

Source:
  - alpha/uib-theme-changer.js, line 451

##### Returns:

Deep merged object

Type
  object