initial commit

color-scheme.js

@@ -0,0 +1,48 @@
+class ColorScheme {
+
+    static #localStorageKey = 'color_scheme'
+    static options = ['dark', 'light']
+
+    static set scheme(name) {
+        document.documentElement.setAttribute('data-color-scheme', name)
+        localStorage.setItem(this.#localStorageKey, name)
+    }
+
+    static get scheme() {
+        return document.documentElement.dataset.colorScheme
+    }
+
+    static {
+        if (localStorage.getItem(this.#localStorageKey)) {
+            // user has previously made a manual color scheme selection
+            ColorScheme.scheme = localStorage.getItem(this.#localStorageKey)
+        } else if (window.matchMedia('(prefers-color-scheme: light)').matches === true) {
+            // user has not made a manual color scheme selection and has a 'light' preference
+            ColorScheme.scheme = 'light'
+        } else if (window.matchMedia('(prefers-color-scheme: dark)').matches === true) {
+            // user has not made a manual color scheme selection and has a 'dark' preference
+            ColorScheme.scheme = 'dark'
+        } else {
+            ColorScheme.scheme = ColorScheme.options[0]
+        }
+
+        const nextSchemeBtns = document.querySelectorAll('[data-color-scheme-next]')
+        for (const btn of nextSchemeBtns) {
+            btn.addEventListener('click', ColorScheme.next)
+        }
+
+        const setSchemeBtns = document.querySelectorAll('[data-color-scheme-set]')
+        for (const btn of setSchemeBtns) {
+            btn.addEventListener('click', () => { ColorScheme.scheme = btn.dataset.colorSchemeSet })
+        }
+    }
+
+    static next() {
+        const optionPos = ColorScheme.options.indexOf(ColorScheme.scheme) + 1
+        if (optionPos === ColorScheme.options.length) {
+            ColorScheme.scheme = ColorScheme.options[0]
+        } else {
+            ColorScheme.scheme = ColorScheme.options[optionPos]
+        }
+    }
+}