dark mode
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user