SSS is a JS component that can "switch" between a list of stylesheets.
You can also hide the UI and change the style sheet programmatically:
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';
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 |