feat(settings): Schriftfarbe, Linienfarbe und Hintergrundfarbe per Color-Picker

Die bisherigen Stufen-Wähler ("Dunkel/Mittel/Hell/Maximum" und "Kaum/Subtil/Normal/Stark") für Schrift- bzw. Linienkontrast sind durch echte Hex-Color-Picker ersetzt. Zusätzlich kann jetzt auch die Hintergrundfarbe der Seite frei gewählt werden. Wenn ein Override gesetzt ist: - text_color → setzt --text-1 direkt, --text-2/--text-3 werden daraus per shadeHex(-0.25 / -0.55) abgeleitet, damit der Hue passt - line_color → setzt --border, --border-light wird leicht abgedunkelt - bg_color → setzt --bg-app, daraus werden Topbar/Sidebar/Surface/ Hover/Active per shadeHex(+0.10…+0.40) konsistent hochskaliert Per "Reset"-Knopf wird der Override geleert und die alte Stufen-Logik (falls noch vorhanden) bzw. der Default-Theme greift wieder. Backend: - 3 neue nullable VARCHAR(7)-Spalten in user_settings (text_color, line_color, bg_color) inkl. Migrationen in main.py - settings_router nutzt model_dump(exclude_unset=True) und respektiert explizite null-Werte nur für diese 3 Override-Felder, damit Reset funktioniert Auch enthalten: Auflösen der Merge-Konflikte in sw.js, index.html, version.js (HEAD-Stand v17 behalten) und Bump auf v18.
merge: beta into master
2026-05-19 09:49:45 +02:00 · 2026-05-19 09:35:15 +02:00 · 2026-05-09 18:03:48 +02:00 · 2026-05-09 17:58:15 +02:00 · 2026-05-09 17:17:36 +02:00 · 2026-05-09 17:12:57 +02:00
11 changed files with 239 additions and 34 deletions
--- a/backend/main.py
+++ b/backend/main.py
@@ -114,6 +114,24 @@ def _migrate():
        except Exception:
            pass

+        try:
+            conn.execute(text("ALTER TABLE user_settings ADD COLUMN text_color VARCHAR(7)"))
+            conn.commit()
+        except Exception:
+            pass
+
+        try:
+            conn.execute(text("ALTER TABLE user_settings ADD COLUMN line_color VARCHAR(7)"))
+            conn.commit()
+        except Exception:
+            pass
+
+        try:
+            conn.execute(text("ALTER TABLE user_settings ADD COLUMN bg_color VARCHAR(7)"))
+            conn.commit()
+        except Exception:
+            pass
+
 _migrate()

 app = FastAPI(title="Calendarr", docs_url=None, redoc_url=None)
--- a/backend/models.py
+++ b/backend/models.py
@@ -84,6 +84,9 @@ class UserSettings(Base):
    language = Column(String(5), default="de")
    month_divider_color = Column(String(7), default="#7090c0")
    month_label_color = Column(String(7), default="#7090c0")
+    text_color = Column(String(7), nullable=True)   # Override für --text-1 (NULL = nutze text_contrast)
+    line_color = Column(String(7), nullable=True)   # Override für --border  (NULL = nutze line_contrast)
+    bg_color   = Column(String(7), nullable=True)   # Override für --bg-app  (NULL = Default)

    user = relationship("User", back_populates="settings")

--- a/backend/routers/settings_router.py
+++ b/backend/routers/settings_router.py
@@ -24,6 +24,9 @@ class SettingsUpdate(BaseModel):
    language: Optional[str] = None
    month_divider_color: Optional[str] = None
    month_label_color: Optional[str] = None
+    text_color: Optional[str] = None
+    line_color: Optional[str] = None
+    bg_color:   Optional[str] = None


 def _settings_dict(s: models.UserSettings) -> dict:
@@ -40,6 +43,9 @@ def _settings_dict(s: models.UserSettings) -> dict:
        "language": s.language or "de",
        "month_divider_color": s.month_divider_color or "#7090c0",
        "month_label_color": s.month_label_color or "#7090c0",
+        "text_color": s.text_color,
+        "line_color": s.line_color,
+        "bg_color":   s.bg_color,
    }


@@ -76,8 +82,16 @@ def update_settings(
        settings = models.UserSettings(user_id=current_user.id)
        db.add(settings)

-    for field, value in data.model_dump(exclude_none=True).items():
-        setattr(settings, field, value)
+    # For these three override colours, an explicit null is meaningful
+    # ("reset to default") and must be persisted as NULL. All other fields
+    # keep the previous behaviour where a null/missing value is ignored.
+    NULLABLE_OVERRIDES = {"text_color", "line_color", "bg_color"}
+    update_data = data.model_dump(exclude_unset=True)
+    for field, value in update_data.items():
+        if field in NULLABLE_OVERRIDES:
+            setattr(settings, field, value or None)
+        elif value is not None:
+            setattr(settings, field, value)

    db.commit()
    return {"ok": True}
--- a/frontend/css/app.css
+++ b/frontend/css/app.css
@@ -975,11 +975,15 @@ a { color: var(--primary); text-decoration: none; }
 }
 .ctx-item:hover { background: var(--bg-hover); }

+<<<<<<< HEAD
 /* ── Event Popup ──────────────────────────────────────────
   Layout: Color-Dot + Title links, kleine Icon-Toolbar rechts oben.
   Icons sind im Ruhezustand transparent (nur das SVG selbst sichtbar),
   bekommen erst beim Hover einen runden farbigen Hintergrund. Wirkt
   modern und lässt dem Titel die meiste Breite. */
+=======
+/* ── Event Popup ────────────────────────────────────────── */
+>>>>>>> e744b1829e99db6b80922f75542ced329138e474
 .event-popup {
  position: fixed; z-index: 600;
  background: var(--bg-surface);
@@ -1697,12 +1701,24 @@ a { color: var(--primary); text-decoration: none; }
  .topbar-left { gap: 0; }
  .topbar-right { gap: 0; }

+<<<<<<< HEAD
  /* Event-Popup auf Mobile: an Viewport-Breite anpassen */
  .event-popup { width: min(94vw, 380px); max-width: 94vw; }
  .popup-header { padding: 10px 8px 10px 14px; }
  .popup-header h4 { font-size: 13.5px; }
  .popup-icon-btn { width: 32px; height: 32px; }
  .popup-icon-btn svg { width: 16px; height: 16px; }
+=======
+  /* Event-Popup: Buttons kompakt halten, kein 44px-Override ───── */
+  .event-popup .icon-btn {
+    min-width: 32px !important;
+    min-height: 32px !important;
+    width: 32px;
+    height: 32px;
+  }
+  .event-popup .popup-header { gap: 2px; padding: 10px 12px; }
+  .event-popup { width: min(92vw, 340px); max-width: 92vw; }
+>>>>>>> e744b1829e99db6b80922f75542ced329138e474

  /* Monatsansicht: Startzeit ausblenden — nur Titel anzeigen ──── */
  .month-event-time { display: none; }
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />
  <!-- APP_VERSION: update here + version.js on every release -->
-  <title>Calendarr v17</title>
+  <title>Calendarr v18</title>
  <link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
  <link rel="manifest" href="/manifest.json" />
  <meta name="theme-color" content="#4285f4" />
@@ -80,7 +80,7 @@
      <button type="submit" class="btn btn-primary btn-full">Anmelden</button>
    </form>
  </div>
-  <button class="impressum-link" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v17</button>
+  <button class="impressum-link" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v18</button>
 </div>

 <!-- ─── MAIN APP ──────────────────────────────────────────── -->
@@ -185,7 +185,7 @@
            <span data-i18n="my_calendars">Meine Kalender</span>
            <div class="add-cal-dropdown-wrap">
              <button class="icon-btn mini-btn" id="btn-add-cal" title="Kalender hinzufügen">
-                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 13h-6v11h-2v-6H5v-2h6V5h2v11h6v2z"/></svg>
              </button>
              <div class="add-cal-dropdown hidden" id="add-cal-dropdown">
                <button data-action="local">Lokaler Kalender</button>
@@ -199,7 +199,7 @@
          <div id="cal-list-items"></div>
        </div>
      </div>
-      <button class="sidebar-copyright" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v17</button>
+      <button class="sidebar-copyright" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v18</button>
    </aside>
    <div id="sidebar-backdrop" class="sidebar-backdrop"></div>

@@ -622,22 +622,29 @@
            </div>
          </div>

-          <h4 class="panel-title" style="margin-top:24px" data-i18n="settings_text_contrast">Schriftkontrast</h4>
-          <p class="panel-desc" data-i18n="settings_text_contrast_desc">Helligkeit der Beschriftungen und Texte</p>
-          <div class="contrast-selector" id="cfg-text-contrast" data-setting="text_contrast">
-            <button class="contrast-btn" data-val="1"><span style="color:#606070">Aa</span><span class="contrast-lbl" data-i18n="contrast_dark">Dunkel</span></button>
-            <button class="contrast-btn" data-val="2"><span style="color:#9090a8">Aa</span><span class="contrast-lbl" data-i18n="contrast_medium">Mittel</span></button>
-            <button class="contrast-btn" data-val="3"><span style="color:#c8c8d8">Aa</span><span class="contrast-lbl" data-i18n="contrast_light">Hell</span></button>
-            <button class="contrast-btn" data-val="4"><span style="color:#ffffff">Aa</span><span class="contrast-lbl" data-i18n="contrast_max">Maximum</span></button>
+          <div class="form-group">
+            <label data-i18n="settings_text_color">Schriftfarbe</label>
+            <div class="ev-color-row">
+              <input type="text" id="cfg-text-color-hex" class="ev-color-hex" maxlength="7" spellcheck="false" placeholder="auto" />
+              <div class="ev-color-preview" id="cfg-text-color-preview" data-i18n-title="color_pick" title="Farbe wählen"></div>
+              <button type="button" class="btn btn-ghost btn-sm" id="cfg-text-color-reset" data-i18n="reset" title="Zurücksetzen">Reset</button>
+            </div>
          </div>
-
-          <h4 class="panel-title" style="margin-top:24px" data-i18n="settings_line_contrast">Linienkontrast</h4>
-          <p class="panel-desc" data-i18n="settings_line_contrast_desc">Sichtbarkeit von Trennlinien und Rahmen</p>
-          <div class="contrast-selector" id="cfg-line-contrast" data-setting="line_contrast">
-            <button class="contrast-btn" data-val="1"><span class="line-preview" style="border-color:#1e1e2c"></span><span class="contrast-lbl" data-i18n="line_barely">Kaum</span></button>
-            <button class="contrast-btn" data-val="2"><span class="line-preview" style="border-color:#2a2a3c"></span><span class="contrast-lbl" data-i18n="line_subtle">Subtil</span></button>
-            <button class="contrast-btn" data-val="3"><span class="line-preview" style="border-color:#3a3a52"></span><span class="contrast-lbl" data-i18n="line_normal">Normal</span></button>
-            <button class="contrast-btn" data-val="4"><span class="line-preview" style="border-color:#5a5a78"></span><span class="contrast-lbl" data-i18n="line_strong">Stark</span></button>
+          <div class="form-group">
+            <label data-i18n="settings_line_color">Linienfarbe</label>
+            <div class="ev-color-row">
+              <input type="text" id="cfg-line-color-hex" class="ev-color-hex" maxlength="7" spellcheck="false" placeholder="auto" />
+              <div class="ev-color-preview" id="cfg-line-color-preview" data-i18n-title="color_pick" title="Farbe wählen"></div>
+              <button type="button" class="btn btn-ghost btn-sm" id="cfg-line-color-reset" data-i18n="reset" title="Zurücksetzen">Reset</button>
+            </div>
+          </div>
+          <div class="form-group">
+            <label data-i18n="settings_bg_color">Hintergrundfarbe</label>
+            <div class="ev-color-row">
+              <input type="text" id="cfg-bg-color-hex" class="ev-color-hex" maxlength="7" spellcheck="false" placeholder="auto" />
+              <div class="ev-color-preview" id="cfg-bg-color-preview" data-i18n-title="color_pick" title="Farbe wählen"></div>
+              <button type="button" class="btn btn-ghost btn-sm" id="cfg-bg-color-reset" data-i18n="reset" title="Zurücksetzen">Reset</button>
+            </div>
          </div>

          <h4 class="panel-title" style="margin-top:24px" data-i18n="settings_calendar_view">Kalenderansicht</h4>
@@ -888,7 +895,7 @@
      <a href="mailto:scarriffleservices@gmail.com">scarriffleservices@gmail.com</a></p>
    </div>
    <div class="modal-footer" style="justify-content:space-between;align-items:center">
-      <span style="font-size:12px;color:var(--text-3)">Calendarr v17</span>
+      <span style="font-size:12px;color:var(--text-3)">Calendarr v18</span>
      <button class="btn btn-ghost" onclick="closeImpressum()">Schliessen</button>
    </div>
  </div>
--- a/frontend/js/calendar.js
+++ b/frontend/js/calendar.js
@@ -115,6 +115,7 @@ export async function initCalendar() {
  bindProfileModal();
  bindSwipeNavigation();
  handleHAOAuthReturn();
+<<<<<<< HEAD

  // Browser-Back/Forward: URL-Hash → State synchronisieren
  window.addEventListener('hashchange', () => {
@@ -131,6 +132,8 @@ export async function initCalendar() {
    }
    if (changed) fetchAndRender();
  });
+=======
+>>>>>>> e744b1829e99db6b80922f75542ced329138e474
 }

 function handleHAOAuthReturn() {
@@ -144,7 +147,11 @@ function handleHAOAuthReturn() {
  };
  if (params.has('ha_connected')) {
    showToast('Home Assistant verbunden');
+<<<<<<< HEAD
    window.history.replaceState({}, '', window.location.pathname + window.location.hash);
+=======
+    window.history.replaceState({}, '', window.location.pathname);
+>>>>>>> e744b1829e99db6b80922f75542ced329138e474
    fetchAndRender(true);
    api.get('/homeassistant/accounts').then(accs => {
      state.haAccounts = accs || [];
@@ -154,7 +161,11 @@ function handleHAOAuthReturn() {
  } else if (params.has('ha_error')) {
    const code = params.get('ha_error');
    showToast(errMap[code] || `HA-Anmeldung fehlgeschlagen: ${code}`, true);
+<<<<<<< HEAD
    window.history.replaceState({}, '', window.location.pathname + window.location.hash);
+=======
+    window.history.replaceState({}, '', window.location.pathname);
+>>>>>>> e744b1829e99db6b80922f75542ced329138e474
  }
 }

@@ -249,7 +260,10 @@ async function fetchAndRender(force = false, silent = false) {
    renderView();
    updateTitle();
    renderMiniCal();
+<<<<<<< HEAD
    writeUrlState();
+=======
+>>>>>>> e744b1829e99db6b80922f75542ced329138e474
    prefetchIfNeeded(start, end); // extend cache in background if approaching an edge
    return;
  }
@@ -2031,6 +2045,24 @@ function openSettingsModal() {
    document.getElementById(id + '-hex').value = val.toUpperCase();
    document.getElementById(id + '-preview').style.background = val;
  });
+
+  // Optional colour overrides — empty hex input means "auto"
+  [
+    { id: 'cfg-text-color', val: s.text_color },
+    { id: 'cfg-line-color', val: s.line_color },
+    { id: 'cfg-bg-color',   val: s.bg_color },
+  ].forEach(({ id, val }) => {
+    const hex = document.getElementById(id + '-hex');
+    const prev = document.getElementById(id + '-preview');
+    if (!hex || !prev) return;
+    if (val) {
+      hex.value = String(val).toUpperCase();
+      prev.style.background = val;
+    } else {
+      hex.value = '';
+      prev.style.background = 'transparent';
+    }
+  });
  document.getElementById('cfg-dim-past').checked = !!s.dim_past_events;
  document.getElementById('cfg-language').value = getLang();

@@ -2362,6 +2394,32 @@ function bindSettingsModal() {
    });
  });

+  // Optional override colours (text / line / background) — empty = use default
+  [
+    { prefix: 'cfg-text-color', defaultColor: '#c8c8d8' },
+    { prefix: 'cfg-line-color', defaultColor: '#3a3a52' },
+    { prefix: 'cfg-bg-color',   defaultColor: '#0e0e14' },
+  ].forEach(({ prefix, defaultColor }) => {
+    const preview = document.getElementById(prefix + '-preview');
+    const hex = document.getElementById(prefix + '-hex');
+    const reset = document.getElementById(prefix + '-reset');
+    if (!preview || !hex || !reset) return;
+    preview.addEventListener('click', async () => {
+      const picked = await openColorPicker(preview, hex.value || defaultColor);
+      if (picked) { hex.value = picked.toUpperCase(); preview.style.background = picked; }
+    });
+    hex.addEventListener('change', () => {
+      let val = hex.value.trim();
+      if (!val) { preview.style.background = 'transparent'; return; }
+      if (!val.startsWith('#')) val = '#' + val;
+      if (/^#[0-9a-fA-F]{6}$/.test(val)) { hex.value = val.toUpperCase(); preview.style.background = val; }
+    });
+    reset.addEventListener('click', () => {
+      hex.value = '';
+      preview.style.background = 'transparent';
+    });
+  });
+
  // Panel navigation
  document.querySelectorAll('.settings-nav-btn').forEach(btn => {
    btn.addEventListener('click', () => activateSettingsPanel(btn.dataset.panel));
@@ -2401,6 +2459,11 @@ function bindSettingsModal() {
      const btn = document.querySelector(`#${id} .contrast-btn.active`);
      return btn ? Number(btn.dataset.val) : null;
    };
+    // Optional override colours: empty input → null (use default)
+    const colourOrNull = (id) => {
+      const v = (document.getElementById(id).value || '').trim();
+      return /^#[0-9a-fA-F]{6}$/.test(v) ? v : null;
+    };
    const settings = {
      default_view:        document.getElementById('cfg-default-view').value,
      week_start_day:      document.getElementById('cfg-week-start').value,
@@ -2409,9 +2472,10 @@ function bindSettingsModal() {
      today_color:         document.getElementById('cfg-today-hex').value,
      month_divider_color: document.getElementById('cfg-month-divider-hex').value,
      month_label_color:   document.getElementById('cfg-month-label-hex').value,
+      text_color:          colourOrNull('cfg-text-color-hex'),
+      line_color:          colourOrNull('cfg-line-color-hex'),
+      bg_color:            colourOrNull('cfg-bg-color-hex'),
      dim_past_events:     document.getElementById('cfg-dim-past').checked,
-      text_contrast:       getActive('cfg-text-contrast') || 3,
-      line_contrast:       getActive('cfg-line-contrast') || 3,
      hour_height:         getActive('cfg-hour-height')   || 44,
      language:            document.getElementById('cfg-language').value,
    };
--- a/frontend/js/i18n.js
+++ b/frontend/js/i18n.js
@@ -67,6 +67,10 @@ const translations = {
    settings_today_color: 'Heutige-Tag-Farbe',
    settings_month_divider_color: 'Monatswechsel-Linie',
    settings_month_label_color: 'Monatskürzel-Farbe',
+    settings_text_color: 'Schriftfarbe',
+    settings_line_color: 'Linienfarbe',
+    settings_bg_color: 'Hintergrundfarbe',
+    reset: 'Reset',
    settings_text_contrast: 'Schriftkontrast',
    settings_text_contrast_desc: 'Helligkeit der Beschriftungen und Texte',
    contrast_dark: 'Dunkel', contrast_medium: 'Mittel',
@@ -154,7 +158,11 @@ const translations = {
    rec_every: 'Alle', rec_days: 'Tage', rec_weeks: 'Wochen', rec_months: 'Monate',
    rec_ends: 'Endet', rec_never: 'Nie', rec_after_count: 'Nach Anzahl',
    rec_on_date: 'Am Datum', rec_occurrences: 'Termine',
+<<<<<<< HEAD
    copy_to_calendar: 'Kopieren nach…', event_copied: 'Termin kopiert', copy: 'Kopieren',
+=======
+    copy_to_calendar: 'Kopieren nach…', event_copied: 'Termin kopiert',
+>>>>>>> e744b1829e99db6b80922f75542ced329138e474
    edit_before_copy: 'Vor dem Kopieren bearbeiten',
    event_updated: 'Termin aktualisiert', event_created: 'Termin erstellt',
    confirm_delete_event: '"{title}" wirklich löschen?',
@@ -278,6 +286,10 @@ const translations = {
    settings_today_color: 'Today highlight color',
    settings_month_divider_color: 'Month divider line',
    settings_month_label_color: 'Month label color',
+    settings_text_color: 'Text color',
+    settings_line_color: 'Line color',
+    settings_bg_color: 'Background color',
+    reset: 'Reset',
    settings_text_contrast: 'Text contrast',
    settings_text_contrast_desc: 'Brightness of labels and text',
    contrast_dark: 'Dark', contrast_medium: 'Medium',
@@ -365,7 +377,11 @@ const translations = {
    rec_every: 'Every', rec_days: 'days', rec_weeks: 'weeks', rec_months: 'months',
    rec_ends: 'Ends', rec_never: 'Never', rec_after_count: 'After count',
    rec_on_date: 'On date', rec_occurrences: 'occurrences',
+<<<<<<< HEAD
    copy_to_calendar: 'Copy to…', event_copied: 'Event copied', copy: 'Copy',
+=======
+    copy_to_calendar: 'Copy to…', event_copied: 'Event copied',
+>>>>>>> e744b1829e99db6b80922f75542ced329138e474
    edit_before_copy: 'Edit before copying',
    event_updated: 'Event updated', event_created: 'Event created',
    confirm_delete_event: 'Really delete "{title}"?',
--- a/frontend/js/utils.js
+++ b/frontend/js/utils.js
@@ -83,14 +83,47 @@ export function applyTheme(settings) {
  root.style.setProperty('--accent',      settings.accent_color  || '#ea4335');
  root.style.setProperty('--today-color', settings.today_color   || '#4285f4');

-  const tc = TEXT_CONTRAST[settings.text_contrast || 3];
-  root.style.setProperty('--text-1', tc.t1);
-  root.style.setProperty('--text-2', tc.t2);
-  root.style.setProperty('--text-3', tc.t3);
+  // Text colour: a custom hex (settings.text_color) wins over the legacy
+  // 1–4 contrast step. We derive --text-2/--text-3 by darkening the
+  // chosen colour so the secondary/tertiary text stays in the same hue.
+  if (settings.text_color) {
+    root.style.setProperty('--text-1', settings.text_color);
+    root.style.setProperty('--text-2', shadeHex(settings.text_color, -0.25));
+    root.style.setProperty('--text-3', shadeHex(settings.text_color, -0.55));
+  } else {
+    const tc = TEXT_CONTRAST[settings.text_contrast || 3];
+    root.style.setProperty('--text-1', tc.t1);
+    root.style.setProperty('--text-2', tc.t2);
+    root.style.setProperty('--text-3', tc.t3);
+  }

-  const lc = LINE_CONTRAST[settings.line_contrast || 3];
-  root.style.setProperty('--border',       lc.border);
-  root.style.setProperty('--border-light', lc.light);
+  // Line colour: custom hex overrides the legacy contrast step.
+  if (settings.line_color) {
+    root.style.setProperty('--border',       settings.line_color);
+    root.style.setProperty('--border-light', shadeHex(settings.line_color, -0.25));
+  } else {
+    const lc = LINE_CONTRAST[settings.line_contrast || 3];
+    root.style.setProperty('--border',       lc.border);
+    root.style.setProperty('--border-light', lc.light);
+  }
+
+  // Background colour: optional. If set, also tint the topbar/sidebar
+  // and surface variants so the whole UI stays coherent.
+  if (settings.bg_color) {
+    root.style.setProperty('--bg-app',     settings.bg_color);
+    root.style.setProperty('--bg-topbar',  shadeHex(settings.bg_color, 0.10));
+    root.style.setProperty('--bg-sidebar', shadeHex(settings.bg_color, 0.10));
+    root.style.setProperty('--bg-surface', shadeHex(settings.bg_color, 0.18));
+    root.style.setProperty('--bg-hover',   shadeHex(settings.bg_color, 0.26));
+    root.style.setProperty('--bg-active',  shadeHex(settings.bg_color, 0.40));
+  } else {
+    root.style.removeProperty('--bg-app');
+    root.style.removeProperty('--bg-topbar');
+    root.style.removeProperty('--bg-sidebar');
+    root.style.removeProperty('--bg-surface');
+    root.style.removeProperty('--bg-hover');
+    root.style.removeProperty('--bg-active');
+  }

  const hh = settings.hour_height || 44;
  root.style.setProperty('--hour-h', hh + 'px');
@@ -105,3 +138,24 @@ function hexToRgba(hex, alpha) {
  const b = parseInt(hex.slice(5,7), 16);
  return `rgba(${r},${g},${b},${alpha})`;
 }
+
+// Brighten (positive amount) or darken (negative) a hex colour.
+// Used to derive supporting shades (sidebar bg, hover bg, secondary text…)
+// from a single user-picked colour so the whole UI stays in the same family.
+function shadeHex(hex, amount) {
+  let r = parseInt(hex.slice(1,3), 16);
+  let g = parseInt(hex.slice(3,5), 16);
+  let b = parseInt(hex.slice(5,7), 16);
+  if (amount >= 0) {
+    r = Math.round(r + (255 - r) * amount);
+    g = Math.round(g + (255 - g) * amount);
+    b = Math.round(b + (255 - b) * amount);
+  } else {
+    const a = 1 + amount; // amount is negative: e.g. -0.25 → keep 75%
+    r = Math.round(r * a);
+    g = Math.round(g * a);
+    b = Math.round(b * a);
+  }
+  const h = n => Math.max(0, Math.min(255, n)).toString(16).padStart(2, '0');
+  return '#' + h(r) + h(g) + h(b);
+}
--- a/frontend/js/version.js
+++ b/frontend/js/version.js
@@ -1,2 +1,2 @@
 // Increment APP_VERSION with every code change
-export const APP_VERSION = 'v17';
+export const APP_VERSION = 'v18';
--- a/frontend/js/views/week.js
+++ b/frontend/js/views/week.js
@@ -63,6 +63,7 @@ export function renderWeek(container, currentDate, events, onSlotClick, onEventC
    const color = ev.color || ev.calendarColor || '#4285f4';
    const pastCls  = isPast(ev) ? 'past' : '';
    const multiCls = isMultiTimed ? 'multiday-timed' : '';
+<<<<<<< HEAD
    // continues-left/right: compute on date-only basis for all-day events
    let evStart = new Date(ev.start);
    let evEnd   = new Date(ev.end);
@@ -76,6 +77,10 @@ export function renderWeek(container, currentDate, events, onSlotClick, onEventC
    const lastDay = new Date(days[n-1]);  lastDay.setHours(0, 0, 0, 0);
    const cL = evStart < firstDay ? 'continues-left' : '';
    const cR = (ev.allDay ? evEnd > lastDay : evEnd > lastDayMidnight) ? 'continues-right' : '';
+=======
+    const cL = new Date(ev.start) < new Date(days[0]) ? 'continues-left' : '';
+    const cR = new Date(ev.end)   > (() => { const d = new Date(days[n-1]); d.setHours(24,0,0,0); return d; })() ? 'continues-right' : '';
+>>>>>>> e744b1829e99db6b80922f75542ced329138e474
    const label = isMultiTimed && isSameDay(new Date(ev.start), days[colStart])
      ? `${fmtTime(new Date(ev.start))} ${ev.title}`
      : ev.title;
@@ -247,6 +252,7 @@ function renderNowLine(container, days, hourH = 60) {
 function layoutWeekAllDay(evs, days) {
  const items = [];
  evs.forEach(ev => {
+<<<<<<< HEAD
    // For all-day events, normalize to date-only with inclusive end-day
    // (iCal stores exclusive end → subtract 1). For timed events, keep
    // the original strict-overlap logic so events ending exactly at
@@ -269,6 +275,13 @@ function layoutWeekAllDay(evs, days) {
        matches = new Date(ev.start) < de && new Date(ev.end) > ds;
      }
      if (matches) {
+=======
+    let colStart = -1, colEnd = -1;
+    days.forEach((day, i) => {
+      const ds = new Date(day); ds.setHours(0, 0, 0, 0);
+      const de = new Date(day); de.setHours(24, 0, 0, 0);
+      if (new Date(ev.start) < de && new Date(ev.end) > ds) {
+>>>>>>> e744b1829e99db6b80922f75542ced329138e474
        if (colStart === -1) colStart = i;
        colEnd = i;
      }
--- a/frontend/sw.js
+++ b/frontend/sw.js
@@ -7,7 +7,7 @@
 // the entry HTML / version files). New releases take effect on the next
 // reload, no manual SW unregister required.

-const CACHE_VERSION  = 'calendarr-v17';
+const CACHE_VERSION  = 'calendarr-v18';
 const OFFLINE_SHELL  = ['/', '/index.html'];

 self.addEventListener('install', event => {