Skip to content

README.md

Latest commit

 

History

History
43 lines (27 loc) · 1.34 KB

README.md

File metadata and controls

43 lines (27 loc) · 1.34 KB
Raw

Theme Switch

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

Theme Switch

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>

Browsers/systems with no color scheme preference

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.