starred/minne
1
0
Fork 0
mirror of https://github.com/perstarkse/minne.git synced 2026-04-23 09:18:36 +02:00
Code Issues Packages Projects Releases 10 Wiki Activity

feat: theme toggle

Browse Source
This commit is contained in:
Per Stark
2025-01-18 09:52:39 +01:00
parent 730df164cd
commit 4f2a08b610
6 changed files with 3712 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3617
assets/style.css
View File

File diff suppressed because one or more lines are too long

32
assets/theme-toggle.js Normal file
View File

@@ -0,0 +1,32 @@
const initializeTheme = () => {
const themeToggle = document.querySelector('.theme-controller');
if (!themeToggle) {
return;
}
// Detect system preference
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
// Initialize theme from local storage or system preference
const savedTheme = localStorage.getItem('theme');
const initialTheme = savedTheme ? savedTheme : (prefersDark ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', initialTheme);
themeToggle.checked = initialTheme === 'dark';
// Update theme and local storage on toggle
themeToggle.addEventListener('change', () => {
const theme = themeToggle.checked ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
});
};
// Run the initialization after the DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => {
initializeTheme();
});
// Reinitialize theme toggle after HTMX swaps
document.addEventListener('htmx:afterSwap', initializeTheme);
document.addEventListener('htmx:afterSettle', initializeTheme);

7
templates/body_base.html
View File

@@ -11,20 +11,21 @@
</div> </div>
<div> <div>
<ul class="menu menu-horizontal px-1"> <ul class="menu menu-horizontal px-1">
{% include "theme_toggle.html" %}
<li><a hx-boost="true" class="" href="/documentation">Docs</a></li> <li><a hx-boost="true" class="" href="/documentation">Docs</a></li>
{% if user %} {% if user %}
<li> <li>
<details> <details>
<summary>Settings</summary> <summary>Account</summary>
<ul class="bg-base-100 rounded-t-none p-2"> <ul class="bg-base-100 rounded-t-none p-2">
<li><a hx-boost="true" class="" href="/account">Account</a></li> <li><a hx-boost="true" class="" href="/account">Account</a></li>
<li><a hx-boost="true" class="" href="/admin">Admin Panel</a></li>
<li><a hx-boost="true" href="/signout">Sign out</a></li> <li><a hx-boost="true" href="/signout">Sign out</a></li>
</ul> </ul>
</details> </details>
</li> </li>
{% else %} {% else %}
<li><a hx-boost="true" class="" href="/signin">Login</a></li> <li><a hx-boost="true" class="" href="/signin">Sign in</a></li>
<li><a hx-boost="true" class="" href="/signup">Sign up</a></li>
{% endif %} {% endif %}
</ul> </ul>
</div> </div>

4
templates/head_base.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-theme="dark"> <html lang="en" data-theme="light">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@@ -17,6 +17,7 @@
<!-- Scripts --> <!-- Scripts -->
<script src="assets/htmx.min.js" defer></script> <script src="assets/htmx.min.js" defer></script>
<script src="assets/theme-toggle.js" defer></script>
<!-- Icons --> <!-- Icons -->
<link rel="icon" href="/assets/icon/favicon.ico"> <link rel="icon" href="/assets/icon/favicon.ico">
@@ -28,6 +29,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
{% block head %}{% endblock %} {% block head %}{% endblock %}
</head> </head>
{% block body %}{% endblock %} {% block body %}{% endblock %}

41
templates/scripts/theme-toggle.js Normal file
View File

@@ -0,0 +1,41 @@
<!-- Theme switch script -->
<script>
const initializeTheme = () => {
console.log("Initializing theme toggle...");
const themeToggle = document.querySelector('.theme-controller');
if (!themeToggle) {
console.log("Theme toggle not found.");
return;
}
// Detect system preference
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
// Initialize theme from local storage or system preference
const savedTheme = localStorage.getItem('theme');
const initialTheme = savedTheme ? savedTheme : (prefersDark ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', initialTheme);
themeToggle.checked = initialTheme === 'dark';
// Update theme and local storage on toggle
themeToggle.addEventListener('change', () => {
const theme = themeToggle.checked ? 'dark' : 'light';
console.log("Theme switched to:", theme);
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
});
console.log("Theme toggle initialized.");
};
// Run the initialization after the DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => {
console.log("DOM fully loaded. Initializing theme toggle...");
initializeTheme();
});
// Reinitialize theme toggle after HTMX swaps
document.addEventListener('htmx:afterSwap', initializeTheme);
document.addEventListener('htmx:afterSettle', initializeTheme);
</script>

16
templates/theme_toggle.html Normal file
View File

@@ -0,0 +1,16 @@
<label class="swap swap-rotate mr-1">
<!-- this hidden checkbox controls the state -->
<input type="checkbox" class="theme-controller" value="dark" />
<!-- sun icon -->
<svg class="swap-off h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
</svg>
<!-- moon icon -->
<svg class="swap-on h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
</svg>
</label>