Dark Mode folgt Browser-Einstellung (prefers-color-scheme), Toggle entfernt
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -810,27 +810,6 @@
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
// The `dark` class lives on <html> so Tailwind's `.dark .dark:*`
|
||||
// selectors also style the <body> itself.
|
||||
const root = document.documentElement;
|
||||
const dm = localStorage.getItem('darkMode');
|
||||
if (dm === 'enabled' || (!dm && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
root.classList.add('dark');
|
||||
}
|
||||
const toggle = document.getElementById('darkModeToggle');
|
||||
const sun = document.getElementById('sunIcon');
|
||||
const moon = document.getElementById('moonIcon');
|
||||
function sync() {
|
||||
const d = root.classList.contains('dark');
|
||||
if (sun) sun.classList.toggle('hidden', d);
|
||||
if (moon) moon.classList.toggle('hidden', !d);
|
||||
}
|
||||
sync();
|
||||
if (toggle) toggle.addEventListener('click', () => {
|
||||
root.classList.toggle('dark');
|
||||
localStorage.setItem('darkMode', root.classList.contains('dark') ? 'enabled' : 'disabled');
|
||||
sync();
|
||||
});
|
||||
const cy = document.getElementById('currentYear');
|
||||
if (cy) cy.textContent = new Date().getFullYear();
|
||||
|
||||
|
||||
@@ -156,25 +156,6 @@
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const root = document.documentElement;
|
||||
const dm = localStorage.getItem('darkMode');
|
||||
if (dm === 'enabled' || (!dm && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
root.classList.add('dark');
|
||||
}
|
||||
const toggle = document.getElementById('darkModeToggle');
|
||||
const sun = document.getElementById('sunIcon');
|
||||
const moon = document.getElementById('moonIcon');
|
||||
function sync() {
|
||||
const d = root.classList.contains('dark');
|
||||
if (sun) sun.classList.toggle('hidden', d);
|
||||
if (moon) moon.classList.toggle('hidden', !d);
|
||||
}
|
||||
sync();
|
||||
if (toggle) toggle.addEventListener('click', () => {
|
||||
root.classList.toggle('dark');
|
||||
localStorage.setItem('darkMode', root.classList.contains('dark') ? 'enabled' : 'disabled');
|
||||
sync();
|
||||
});
|
||||
const cy = document.getElementById('currentYear');
|
||||
if (cy) cy.textContent = new Date().getFullYear();
|
||||
|
||||
|
||||
@@ -115,26 +115,6 @@
|
||||
<input type="hidden" id="activeThread" value="<%= activeId || '' %>">
|
||||
|
||||
<script>
|
||||
// Minimal dark-mode toggle: main.js is not loaded on the chat page, so
|
||||
// wire the header's toggle + sync the sun/moon icon visibility here.
|
||||
(function () {
|
||||
var sun = document.getElementById('sunIcon');
|
||||
var moon = document.getElementById('moonIcon');
|
||||
var isDark = document.documentElement.classList.contains('dark');
|
||||
function sync() {
|
||||
sun && sun.classList.toggle('hidden', isDark);
|
||||
moon && moon.classList.toggle('hidden', !isDark);
|
||||
}
|
||||
sync();
|
||||
var btn = document.getElementById('darkModeToggle');
|
||||
if (btn) btn.addEventListener('click', function () {
|
||||
isDark = !document.documentElement.classList.toggle('dark');
|
||||
// toggle returns whether class is present AFTER toggle; recompute.
|
||||
isDark = document.documentElement.classList.contains('dark');
|
||||
localStorage.setItem('darkMode', isDark ? 'enabled' : 'disabled');
|
||||
sync();
|
||||
});
|
||||
})();
|
||||
window.__CHAT_BOOT__ = {
|
||||
activeId: <%= activeId ? JSON.stringify(activeId) : 'null' %>,
|
||||
needsThread: <%= activeId ? 'false' : 'true' %>
|
||||
|
||||
@@ -280,25 +280,6 @@
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const root = document.documentElement;
|
||||
const dm = localStorage.getItem('darkMode');
|
||||
if (dm === 'enabled' || (!dm && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
root.classList.add('dark');
|
||||
}
|
||||
const toggle = document.getElementById('darkModeToggle');
|
||||
const sun = document.getElementById('sunIcon');
|
||||
const moon = document.getElementById('moonIcon');
|
||||
function sync() {
|
||||
const d = root.classList.contains('dark');
|
||||
if (sun) sun.classList.toggle('hidden', d);
|
||||
if (moon) moon.classList.toggle('hidden', !d);
|
||||
}
|
||||
sync();
|
||||
if (toggle) toggle.addEventListener('click', () => {
|
||||
root.classList.toggle('dark');
|
||||
localStorage.setItem('darkMode', root.classList.contains('dark') ? 'enabled' : 'disabled');
|
||||
sync();
|
||||
});
|
||||
const cy = document.getElementById('currentYear');
|
||||
if (cy) cy.textContent = new Date().getFullYear();
|
||||
|
||||
|
||||
@@ -136,25 +136,6 @@
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const root = document.documentElement;
|
||||
const dm = localStorage.getItem('darkMode');
|
||||
if (dm === 'enabled' || (!dm && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
root.classList.add('dark');
|
||||
}
|
||||
const toggle = document.getElementById('darkModeToggle');
|
||||
const sun = document.getElementById('sunIcon');
|
||||
const moon = document.getElementById('moonIcon');
|
||||
function sync() {
|
||||
const d = root.classList.contains('dark');
|
||||
if (sun) sun.classList.toggle('hidden', d);
|
||||
if (moon) moon.classList.toggle('hidden', !d);
|
||||
}
|
||||
sync();
|
||||
if (toggle) toggle.addEventListener('click', () => {
|
||||
root.classList.toggle('dark');
|
||||
localStorage.setItem('darkMode', root.classList.contains('dark') ? 'enabled' : 'disabled');
|
||||
sync();
|
||||
});
|
||||
const cy = document.getElementById('currentYear');
|
||||
if (cy) cy.textContent = new Date().getFullYear();
|
||||
})();
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Bewerbungs-Tracker</title>
|
||||
<!-- Apply the dark class before first paint to avoid a light-mode flash (FOUC). -->
|
||||
<!-- Apply the dark class before first paint to avoid a light-mode flash (FOUC).
|
||||
Theme follows the browser/OS setting (prefers-color-scheme) — no manual toggle. -->
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
var dm = localStorage.getItem('darkMode');
|
||||
if (dm === 'enabled' || (!dm && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.classList.add('dark');
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
@@ -15,7 +15,6 @@
|
||||
<!-- Tailwind CSS CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
// Toggle dark mode via the `.dark` class (default is `media`, i.e. OS-driven)
|
||||
tailwind.config = { darkMode: 'class' };
|
||||
</script>
|
||||
<!-- Custom CSS -->
|
||||
|
||||
@@ -52,20 +52,6 @@
|
||||
<span class="hidden sm:inline">Vorlagen</span>
|
||||
</a>
|
||||
|
||||
<!-- Dark mode toggle -->
|
||||
<button
|
||||
id="darkModeToggle"
|
||||
class="p-2 rounded-full bg-white/20 hover:bg-white/30 transition-colors text-white"
|
||||
aria-label="Dark Mode umschalten"
|
||||
>
|
||||
<svg id="sunIcon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
|
||||
</svg>
|
||||
<svg id="moonIcon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Notification bell: unread received e-mails (incl. auto-assigned replies) -->
|
||||
<div class="relative" id="notifWrap">
|
||||
<button id="notifBtn" type="button"
|
||||
|
||||
@@ -130,25 +130,6 @@
|
||||
</script>
|
||||
<script>
|
||||
(function () {
|
||||
const root = document.documentElement;
|
||||
const dm = localStorage.getItem('darkMode');
|
||||
if (dm === 'enabled' || (!dm && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
root.classList.add('dark');
|
||||
}
|
||||
const toggle = document.getElementById('darkModeToggle');
|
||||
const sun = document.getElementById('sunIcon');
|
||||
const moon = document.getElementById('moonIcon');
|
||||
function sync() {
|
||||
const d = root.classList.contains('dark');
|
||||
if (sun) sun.classList.toggle('hidden', d);
|
||||
if (moon) moon.classList.toggle('hidden', !d);
|
||||
}
|
||||
sync();
|
||||
if (toggle) toggle.addEventListener('click', () => {
|
||||
root.classList.toggle('dark');
|
||||
localStorage.setItem('darkMode', root.classList.contains('dark') ? 'enabled' : 'disabled');
|
||||
sync();
|
||||
});
|
||||
const cy = document.getElementById('currentYear');
|
||||
if (cy) cy.textContent = new Date().getFullYear();
|
||||
|
||||
|
||||
@@ -458,25 +458,6 @@
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const root = document.documentElement;
|
||||
const dm = localStorage.getItem('darkMode');
|
||||
if (dm === 'enabled' || (!dm && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
root.classList.add('dark');
|
||||
}
|
||||
const toggle = document.getElementById('darkModeToggle');
|
||||
const sun = document.getElementById('sunIcon');
|
||||
const moon = document.getElementById('moonIcon');
|
||||
function sync() {
|
||||
const d = root.classList.contains('dark');
|
||||
if (sun) sun.classList.toggle('hidden', d);
|
||||
if (moon) moon.classList.toggle('hidden', !d);
|
||||
}
|
||||
sync();
|
||||
if (toggle) toggle.addEventListener('click', () => {
|
||||
root.classList.toggle('dark');
|
||||
localStorage.setItem('darkMode', root.classList.contains('dark') ? 'enabled' : 'disabled');
|
||||
sync();
|
||||
});
|
||||
const cy = document.getElementById('currentYear');
|
||||
if (cy) cy.textContent = new Date().getFullYear();
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user