Change Stylesheet Dynamically With JavaScript – alternate-stylesheets.js

Preview:

Description:

alternate-stylesheets.js is a JavaScript-driven stylesheet switcher that enables users to switch between stylesheets (themes) on your webpage.

The typical usage of the library is to enable a Dark Mode on your website.

How to use it:

1. Install and import the alternate-stylesheets.js as an ES module.

# Yarn
$ yarn add alternate-stylesheets
# NPM
$ npm i alternate-stylesheets

import * as alternateStylesheets from 'alternate-stylesheets';

2. Or load the alternate-stylesheets.js directly in the document.

<script defer src="alternate-stylesheets.min.js"></script>

3. Insert an alternative stylesheet (for example a dark theme) into the document.

<!-- Default Stylesheet -->
<link rel="stylesheet" title="light" href="light.css" />
<!-- Alternative Stylesheet -->
<link rel="alternate stylesheet" title="dark" href="dark.css" />

4. Switch the page to Dark Mode.

alternateStyleSheets.setAlternateStylesheet('dark');

5. Get the alternative stylesheets.

const stylesheets = alternateStyleSheets.getAlternateStylesheets();