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


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.


Themes#initialize(params)

Initalize the web componenet

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
	});