mirror/AudioBookRequest
1
0
Fork 0
mirror of https://github.com/markbeep/AudioBookRequest.git synced 2026-05-02 06:19:41 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix light/dark mode buttons

Browse Source
This commit is contained in:
Markbeep
2025-03-08 18:57:01 +01:00
parent 151b1b5c34
commit 89696934b5
2 changed files with 71 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/globals.css
+35
View File
@@ -94,3 +94,38 @@
right: -9px; /* half the width */
border-radius: 9px;
}
.light-dark-toggle {
position: relative;
display: inline-grid;
cursor: pointer;
place-content: center;
vertical-align: middle;
webkit-user-select: none;
user-select: none;
input {
appearance: none;
border: none;
}
> * {
grid-column-start: 1;
grid-row-start: 1;
transition-property: transform, rotate, opacity;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
.DARKCLASS .theme-light {
rotate: 45deg;
opacity: 0%;
}
.theme-dark {
rotate: 45deg;
opacity: 0%;
}
.DARKCLASS .theme-dark {
rotate: 0deg;
opacity: 100%;
}
templates/base.html
+36 -7
View File
@@ -15,7 +15,33 @@
src="https://unpkg.com/htmx-ext-preload@2.1.0"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/theme-change@2.0.2/index.js"></script>
<script>
const setTheme = theme => {
if (!theme) {
theme = localStorage.getItem("theme") || "nord";
}
document.documentElement.setAttribute("data-theme", theme);
localStorage.setItem("theme", theme);
if (theme === "night") {
for (const elem of document.getElementsByClassName(
"light-dark-toggle",
)) {
elem.classList.add("DARKCLASS");
}
} else {
for (const elem of document.getElementsByClassName(
"light-dark-toggle",
)) {
elem.classList.remove("DARKCLASS");
}
}
};
const toggleTheme = () => {
const theme = document.documentElement.getAttribute("data-theme");
const newTheme = theme === "nord" ? "night" : "nord";
setTheme(newTheme);
};
</script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body class="w-screen min-h-screen overflow-x-hidden" hx-ext="preload">
@@ -59,17 +85,20 @@
</div>
<div class="flex-none flex pr-4">
<label
class="btn btn-ghost btn-square light-dark-toggle swap swap-rotate"
<button
class="btn btn-ghost btn-square light-dark-toggle"
onclick="toggleTheme()"
>
<input type="checkbox" data-toggle-theme="nord,night" />
<span class="swap-on svg-dark"
<script>
setTheme();
</script>
<span class="theme-dark svg-dark"
>{% include 'icons/moon.html' %}</span
>
<span class="swap-off svg-light"
<span class="theme-light svg-light"
>{% include 'icons/sun.html' %}</span
>
</label>
</button>
{% if user.can_logout() %}
<btn
hx-post="/auth/logout"