commit 5f5860a96085153b2d2eff5ae4d18846eaf08eaf Author: Dan Remollino Date: Wed Apr 2 16:27:11 2025 -0400 initial commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/color-scheme.js b/color-scheme.js new file mode 100644 index 0000000..95f5882 --- /dev/null +++ b/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] + } + } +}