Stylesheet Switcher

Stylesheet Switcher is a JS component that can switch-on one stylesheet from a set of stylesheets. This behaviour is useful when rendering a web site that supports multiple themes.

Usage

name: StylesheetSwitcher

Example

Code Example

<script>
  var comp = new StylesheetSwitcher({
    target: document.querySelector('test-ssswitcher'),
    data: {
      id: 'mySSS',
      label: 'Theme:',
      stylesheets: [
        {label: 'Light', linkHrefContains: 'light'},
        {label: 'Dark', linkHrefContains: 'dark'},
      ],
    },
  });

  comp.on('selectionChange', console.log);
  comp.setSelected('Light');
</script>
<style>
  test-ssswitcher div {
    display: inline-block;
    background: yellow;
    padding: 5px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.2) -2px 2px 10px;
  }
  test-ssswitcher label {
    display: block;
    color: #000;
  }
</style>

General Info

  • This directive executes at priority level 0.

Arguments

Param Type Details
stylesheets Object[]

List of stylesheets to switch between

stylesheets[].label string

The display name of the stylesheet

stylesheets[].linkHrefContains string

A string that should appear withing the attribute. Used to uniquely identify the element so that the component can enable and disable it

id
(optional)
string

Id attribute of the component (in case you need to use multiple instances on the same page)

(default: mySSS)

label
(optional)
string

Label to display beside the component

(default: Theme)

persistenceKeyName
(optional)
string

SessionStorage key name to persist selected option

// In lieu of better documentation engine, document the API as "params", so that at least it shows up

(default: __stylesheetSwitcher)

setSelected() Function

Sets the selected value

getSelected() Function

Returns the selected value (the label of the selected stylesheet)

selectionChange event

Returns an object with a value property set to the label of the selected stylesheet