dark mode

This commit is contained in:
fabio
2026-02-23 17:31:06 +01:00
parent fce8b9d4bb
commit e0ef48f6fd
26 changed files with 328 additions and 3714 deletions

View File

@@ -4,11 +4,12 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{.Title}}</title>
<script src="/static/vendor/theme.js"></script>
<link rel="stylesheet" href="/static/css/app.css?v={{.BuildHash}}">
<script src="/static/vendor/htmx.min.js"></script>
<script src="/static/vendor/flowbite.js"></script>
</head>
<body class="flex min-h-screen flex-col bg-gray-50 text-gray-900 antialiased">
<body class="flex min-h-screen flex-col bg-white text-gray-900 antialiased dark:bg-gray-900 dark:text-gray-100">
{{template "navbar" .}}
<main class="mx-auto w-full max-w-7xl flex-1 p-6">
@@ -16,8 +17,13 @@
{{template "content" .}}
</main>
<footer class="border-t border-gray-200 bg-white">
<div class="mx-auto max-w-7xl px-6 py-4 text-sm text-gray-500">Trustcontact</div>
<footer class="border-t border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
<div class="mx-auto flex max-w-7xl items-center justify-between gap-3 px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
<span>Trustcontact</span>
<button id="themeToggle" type="button" aria-label="Toggle dark mode" aria-pressed="false" onclick="window.toggleTheme && window.toggleTheme()" class="rounded-lg bg-gray-100 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700">
Dark mode
</button>
</div>
</footer>
<script>
@@ -217,9 +223,15 @@
reinitFlowbiteComponents();
applyTranslations(document);
if (typeof window.initThemeToggle === 'function') {
window.initThemeToggle();
}
document.body.addEventListener('htmx:afterSwap', function (evt) {
reinitFlowbiteComponents(evt.target || null);
applyTranslations(evt.target || document);
if (typeof window.initThemeToggle === 'function') {
window.initThemeToggle();
}
});
})();
</script>