Theme Switch

Allow users to pick between dark, light or automatic color scheme for your website.

Usage

Reference the theme-switch.js script somewhere in your HTML.

<script src="https://cdn.jsdelivr.net/gh/swiftysites/theme-switch@release/src/theme-switch.min.js"></script>

Include your CSS for the dark color scheme and assign an id to the link.

<link id="darkCSSLink" rel="stylesheet" href="/assets/dark.css" media="(prefers-color-scheme: dark)" />

Instantiate <theme-switch> providing it with the ID of the CSS link.

<theme-switch stylesheet-id="darkCSSLink"></<theme-switch>

Configure color

Use the color attribute to customize the control's color in any of the formats accepted by the CSS language. The default color is blue.

<theme-switch … color=""></<theme-switch>

Use the color-dark attribute to customize the color in dark mode. It defaults to the main control's color.

<theme-switch … color="green" color="darkgreen"></<theme-switch>