diff --git a/index.html b/index.html index d8449f8..e3486ec 100644 --- a/index.html +++ b/index.html @@ -12,13 +12,20 @@ --accent: #9f1239; /* Rosa */ --border: #ffe4e6; } - body.sky-mode { + body.theme-sky { /* Sky-Mode: Himmelshintergrund und passende Akzente */ --bg-main: rgb(173,216,230); /* sanftes Baby-Blau */ --bg-sidebar: rgb(200,220,240); /* etwas dunkleres Blau */ --accent: rgb(20,60,100); /* dunkles Marine-Blau als Akzent */ --border: rgb(180,200,220); } + body.theme-grey { + /* Grey theme: ruhige, neutrale Akzente */ + --bg-main: #f5f5f5; + --bg-sidebar: #eceff1; + --accent: #374151; + --border: #d1d5db; + } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; diff --git a/renderer.js b/renderer.js index 8ef21f2..e8237c9 100644 --- a/renderer.js +++ b/renderer.js @@ -119,9 +119,11 @@ window.addEventListener('DOMContentLoaded', async () => { } }); - // Sky-Mode Setup + // Theme Setup (Sky = dynamic, Default/Grey = static) const DAY_COLOR = [173, 216, 230]; const NIGHT_COLOR = [0, 0, 50]; + const VALID_THEMES = ['default', 'sky', 'grey']; + let currentTheme = 'default'; function lerpColor(c1, c2, t) { return c1.map((v, i) => Math.round(v + t * (c2[i] - v))); } @@ -140,28 +142,36 @@ window.addEventListener('DOMContentLoaded', async () => { panel.style.backgroundColor = `rgb(${r}, ${g}, ${b})`; } let skyIntervalId, titleIntervalId; - function applySkyMode(enabled) { - document.body.classList.toggle('sky-mode', enabled); + function applyTheme(theme) { + const normalized = VALID_THEMES.includes(theme) ? theme : 'default'; + currentTheme = normalized; + + document.body.classList.remove('theme-sky', 'theme-grey'); + if (normalized === 'sky') document.body.classList.add('theme-sky'); + if (normalized === 'grey') document.body.classList.add('theme-grey'); + clearInterval(skyIntervalId); clearInterval(titleIntervalId); - if (enabled) { + if (normalized === 'sky') { updateBackground(); skyIntervalId = setInterval(updateBackground, 60_000); - function updateAllTextColors() { setTextColor('sky'); } + const updateAllTextColors = () => setTextColor('sky'); updateAllTextColors(); titleIntervalId = setInterval(updateAllTextColors, 60_000); } else { panel.style.backgroundColor = ''; - setTextColor('default'); + setTextColor(normalized); } } - const initialSky = await window.settingsAPI.getSkyMode(); - applySkyMode(initialSky); - window.addEventListener('skymode-changed', e => applySkyMode(e.detail)); + const initialTheme = await window.settingsAPI.getTheme(); + applyTheme(initialTheme); + window.addEventListener('theme-changed', e => applyTheme(e.detail)); function setTextColor(mode) { let textColor = '#111'; - if (mode === 'sky') { + if (mode === 'grey') { + textColor = '#1f2937'; + } else if (mode === 'sky') { const hour = new Date().getHours(); textColor = (hour >= 18 || hour < 6) ? '#fff' : '#111'; }