filipriec/Kurt_kalendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dark light mode

Browse Source
This commit is contained in:
Priec
2026-05-16 13:02:24 +02:00
parent 6c87a9d58f
commit 6006e1e7b1
7 changed files with 60 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
ht_booking/assets/views/base.html
View File

@@ -4,6 +4,31 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
// Resolve and apply the saved theme before first paint to avoid a flash.
function applyTheme(t) {
var dark = t === 'dark'
|| (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
}
function highlightTheme(t) {
document.querySelectorAll('#theme-switch [data-theme-opt]').forEach(function (b) {
b.classList.toggle('btn-neutral', b.getAttribute('data-theme-opt') === t);
});
}
function setTheme(t) {
localStorage.setItem('theme', t);
applyTheme(t);
highlightTheme(t);
}
applyTheme(localStorage.getItem('theme') || 'system');
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
if ((localStorage.getItem('theme') || 'system') === 'system') applyTheme('system');
});
document.addEventListener('DOMContentLoaded', function () {
highlightTheme(localStorage.getItem('theme') || 'system');
});
</script>
<title>{% block title %}{{ t(key="brand", lang=lang) }}{% endblock title %}</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
@@ -14,8 +39,8 @@
{% block head %}{% endblock head %}
</head>
<body class="min-h-screen bg-gray-50 font-sans antialiased">
<div class="navbar bg-white shadow-sm">
<body class="min-h-screen bg-base-200 font-sans text-base-content antialiased">
<div class="navbar bg-base-100 shadow-sm">
<div class="mx-auto flex w-full max-w-6xl flex-wrap items-center justify-between gap-2 px-4">
<a href="/" class="text-lg font-bold">{{ t(key="brand", lang=lang) }}</a>
<nav class="flex flex-wrap items-center gap-1">
@@ -35,6 +60,14 @@
<button onclick="setLang('sk')"
class="btn btn-xs join-item {% if lang == 'sk' %}btn-neutral{% endif %}">SK</button>
</div>
<div class="join" id="theme-switch">
<button type="button" data-theme-opt="system" onclick="setTheme('system')"
class="btn btn-xs join-item">{{ t(key="theme-system", lang=lang) }}</button>
<button type="button" data-theme-opt="light" onclick="setTheme('light')"
class="btn btn-xs join-item">{{ t(key="theme-light", lang=lang) }}</button>
<button type="button" data-theme-opt="dark" onclick="setTheme('dark')"
class="btn btn-xs join-item">{{ t(key="theme-dark", lang=lang) }}</button>
</div>
</nav>
</div>
</div>