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

Add the DarkModeSwitcher component.

Browse Source
dev
KKlochko 4 weeks ago
parent 3bc4616c5d
commit aded500cab
7 changed files with 113 additions and 2 deletions
Show Stats Download Patch File Download Diff File

5
assets/js/app.js
Unescape View File

@ -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

1
assets/tailwind.config.js
Unescape View File

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

39
assets/vendor/dark_mode.js vendored
Unescape 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;

8
lib/decentralised_book_index_web/components/layouts/root.html.heex
Unescape View File

@ -10,6 +10,14 @@
<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>
<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>
<body class="bg-white dark:bg-gray-900">
{@inner_content}

2
lib/decentralised_book_index_web/components/my_components.ex
Unescape View File

@ -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

56
lib/decentralised_book_index_web/components/my_components/dark_mode_switcher.ex
Unescape 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

4
lib/decentralised_book_index_web/components/my_partials/navbar.ex
Unescape View File

@ -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
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">DBI</span>
</.link>
<div class="flex items-center lg:order-2">
<.dark_mode_switcher />
<.user_info current_user={@current_user} />
<button
data-collapse-toggle="mobile-menu-2"

Write Preview
Loading…
Cancel
Save