Stylesheet Switcher (SSS)

SSS is a JS component that can "switch" between a list of stylesheets.

GitHub Repo

Demo

You can also hide the UI and change the style sheet programmatically:

How it works

When this component loads, it finds all of the <style> and <link rel="stylesheet" href="..."> elements. Then, filters this list to just the ones that contain the URL (for <link> elements) or text (for <style> elements). Then it disables all of them, except for the one that is selected.

Usage

To include the component via a script element in a HTML page:

Copy the script into your project folder. Then edit your HTML to include the following:

<!-- The element which will host the stylesheet switcher -->
<div class="component-class"></div>

<!-- The component script, which creates a StylesheetSwitcher property which can be instantiated: -->
<script src="path/to/stylesheet-switcher/public/build/sss.js"></script>

<script>
//
const stylesheets = [
  // These are <link href= elements
  { label: 'Dark Link Element', linkHrefContains: 'dark' }, // includes both dark.css and dark2.css
  { label: 'Light Link Element', linkHrefContains: 'light' },
  // These are references to <style> blocks
  { label: 'Red Style Element', styleElemContains: '/* red-style */' },
 { label: 'Green Style Element', styleElemContains: '/* green-style */' },
];

// Instance of the fixed-top-right Stylesheet component
let sss = new StylesheetSwitcher({
  target: document.querySelector('.component-class'),
  props: {
    id: 'mySSS',
    label: 'Theme:',
    stylesheets,
  },
});
</script>

To include the component as a Svelte component within another Svelte component:

Install the NPM package into your existing NPM project:

npm install stylesheet-switcher

Then inside your parent Svelte component:

import stylesheetSwitcher from 'stylesheet-switcher';

Component Props

Param Type Details
stylesheets Object[]

List of stylesheets to switch between. These must be inside the <head> element.

stylesheets[].label string

The display name of the stylesheet

stylesheets[].linkHrefContains string

A string that should appear withing the <link href="..."> attribute. Used to identify the element(s) that the component should enable and disable

stylesheets[].styleElemContains string

A string that should appear withing <style> element(s). Best practice would be to include a comment at the top of the <style> element's content.

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

(default: __stylesheetSwitcher)

showUI (optional) boolean

Whether to display a user interface for the switcher. Set this to false to provide your own UI.

(default: true)

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