feat: darkmode toggle (#210)

* dark mode

* Makefile include js for gow

Makefile

@@ -63,7 +63,7 @@ lint:
 ## Go Watch for web development
 ## https://github.com/mitranim/gow
 gow:
-	gow -e=go,mod,html,css -i=node_modules run .
+	gow -e=go,mod,html,js,css -i=node_modules run .
 
 # Build web assets
 web:
@@ -90,4 +90,4 @@ help: ## Show this help.
 	@awk 'BEGIN {FS = ":.*?## "} { \
 		if (/^[a-zA-Z_-]+:.*?##.*$$/) {printf "    ${YELLOW}%-20s${GREEN}%s${RESET}\n", $$1, $$2} \
 		else if (/^## .*$$/) {printf "  ${CYAN}%s${RESET}\n", substr($$1,4)} \
-		}' $(MAKEFILE_LIST)
+		}' $(MAKEFILE_LIST)

pkg/web/static/js/dark-mode.js

@@ -0,0 +1,67 @@
+const HSThemeAppearance = {
+    init() {
+        const defaultTheme = 'default'
+        let theme = localStorage.getItem('hs_theme') || defaultTheme
+
+        if (document.querySelector('html').classList.contains('dark')) return
+        this.setAppearance(theme)
+    },
+    _resetStylesOnLoad() {
+        const $resetStyles = document.createElement('style')
+        $resetStyles.innerText = `*{transition: unset !important;}`
+        $resetStyles.setAttribute('data-hs-appearance-onload-styles', '')
+        document.head.appendChild($resetStyles)
+        return $resetStyles
+    },
+    setAppearance(theme, saveInStore = true, dispatchEvent = true) {
+        const $resetStylesEl = this._resetStylesOnLoad()
+
+        if (saveInStore) {
+            localStorage.setItem('hs_theme', theme)
+        }
+
+        if (theme === 'auto') {
+            theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default'
+        }
+
+        document.querySelector('html').classList.remove('dark')
+        document.querySelector('html').classList.remove('default')
+        document.querySelector('html').classList.remove('auto')
+
+        document.querySelector('html').classList.add(this.getOriginalAppearance())
+
+        setTimeout(() => {
+            $resetStylesEl.remove()
+        })
+
+        if (dispatchEvent) {
+            window.dispatchEvent(new CustomEvent('on-hs-appearance-change', {detail: theme}))
+        }
+    },
+    getAppearance() {
+        let theme = this.getOriginalAppearance()
+        if (theme === 'auto') {
+            theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default'
+        }
+        return theme
+    },
+    getOriginalAppearance() {
+        const defaultTheme = 'default'
+        return localStorage.getItem('hs_theme') || defaultTheme
+    }
+}
+HSThemeAppearance.init()
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+    if (HSThemeAppearance.getOriginalAppearance() === 'auto') {
+        HSThemeAppearance.setAppearance('auto', false)
+    }
+})
+
+window.addEventListener('load', () => {
+    const $clickableThemes = document.querySelectorAll('[data-hs-theme-click-value]')
+
+    $clickableThemes.forEach($item => {
+        $item.addEventListener('click', () => HSThemeAppearance.setAppearance($item.getAttribute('data-hs-theme-click-value'), true, $item))
+    })
+})