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.

Example

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

Methods


<static> Themes#addCustom(theme, initiatingMenu)

Adds a custom theme

Parameters:
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

Parameters:
Name Type Description
params Object

Parameters

Properties
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

Example
var UIStorage = new CIQ.NameValueStore();

var UIThemes = $("cq-themes");
UIThemes[0].initialize({
	builtInThemes: { "ciq-day": "Day", "ciq-night": "Night" },
	defaultTheme: "ciq-night",
	nameValueStore: UIStorage,
});