Add the DarkModeSwitcher component.

assets/js/app.js

@@ -26,11 +26,14 @@ import "flowbite/dist/flowbite.phoenix.js";
 import bidSort from "./bidSort";
 import authorRoleSort from "./authorRoleSort";
 
+import darkModeHook from "../vendor/dark_mode"
+let DarkThemeToggle = darkModeHook;
+
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: {_csrf_token: csrfToken},
-  hooks: { bidSort, authorRoleSort }
+  hooks: { bidSort, authorRoleSort, DarkThemeToggle }
 })
 
 // Show progress bar on live navigation and form submits

assets/tailwind.config.js

@@ -6,6 +6,7 @@ const fs = require("fs")
 const path = require("path")
 
 module.exports = {
+  darkMode: 'class',
   content: [
     "../deps/ash_authentication_phoenix/**/*.*ex",
     "./js/**/*.js",

assets/vendor/dark_mode.js

@@ -0,0 +1,39 @@
+const localStorageKey = 'theme';
+
+const isDark = () => {
+	if (localStorage.getItem(localStorageKey) === 'dark') return true;
+	if (localStorage.getItem(localStorageKey) === 'light') return false;
+	return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+const setupThemeToggle = () => {
+	toggleVisibility = (dark) => {
+		const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+		const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+		if (themeToggleDarkIcon == null || themeToggleLightIcon == null) return;
+		const show = dark ? themeToggleDarkIcon : themeToggleLightIcon
+		const hide = dark ? themeToggleLightIcon : themeToggleDarkIcon
+		show.classList.remove('hidden', 'text-transparent');
+		hide.classList.add('hidden', 'text-transparent');
+		if (dark) {
+			document.documentElement.classList.add('dark')
+		} else {
+			document.documentElement.classList.remove('dark')
+		}
+		try { localStorage.setItem(localStorageKey, dark ? 'dark' : 'light') } catch (_err) { }
+	}
+	toggleVisibility(isDark())
+	document.getElementById('theme-toggle').addEventListener('click', function () {
+		toggleVisibility(!isDark())
+	});
+}
+
+const darkModeHook = {
+  mounted() {
+		setupThemeToggle();
+	},
+	updated() {
+	},
+}
+
+export default darkModeHook;