KKlochko/decentralised_book_index
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add the DarkModeSwitcher component.

Browse Source
This commit is contained in:
KKlochko
2025-06-02 22:02:38 +03:00
parent 3bc4616c5d
commit aded500cab
7 changed files with 113 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/app.js
+4 -1
View File
@@ -26,11 +26,14 @@ import "flowbite/dist/flowbite.phoenix.js";
import bidSort from "./bidSort"; import bidSort from "./bidSort";
import authorRoleSort from "./authorRoleSort"; import authorRoleSort from "./authorRoleSort";
import darkModeHook from "../vendor/dark_mode"
let DarkThemeToggle = darkModeHook;
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content") let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, { let liveSocket = new LiveSocket("/live", Socket, {
longPollFallbackMs: 2500, longPollFallbackMs: 2500,
params: {_csrf_token: csrfToken}, params: {_csrf_token: csrfToken},
hooks: { bidSort, authorRoleSort } hooks: { bidSort, authorRoleSort, DarkThemeToggle }
}) })
// Show progress bar on live navigation and form submits // Show progress bar on live navigation and form submits
assets/tailwind.config.js
+1
View File
@@ -6,6 +6,7 @@ const fs = require("fs")
const path = require("path") const path = require("path")
module.exports = { module.exports = {
darkMode: 'class',
content: [ content: [
"../deps/ash_authentication_phoenix/**/*.*ex", "../deps/ash_authentication_phoenix/**/*.*ex",
"./js/**/*.js", "./js/**/*.js",
assets/vendor/dark_mode.js
Vendored
+39
View File
@@ -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;
lib/decentralised_book_index_web/components/layouts/root.html.heex
+8
View File
@@ -10,6 +10,14 @@
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} /> <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}> <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
</script> </script>
<script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark')
}
</script>
</head> </head>
<body class="bg-white dark:bg-gray-900"> <body class="bg-white dark:bg-gray-900">
{@inner_content} {@inner_content}
lib/decentralised_book_index_web/components/my_components.ex
+2
View File
@@ -34,6 +34,8 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents do
alias MyComponents.SelectAuthorAlias alias MyComponents.SelectAuthorAlias
import MyComponents.SelectedAuthorAlias, only: [selected_author_alias: 1] import MyComponents.SelectedAuthorAlias, only: [selected_author_alias: 1]
import MyComponents.DarkModeSwitcher, only: [dark_mode_switcher: 1]
end end
end end
end end
lib/decentralised_book_index_web/components/my_components/dark_mode_switcher.ex
+56
View File
@@ -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"""
<button
id="theme-toggle"
type="button"
phx-update="ignore"
phx-hook="DarkThemeToggle"
class="text-zinc-500 dark:text-zinc-400 hover:bg-slate-200 dark:hover:bg-gray-700 rounded-lg text-sm p-2"
>
<svg
id="theme-toggle-dark-icon"
class="w-5 h-5 text-transparent hidden"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
<svg
id="theme-toggle-light-icon"
class="w-5 h-5 text-transparent"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
fill-rule="evenodd"
clip-rule="evenodd"
>
</path>
</svg>
</button>
<script>
// Toggle early based on <html class="dark">
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
if (themeToggleDarkIcon != null && themeToggleLightIcon != null) {
let dark = document.documentElement.classList.contains('dark');
const show = dark ? themeToggleDarkIcon : themeToggleLightIcon
const hide = dark ? themeToggleLightIcon : themeToggleDarkIcon
show.classList.remove('hidden', 'text-transparent');
hide.classList.add('hidden', 'text-transparent');
}
</script>
"""
end
end
lib/decentralised_book_index_web/components/my_partials/navbar.ex
+3 -1
View File
@@ -2,7 +2,8 @@ defmodule DecentralisedBookIndexWeb.Components.MyPartials.Navbar do
use Phoenix.Component use Phoenix.Component
use DecentralisedBookIndexWeb, :verified_routes use DecentralisedBookIndexWeb, :verified_routes
import DecentralisedBookIndexWeb.Components.MyComponents.Buttons import DecentralisedBookIndexWeb.Components.MyComponents.{Buttons, DarkModeSwitcher}
alias Phoenix.LiveView.JS alias Phoenix.LiveView.JS
alias DecentralisedBookIndex.Accounts.Role alias DecentralisedBookIndex.Accounts.Role
@@ -35,6 +36,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyPartials.Navbar do
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">DBI</span> <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">DBI</span>
</.link> </.link>
<div class="flex items-center lg:order-2"> <div class="flex items-center lg:order-2">
<.dark_mode_switcher />
<.user_info current_user={@current_user} /> <.user_info current_user={@current_user} />
<button <button
data-collapse-toggle="mobile-menu-2" data-collapse-toggle="mobile-menu-2"