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

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>

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>

In cases where prefers-color-scheme is not natively supported you can still use Theme Switch to provide support for dark mode. The Auto option will be removed from the control and light mode will automatically become the default theme.