Namespace: cq-themes

WebComponents. cq-themes

Themes web component <cq-themes>.

This web component has two functions. The first is displaying available themes in a menu. The second is providing a theme dialog for entering a new theme.

Built in themes are merely the names of classes that will be added to the top element of the UIContext when selected.


	<cq-themes-builtin cq-no-close>
	<cq-themes-custom cq-no-close>
	<cq-separator cq-partial></cq-separator>
	<cq-item stxtap="newTheme()">
		<cq-plus></cq-plus> New Theme{" "}


<static> Themes#addCustom(theme, initiatingMenu)

Adds a custom theme

Name Type Description
theme object

The theme descriptor

initiatingMenu Themes

The menu which initially called ThemeDialog. This is used in order to save the new theme as the current theme.

<static> Themes#initialize(params)

Initialize the web component

Name Type Description
params Object


Name Type Argument Description
builtInThemes Object <optional>

Object map of built in theme names, display names

defaultTheme Object <optional>

The default built in theme to use

nameValueStore Object <optional>

A CIQ.NameValueStore object for fetching and saving theme state

id string <optional>

id which can be used to disambiguate when multiple charts are on the screen

var UIStorage = new CIQ.NameValueStore();

var UIThemes = document.querySelector("cq-themes");
	builtInThemes: { "ciq-day": "Day", "ciq-night": "Night" },
	defaultTheme: "ciq-night",
	nameValueStore: UIStorage,