diff --git a/assets/js/app.js b/assets/js/app.js
index da85cd4..a328ee9 100644
--- a/assets/js/app.js
+++ b/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
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index aa4d939..699fb47 100644
--- a/assets/tailwind.config.js
+++ b/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",
diff --git a/assets/vendor/dark_mode.js b/assets/vendor/dark_mode.js
new file mode 100644
index 0000000..8f59009
--- /dev/null
+++ b/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;
diff --git a/lib/decentralised_book_index_web/components/layouts/root.html.heex b/lib/decentralised_book_index_web/components/layouts/root.html.heex
index 9614513..ecbefef 100644
--- a/lib/decentralised_book_index_web/components/layouts/root.html.heex
+++ b/lib/decentralised_book_index_web/components/layouts/root.html.heex
@@ -10,6 +10,14 @@
+
{@inner_content}
diff --git a/lib/decentralised_book_index_web/components/my_components.ex b/lib/decentralised_book_index_web/components/my_components.ex
index be296a1..40adb00 100644
--- a/lib/decentralised_book_index_web/components/my_components.ex
+++ b/lib/decentralised_book_index_web/components/my_components.ex
@@ -34,6 +34,8 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents do
alias MyComponents.SelectAuthorAlias
import MyComponents.SelectedAuthorAlias, only: [selected_author_alias: 1]
+
+ import MyComponents.DarkModeSwitcher, only: [dark_mode_switcher: 1]
end
end
end
diff --git a/lib/decentralised_book_index_web/components/my_components/dark_mode_switcher.ex b/lib/decentralised_book_index_web/components/my_components/dark_mode_switcher.ex
new file mode 100644
index 0000000..1488599
--- /dev/null
+++ b/lib/decentralised_book_index_web/components/my_components/dark_mode_switcher.ex
@@ -0,0 +1,56 @@
+defmodule DecentralisedBookIndexWeb.Components.MyComponents.DarkModeSwitcher do
+ use Phoenix.Component
+
+ @doc"""
+ This component is based on https://github.com/aiwaiwa/phoenix_dark_mode/blob/main/dark_mode.ex.
+ """
+ def dark_mode_switcher(assigns) do
+ ~H"""
+
+
+
+ """
+ end
+end
diff --git a/lib/decentralised_book_index_web/components/my_partials/navbar.ex b/lib/decentralised_book_index_web/components/my_partials/navbar.ex
index e544fbb..b8f05aa 100644
--- a/lib/decentralised_book_index_web/components/my_partials/navbar.ex
+++ b/lib/decentralised_book_index_web/components/my_partials/navbar.ex
@@ -2,7 +2,8 @@ defmodule DecentralisedBookIndexWeb.Components.MyPartials.Navbar do
use Phoenix.Component
use DecentralisedBookIndexWeb, :verified_routes
- import DecentralisedBookIndexWeb.Components.MyComponents.Buttons
+ import DecentralisedBookIndexWeb.Components.MyComponents.{Buttons, DarkModeSwitcher}
+
alias Phoenix.LiveView.JS
alias DecentralisedBookIndex.Accounts.Role
@@ -35,6 +36,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyPartials.Navbar do
DBI
+ <.dark_mode_switcher />
<.user_info current_user={@current_user} />