Theme switch

A color-scheme theme switch button script and icon button styles.

Source file: src/css/theme-switch.css
View on GitHub: https://github.com/pmbrown/ming-css/blob/main/src/css/theme-switch.css
JavaScript: https://github.com/pmbrown/ming-css/blob/main/assets/js/ming.theme-switch.js

Included with:

ming.css
ming.min.css
ming.mono.css
ming.mono.min.css

Overview (anchor)

The JavaScript is loaded before the style sheet in the head of the HTML:

<head>
  <-- meta -->
  <script src="/assets/js/ming.theme-switch.min.js" ></script>
  <link href="/assets/css/ming.min.css" rel="stylesheet">
</head>

For the manual switch button include the ID value below:

<button id="theme-switch">Color-scheme</button>

For the icons add the '.theme-switch' class to the button and use '.vis-hidden' for text:

<button id="theme-switch" class="theme-switch"><span class="vis-hidden">color-scheme</span></button>

Previous: Offcanvas

Next: Icon buttons