Add dark mode

assets/js/app.js

@@ -22,8 +22,12 @@ import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 
+import {DarkModeHook} from './dark-mode'
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let liveSocket = new LiveSocket("/live", Socket, {
+  params: {_csrf_token: csrfToken},
+  hooks: {dark_mode_widget: DarkModeHook},
+})
 
 // Show progress bar on live navigation and form submits
 topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})

assets/js/dark-mode.js

@@ -0,0 +1,36 @@
+let DarkModeHook = {
+
+  mounted() {
+    this.button = this.el.querySelector("button")
+    this.button.addEventListener("click", this.show_selector.bind(this))
+    this.selector = this.el.querySelector("ul")
+    var lis = this.el.querySelectorAll("li")
+    lis[0].addEventListener("click", this.switch_to_day_mode.bind(this))
+    lis[1].addEventListener("click", this.switch_to_night_mode.bind(this))
+    lis[2].addEventListener("click", this.switch_to_system_mode.bind(this))
+  },
+  show_selector(){
+    this.selector.classList.remove("hidden")
+  },
+  switch_to_day_mode() {
+    document.documentElement.classList.remove('dark')
+    localStorage.theme = 'light'
+    this.selector.classList.add("hidden")
+  },
+  switch_to_night_mode() {
+    document.documentElement.classList.add('dark')
+    localStorage.theme = 'dark'
+    this.selector.classList.add("hidden")
+  },
+  switch_to_system_mode() {
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+    localStorage.removeItem('theme')
+    this.selector.classList.add("hidden")
+  },
+}
+
+export {DarkModeHook}

assets/tailwind.config.js

@@ -4,6 +4,7 @@
 const plugin = require("tailwindcss/plugin")
 
 module.exports = {
+  darkMode: 'class',
   content: [
     "./js/**/*.js",
     "../lib/*_web.ex",
@@ -23,4 +24,4 @@ module.exports = {
     plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
     plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"]))
   ]
-}
+}