Themes for Hypergrid

Synopsis

function registerTheme(name, themeObject);

function registerTheme(themeObject); // name optional when `themeObject.themeName` defined

function registerTheme(name); // unregisters a theme previously registered under name

function registerThemes(collection); // registers a whole collection of themes at once

function applyTheme(name); // uses a registered theme

function applyTheme(themeObject); // uses an unregistered theme

function applyTheme(); // removes theme; resets to default theme

Registering themes

Selected theme from this package:

Hypergrid.registerTheme(require('fin-hypergrid-themes/js/candy'));

All themes in this package:

Hypergrid.registerThemes(require('fin-hypergrid-themes'));

Build a theme from a loaded Polymer Theme CSS stylesheet (name required):

Hypergrid.registerTheme('myTheme', require('fin-hypergrid-themes').buildTheme());

To unregister:

Hypergrid.registerTheme('myTheme');

Applying themes

Hypergrid.applyTheme('myTheme'); // set a global theme shared by all grid instances
myGridInstance.applyTheme('candy'); // overlay a local theme for a particular grid instance

To remove applied theme/restore default theme:

myGridInstance.applyTheme('default');
myGridInstance.applyTheme(); // same effect

NOTE: Global theme cannot be removed.

There are also theme setters that can be used instead of applyTheme:

Hypergrid.theme = 'dark-side'; // set a global theme
grid.theme = 'candy'; // set a local theme

Interrogating the local theme

var currentTheme = grid.getTheme(); // get theme name or undefined if no theme applied

There is also a theme getter that can be used in place of getTheme:

var currentTheme = grid.theme; // get theme name or undefined if no theme applied