thomas/jobbi-bewerbung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dark Mode folgt Browser-Einstellung (prefers-color-scheme), Toggle entfernt

Browse Source 
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
thomas
2026-07-13 12:34:56 +02:00
co-authored by Claude
parent e97d1b3687
commit 0c866805d3
10 changed files with 3 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/main.js
-43
View File
@@ -4,9 +4,6 @@
// DOM Elements // DOM Elements
const body = document.getElementById('body'); const body = document.getElementById('body');
const darkModeToggle = document.getElementById('darkModeToggle');
const sunIcon = document.getElementById('sunIcon');
const moonIcon = document.getElementById('moonIcon');
// Modal Elements // Modal Elements
const applicationModal = document.getElementById('applicationModal'); const applicationModal = document.getElementById('applicationModal');
@@ -37,40 +34,6 @@ let currentApplicationId = null;
let currentDeleteId = null; let currentDeleteId = null;
let pdfLibrariesLoaded = false; let pdfLibrariesLoaded = false;
// ============================================
// Dark Mode
// ============================================
function initializeDarkMode() {
// Check localStorage for dark mode preference
const darkMode = localStorage.getItem('darkMode');
// The `dark` class must live on <html> so that Tailwind's `.dark .dark:*`
// selectors apply to the <body> itself, not just its descendants.
if (darkMode === 'enabled' || (!darkMode && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
sunIcon.classList.add('hidden');
moonIcon.classList.remove('hidden');
} else {
document.documentElement.classList.remove('dark');
sunIcon.classList.remove('hidden');
moonIcon.classList.add('hidden');
}
}
function toggleDarkMode() {
document.documentElement.classList.toggle('dark');
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
// Save preference to localStorage
if (document.documentElement.classList.contains('dark')) {
localStorage.setItem('darkMode', 'enabled');
} else {
localStorage.setItem('darkMode', 'disabled');
}
}
// ============================================ // ============================================
// Modal Functions // Modal Functions
// ============================================ // ============================================
@@ -670,9 +633,6 @@ function loadPdfLibraries() {
// Event Listeners // Event Listeners
// ============================================ // ============================================
// Dark Mode Toggle
darkModeToggle.addEventListener('click', toggleDarkMode);
// Application Modal // Application Modal
addApplicationBtn.addEventListener('click', openAddApplicationModal); addApplicationBtn.addEventListener('click', openAddApplicationModal);
closeApplicationModal.addEventListener('click', () => { closeApplicationModal.addEventListener('click', () => {
@@ -747,7 +707,4 @@ document.getElementById('currentYear').textContent = new Date().getFullYear();
// Initialize // Initialize
// ============================================ // ============================================
// Initialize dark mode
initializeDarkMode();
console.log('Bewerbungs-Tracker initialized'); console.log('Bewerbungs-Tracker initialized');
views/bewerbung.ejs
-21
View File
@@ -810,27 +810,6 @@
<script> <script>
(function () { (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'); const cy = document.getElementById('currentYear');
if (cy) cy.textContent = new Date().getFullYear(); if (cy) cy.textContent = new Date().getFullYear();
views/blacklist.ejs
-19
View File
@@ -156,25 +156,6 @@
<script> <script>
(function () { (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'); const cy = document.getElementById('currentYear');
if (cy) cy.textContent = new Date().getFullYear(); if (cy) cy.textContent = new Date().getFullYear();
views/chat.ejs
-20
View File
@@ -115,26 +115,6 @@
<input type="hidden" id="activeThread" value="<%= activeId || '' %>"> <input type="hidden" id="activeThread" value="<%= activeId || '' %>">
<script> <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__ = { window.__CHAT_BOOT__ = {
activeId: <%= activeId ? JSON.stringify(activeId) : 'null' %>, activeId: <%= activeId ? JSON.stringify(activeId) : 'null' %>,
needsThread: <%= activeId ? 'false' : 'true' %> needsThread: <%= activeId ? 'false' : 'true' %>
views/jobangebote.ejs
-19
View File
@@ -280,25 +280,6 @@
<script> <script>
(function () { (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'); const cy = document.getElementById('currentYear');
if (cy) cy.textContent = new Date().getFullYear(); if (cy) cy.textContent = new Date().getFullYear();
views/jobangebote_uebernommen.ejs
-19
View File
@@ -136,25 +136,6 @@
<script> <script>
(function () { (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'); const cy = document.getElementById('currentYear');
if (cy) cy.textContent = new Date().getFullYear(); if (cy) cy.textContent = new Date().getFullYear();
})(); })();
views/partials/head.ejs
+3 -4
View File
@@ -1,12 +1,12 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bewerbungs-Tracker</title> <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> <script>
(function () { (function () {
try { try {
var dm = localStorage.getItem('darkMode'); if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
if (dm === 'enabled' || (!dm && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');
} }
} catch (e) { /* ignore */ } } catch (e) { /* ignore */ }
@@ -15,7 +15,6 @@
<!-- Tailwind CSS CDN --> <!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script> <script>
// Toggle dark mode via the `.dark` class (default is `media`, i.e. OS-driven)
tailwind.config = { darkMode: 'class' }; tailwind.config = { darkMode: 'class' };
</script> </script>
<!-- Custom CSS --> <!-- Custom CSS -->
views/partials/header.ejs
-14
View File
@@ -52,20 +52,6 @@
<span class="hidden sm:inline">Vorlagen</span> <span class="hidden sm:inline">Vorlagen</span>
</a> </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) --> <!-- Notification bell: unread received e-mails (incl. auto-assigned replies) -->
<div class="relative" id="notifWrap"> <div class="relative" id="notifWrap">
<button id="notifBtn" type="button" <button id="notifBtn" type="button"
views/postfach.ejs
-19
View File
@@ -130,25 +130,6 @@
</script> </script>
<script> <script>
(function () { (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'); const cy = document.getElementById('currentYear');
if (cy) cy.textContent = new Date().getFullYear(); if (cy) cy.textContent = new Date().getFullYear();
views/vorlagen.ejs
-19
View File
@@ -458,25 +458,6 @@
<script> <script>
(function () { (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'); const cy = document.getElementById('currentYear');
if (cy) cy.textContent = new Date().getFullYear(); if (cy) cy.textContent = new Date().getFullYear();
})(); })();