merge: v2.4.0 theme builder into development

chore(release): Version-Bump 2.4.0 (6 Stellen) + CHANGELOG
fix(theme): bgLayer beim Custom-Wechsel ohne eigenes Bild leeren
2026-06-15 08:11:12 +02:00 · 2026-06-15 08:10:43 +02:00 · 2026-06-15 04:30:51 +02:00 · 2026-06-15 04:00:59 +02:00 · 2026-06-15 03:31:25 +02:00 · 2026-06-15 03:03:29 +02:00
12 changed files with 360 additions and 47 deletions
@@ -77,28 +77,47 @@ jobs:
          sha256sum *.zip > checksums-sha256.txt
          cat checksums-sha256.txt

-      # Gitea-native Release-Action. Legt das Release an, falls der Tag noch
-      # keins hat, oder aktualisiert das bestehende und haengt die Assets an.
-      # Der auto-injizierte GITHUB_TOKEN auf Gitea Actions hat Gitea-API-Scope
-      # und reicht fuer Release-Write.
-      - name: Attach to Gitea release
-        uses: https://gitea.com/actions/release-action@main
-        with:
-          files: |-
-            dist/hellion-newtab-${{ steps.version.outputs.tag }}-chrome.zip
-            dist/hellion-newtab-${{ steps.version.outputs.tag }}-firefox.zip
-            dist/hellion-newtab-${{ steps.version.outputs.tag }}-opera.zip
-            dist/checksums-sha256.txt
-          api_key: ${{ secrets.GITHUB_TOKEN }}
-          body: |
-            ## Hellion NewTab ${{ steps.version.outputs.tag }}
+      # Release per Gitea-API (curl), NICHT via gitea.com/actions/release-action: die ist `using: go`
+      # und stirbt auf diesem Runner mit exit 127 ("go not found"), weil act_runner v0.6.1 die go-Action
+      # weder im Job-Image noch im Runner kompiliert bekommt. curl + python3 sind im Job-Image vorhanden
+      # und laufen als normaler Step -> unabhaengig von go-Toolchain, Action-Cache und @main-Drift.
+      # GITHUB_API_URL/GITHUB_REPOSITORY/GITHUB_TOKEN injiziert Gitea Actions automatisch.
+      - name: Create release & upload assets (Gitea API)
+        env:
+          GITEA_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAG: ${{ steps.version.outputs.tag }}
+        run: |
+          set -euo pipefail
+          API="${GITHUB_API_URL:-https://gitea.hellion-forge.cloud/api/v1}"
+          REPO="${GITHUB_REPOSITORY}"
+          AUTH="Authorization: token ${GITEA_TOKEN}"

-            ### Installation
-            - **Chrome / Edge / Brave / Vivaldi:** `hellion-newtab-${{ steps.version.outputs.tag }}-chrome.zip`
-            - **Firefox:** `hellion-newtab-${{ steps.version.outputs.tag }}-firefox.zip`
-            - **Opera / Opera GX:** `hellion-newtab-${{ steps.version.outputs.tag }}-opera.zip`
+          # Release-Request-JSON (Body inkl. Installationshinweise) als python-Einzeiler bauen
+          # (mehrzeilig wuerde den YAML-run-Block brechen: Zeilen auf Spalte 0).
+          REQ=$(python3 -c 'import json,os; t=os.environ["TAG"]; body="## Hellion NewTab "+t+"\n\n### Installation\n- **Chrome / Edge / Brave / Vivaldi:** `hellion-newtab-"+t+"-chrome.zip`\n- **Firefox:** `hellion-newtab-"+t+"-firefox.zip`\n- **Opera / Opera GX:** `hellion-newtab-"+t+"-opera.zip`\n\nVollstaendige Installationsanleitung siehe README.\n\n### Checksums\n`checksums-sha256.txt` zum Verifizieren der Dateiintegritaet."; print(json.dumps({"tag_name": t, "name": "Hellion NewTab "+t, "body": body}))')

-            Vollstaendige Installationsanleitung siehe README.
+          # Idempotent: existierendes Release zum Tag wiederverwenden, sonst anlegen.
+          REL_ID=$(curl -sf -H "$AUTH" "$API/repos/$REPO/releases/tags/$TAG" \
+            | python3 -c 'import sys,json;print(json.load(sys.stdin).get("id",""))' 2>/dev/null || true)
+          if [ -z "$REL_ID" ]; then
+            REL_ID=$(printf '%s' "$REQ" \
+              | curl -sf -X POST -H "$AUTH" -H "Content-Type: application/json" -d @- "$API/repos/$REPO/releases" \
+              | python3 -c 'import sys,json;print(json.load(sys.stdin)["id"])')
+            echo "Release angelegt: $REL_ID"
+          else
+            echo "Release existiert bereits, wiederverwenden: $REL_ID"
+          fi

-            ### Checksums
-            `checksums-sha256.txt` zum Verifizieren der Dateiintegritaet.
+          # Vorhandene gleichnamige Assets entfernen (idempotent bei Re-Runs), dann hochladen.
+          EXIST=$(curl -sf -H "$AUTH" "$API/repos/$REPO/releases/$REL_ID/assets" 2>/dev/null || echo '[]')
+          for f in dist/hellion-newtab-$TAG-chrome.zip dist/hellion-newtab-$TAG-firefox.zip dist/hellion-newtab-$TAG-opera.zip dist/checksums-sha256.txt; do
+            name=$(basename "$f")
+            aid=$(printf '%s' "$EXIST" | NAME="$name" python3 -c 'import sys,json,os;n=os.environ["NAME"];print(next((a["id"] for a in json.load(sys.stdin) if a.get("name")==n), ""))' 2>/dev/null || true)
+            if [ -n "$aid" ]; then
+              echo "ersetze vorhandenes Asset $name (id $aid)"
+              curl -sf -X DELETE -H "$AUTH" "$API/repos/$REPO/releases/$REL_ID/assets/$aid" >/dev/null || true
+            fi
+            echo "Upload $name ..."
+            curl -sf -X POST -H "$AUTH" -F "attachment=@$f" "$API/repos/$REPO/releases/$REL_ID/assets?name=$name" >/dev/null
+          done
+          echo "Release $TAG fertig: alle Assets hochgeladen."
@@ -6,6 +6,19 @@ All notable changes per version. Format based on [Keep a Changelog](https://keep

 ---

+## [2.4.0] — 2026-06-15
+
+### Added
+- **Custom theme builder** — A new "Custom" tile in the theme picker opens an inline panel with six colour pickers (accent, background, board surface, and three text levels). Colours apply live to the dashboard; the accent drives the derived glow, border and toggle tints via `color-mix`. A non-blocking WCAG contrast indicator flags hard-to-read text/background combinations without preventing the choice. The custom theme persists across reloads and can be combined with a custom background image. A reset button returns the pickers to neutral defaults. New DE/EN i18n strings; the `<input type="color">` pickers are labelled for accessibility.
+- **Custom background via https URL** — The background URL field now accepts `https://` images in addition to local uploads (http stays out to avoid mixed content). A privacy note explains that a URL-loaded image is fetched from the remote server on every new tab.
+
+### Changed
+- Uploaded background images are downscaled (to the longest screen edge, capped at 2560px) and re-encoded as WebP before storage, to protect the `chrome.storage.local` quota.
+- The extension-page CSP gains `img-src 'self' https: data: blob:` so https and data-URL backgrounds load deterministically instead of relying on the browser default.
+- Onboarding slide 3 wording no longer hard-codes a fixed theme count.
+
+---
+
 ## [2.3.0] — 2026-06-14

 ### Added
@@ -2,7 +2,7 @@
  "manifest_version": 3,
  "name": "__MSG_extName__",
  "default_locale": "en",
-  "version": "2.3.0",
+  "version": "2.4.0",
  "description": "__MSG_extDesc__",
  "author": "Hellion Online Media - Florian Wathling",
  "homepage_url": "https://hellion-media.de",
@@ -54,7 +54,7 @@
    }
  ],
  "content_security_policy": {
-    "extension_pages": "script-src 'self'; object-src 'self'"
+    "extension_pages": "script-src 'self'; object-src 'self'; img-src 'self' https: data: blob:"
  },
  "icons": {
    "16":  "assets/icons/icon16.png",
@@ -2,7 +2,7 @@
  "manifest_version": 3,
  "name": "__MSG_extName__",
  "default_locale": "en",
-  "version": "2.3.0",
+  "version": "2.4.0",
  "description": "__MSG_extDesc__",
  "author": "Hellion Online Media - Florian Wathling",
  "homepage_url": "https://hellion-media.de",
@@ -36,7 +36,7 @@
    }
  ],
  "content_security_policy": {
-    "extension_pages": "script-src 'self'; object-src 'self'"
+    "extension_pages": "script-src 'self'; object-src 'self'; img-src 'self' https: data: blob:"
  },
  "icons": {
    "16":  "assets/icons/icon16.png",
@@ -2,7 +2,7 @@
  "manifest_version": 3,
  "name": "__MSG_extName__",
  "default_locale": "en",
-  "version": "2.3.0",
+  "version": "2.4.0",
  "description": "__MSG_extDesc__",
  "author": "Hellion Online Media - Florian Wathling",
  "homepage_url": "https://hellion-media.de",
@@ -51,7 +51,7 @@
  },

  "content_security_policy": {
-    "extension_pages": "script-src 'self'; object-src 'self'"
+    "extension_pages": "script-src 'self'; object-src 'self'; img-src 'self' https: data: blob:"
  },
  "icons": {
    "16": "assets/icons/icon16.png",
@@ -241,7 +241,7 @@
    <div class="panel-footer">
      <div class="about-block">
        <div class="about-logo" data-i18n="about.title">⬡ HELLION NEWTAB</div>
-        <div class="about-version">Version 2.3.0 · by Hellion Online Media</div>
+        <div class="about-version">Version 2.4.0 · by Hellion Online Media</div>

        <div class="about-links">
          <a href="https://hellion-media.de/impressum" target="_blank" class="about-link">
@@ -370,6 +370,23 @@
          <span class="theme-card-label">Stealth</span>
          <span class="theme-card-check">✓</span>
        </div>
+        <div class="theme-card theme-card-custom" data-value="custom" role="button" tabindex="0" aria-pressed="false" data-i18n-aria-label="theme.card.custom">
+          <span class="theme-card-custom-swatch"></span>
+          <span class="theme-card-label" data-i18n="theme.builder.title">Eigenes</span>
+          <span class="theme-card-check">✓</span>
+        </div>
+      </div>
+      <div class="theme-builder-panel hidden" id="themeBuilderPanel">
+        <div class="tb-grid">
+          <div class="tb-picker"><input type="color" id="tbAccent" value="#6c8cff"><label for="tbAccent" data-i18n="theme.builder.accent">Akzent</label></div>
+          <div class="tb-picker"><input type="color" id="tbBg" value="#0b0d12"><label for="tbBg" data-i18n="theme.builder.bg">Hintergrund</label></div>
+          <div class="tb-picker"><input type="color" id="tbBoard" value="#141821"><label for="tbBoard" data-i18n="theme.builder.board">Board-Fläche</label></div>
+          <div class="tb-picker"><input type="color" id="tbText" value="#e6e8ef"><label for="tbText" data-i18n="theme.builder.text">Text primär</label></div>
+          <div class="tb-picker"><input type="color" id="tbTextSec" value="#9aa3b8"><label for="tbTextSec" data-i18n="theme.builder.text_secondary">Text sekundär</label></div>
+          <div class="tb-picker"><input type="color" id="tbTextMuted" value="#5b6478"><label for="tbTextMuted" data-i18n="theme.builder.text_muted">Text gedämpft</label></div>
+        </div>
+        <div class="tb-contrast good" id="tbContrast"><span class="tb-dot"></span><span id="tbContrastText" data-i18n="theme.builder.contrast_good">Gut lesbar</span></div>
+        <div class="tb-foot"><button class="tb-reset" id="tbReset" data-i18n="theme.builder.reset">Zurücksetzen</button></div>
      </div>
      <div class="theme-modal-section">
        <h3 class="settings-section-title" data-i18n="settings.section.bg">HINTERGRUND</h3>
@@ -381,9 +398,10 @@
          <button class="btn-small" id="btnChangeBg" data-i18n="settings.bg_change">Ändern</button>
        </div>
        <div class="setting-row hidden" id="bgInputRow">
-          <input type="text" class="text-input full-width" id="bgUrlInput" placeholder="https://... oder leer für Standard" />
+          <input type="text" class="text-input full-width" id="bgUrlInput" data-i18n-placeholder="settings.bg_url.placeholder" placeholder="https://… oder leer für Standard" />
          <button class="btn-small" id="btnApplyBg" data-i18n="settings.bg_apply">Übernehmen</button>
        </div>
+        <p class="setting-desc bg-url-hint hidden" id="bgUrlHint" data-i18n="settings.bg_url.privacy_hint">Hinweis: Ein per URL eingebundenes Bild wird bei jedem Öffnen vom fremden Server geladen.</p>
        <div class="setting-row">
          <div class="setting-info">
            <span class="setting-label" data-i18n="settings.bg_upload">Datei hochladen</span>
@@ -349,6 +349,30 @@
  --toggle-on-bg:        color-mix(in srgb, var(--accent) var(--toggle-on-bg-pct), transparent);
  --bg-solid-fallback:   #0d0f12;
 }
+
+/* ============================================
+   THEME: CUSTOM (User-Theme-Builder, neutrale Defaults)
+   Inline-Vars aus applyCustomTheme() ueberschreiben die 6 Picker-Werte.
+   ============================================ */
+[data-theme="custom"] {
+  --accent:              #6c8cff;
+  --accent-glow-pct:     5%;
+  --board-hover-border-pct: 20%;
+  --logo-shadow-pct:     38%;
+  --toggle-on-bg-pct:    20%;
+  --bg-primary:          #0b0d12;
+  --bg-board:            rgba(20, 24, 33, 0.55);
+  --border:              rgba(255, 255, 255, 0.06);
+  --text-primary:        #e6e8ef;
+  --text-secondary:      #9aa3b8;
+  --text-muted:          #5b6478;
+  --font-display:        'Rajdhani', sans-serif;
+  --font-body:           'Inter', sans-serif;
+  --overlay-bg:          radial-gradient(circle at center, color-mix(in srgb, var(--bg-primary) 35%, transparent) 0%, color-mix(in srgb, var(--bg-primary) 88%, transparent) 100%);
+  --header-bg:           color-mix(in srgb, var(--bg-primary) 92%, transparent);
+  --toggle-on-bg:        color-mix(in srgb, var(--accent) var(--toggle-on-bg-pct), transparent);
+  --bg-solid-fallback:   var(--bg-primary);
+}
 }

 /* ============================================
@@ -413,6 +437,8 @@
 [data-theme="hellion-stealth"] .board-title { text-transform: uppercase; font-size: 0.85rem; letter-spacing: 2px; }
 [data-theme="hellion-stealth"] .board       { border-color: rgba(94, 194, 255, 0.15); backdrop-filter: blur(10px); }
 [data-theme="hellion-stealth"] .bm-item:hover { background: rgba(94, 194, 255, 0.10); border-left: 2px solid var(--accent); }
+[data-theme="custom"] .board         { border-color: color-mix(in srgb, var(--accent) 15%, transparent); }
+[data-theme="custom"] .bm-item:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
 }

 /* ============================================
@@ -2387,6 +2413,35 @@ body.show-desc .bm-desc { display: block; }
 .theme-modal-section .setting-row {
  padding: 8px 0;
 }
+.bg-url-hint {
+  padding: 2px 0 6px;
+  line-height: 1.4;
+}
+.theme-card-custom-swatch {
+  width: 100%; height: 56px; border-radius: 8px;
+  border: 1.5px dashed var(--accent);
+  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 6px, rgba(255,255,255,0.06) 6px 12px);
+}
+.theme-builder-panel { padding: 10px 0 4px; }
+.theme-builder-panel.hidden { display: none; }
+.tb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
+.tb-picker { display: flex; align-items: center; gap: 9px; }
+.tb-picker input[type="color"] {
+  width: 30px; height: 30px; padding: 0; border: 1px solid var(--border);
+  border-radius: 6px; background: none; cursor: pointer;
+}
+.tb-picker label { font-size: 12px; color: var(--text-secondary); }
+.tb-contrast { margin-top: 12px; font-size: 12px; display: flex; align-items: center; gap: 8px; }
+.tb-contrast .tb-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
+.tb-contrast.good { color: #7bd88f; } .tb-contrast.good .tb-dot { background: #3fbf6f; }
+.tb-contrast.ok   { color: #e3c97a; } .tb-contrast.ok   .tb-dot { background: #d8b24a; }
+.tb-contrast.bad  { color: #e58f8f; } .tb-contrast.bad  .tb-dot { background: #d65c5c; }
+.tb-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
+.tb-reset {
+  font-size: 11px; color: var(--text-secondary); background: none;
+  border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; cursor: pointer;
+}
+@media (max-width: 480px) { .tb-grid { grid-template-columns: 1fr; } }

 /* ============================================
   ACCORDION SETTINGS
@@ -119,7 +119,7 @@ async function checkBackupReminder() {
    const notesData = (widgetData && Array.isArray(widgetData.notes)) ? widgetData.notes : [];
    const calcHistory = (widgetData && widgetData.calculator) ? widgetData.calculator.history || [] : [];
    const timerPresets = (widgetData && widgetData.timer) ? widgetData.timer.presets || [] : [];
-    const data = { version: '2.3.0', exported: new Date().toISOString(), boards, settings, trash, notes: notesData, calculator: calcHistory, timerPresets };
+    const data = { version: '2.4.0', exported: new Date().toISOString(), boards, settings, trash, notes: notesData, calculator: calcHistory, timerPresets };
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement('a');
@@ -39,7 +39,7 @@ function initDataButtons() {
  btnExport.addEventListener('click', async () => {
    const widgetData = await Store.get('widgetStates');
    const data = {
-      version: '2.3.0',
+      version: '2.4.0',
      exported: new Date().toISOString(),
      boards,
      settings,
@@ -66,8 +66,8 @@ const STRINGS = {
    'onboarding.s2.f2':        'Importiere Browser-Lesezeichen über den „Import" Button im Header',
    'onboarding.s2.f3':        'Drag & Drop zum Umsortieren von Boards und Links',
    'onboarding.s2.f4':        'Blur-Modus für private Boards (🔒 Icon)',
-    'onboarding.s3.title':     '11 handgefertigte Themes',
-    'onboarding.s3.text':      'Klicke auf den „Theme" Button im Header um dein Theme zu wählen. Jedes hat seinen eigenen Stil und Farbpalette.',
+    'onboarding.s3.title':     'Handgefertigte Themes + dein eigenes',
+    'onboarding.s3.text':      'Klicke auf den „Theme" Button im Header, um ein Theme zu wählen oder dir ein eigenes zu bauen. Jedes hat seinen eigenen Stil.',
    'onboarding.s4.title':     'Widget-Toolbar',
    'onboarding.s4.f1':        'Die schwebenden Buttons rechts öffnen Widgets',
    'onboarding.s4.f2':        'Notes und Checklisten für schnelle Notizen',
@@ -385,7 +385,9 @@ const STRINGS = {
    'settings.visible_count':      'Sichtbare Bookmarks',
    'settings.visible_count.desc': 'Anzahl vor dem Ausblenden',
    'settings.bg_url':             'Bild-URL',
-    'settings.bg_url.desc':        'Eigenes Hintergrundbild per URL',
+    'settings.bg_url.desc':        'Eigenes Bild per https-URL oder lokalem Upload',
+    'settings.bg_url.placeholder': 'https://… oder leer für Standard',
+    'settings.bg_url.privacy_hint': 'Hinweis: Ein per URL eingebundenes Bild wird bei jedem Öffnen vom fremden Server geladen.',
    'settings.bg_change':          'Ändern',
    'settings.bg_apply':           'Übernehmen',
    'settings.bg_upload':          'Datei hochladen',
@@ -396,7 +398,7 @@ const STRINGS = {
    'settings.onboarding_btn':   'Start',
    'settings.reset_btn':        'Reset',
    'settings.bg_upload_btn':    'Upload',
-    'settings.bg_invalid_url':   'Nur lokale Bilder (Upload) sind als Hintergrund erlaubt.',
+    'settings.bg_invalid_url':   'Nur https-URLs oder lokale Bilder (Upload) sind als Hintergrund erlaubt.',
    'settings.bg_invalid_url.title': 'Ungültige URL',

    // Modals
@@ -423,6 +425,18 @@ const STRINGS = {
    'theme.card.satisfactory':    'Theme Satisfactory wählen',
    'theme.card.avorion':         'Theme Avorion wählen',
    'theme.card.hellion_stealth': 'Theme Hellion Stealth wählen',
+    'theme.card.custom':          'Eigenes Theme wählen',
+    'theme.builder.title':        'Eigenes',
+    'theme.builder.accent':       'Akzent',
+    'theme.builder.bg':           'Hintergrund',
+    'theme.builder.board':        'Board-Fläche',
+    'theme.builder.text':         'Text primär',
+    'theme.builder.text_secondary': 'Text sekundär',
+    'theme.builder.text_muted':   'Text gedämpft',
+    'theme.builder.reset':        'Zurücksetzen',
+    'theme.builder.contrast_good': 'Gut lesbar',
+    'theme.builder.contrast_ok':  'Grenzwertig',
+    'theme.builder.contrast_bad': 'Schwer lesbar',
    'toolbar.label':              'Widget-Werkzeugleiste',

    // About
@@ -527,8 +541,8 @@ const STRINGS = {
    'onboarding.s2.f2':        'Import browser bookmarks via the "Import" button in the header',
    'onboarding.s2.f3':        'Drag & drop to reorder boards and links',
    'onboarding.s2.f4':        'Blur mode for private boards (🔒 icon)',
-    'onboarding.s3.title':     '11 handcrafted themes',
-    'onboarding.s3.text':      'Click the "Theme" button in the header to choose your theme. Each has its own style and color palette.',
+    'onboarding.s3.title':     'Hand-crafted themes + your own',
+    'onboarding.s3.text':      'Click the "Theme" button in the header to choose a theme or build your own. Each has its own style.',
    'onboarding.s4.title':     'Widget Toolbar',
    'onboarding.s4.f1':        'The floating buttons on the right open widgets',
    'onboarding.s4.f2':        'Notes and checklists for quick notes',
@@ -846,7 +860,9 @@ const STRINGS = {
    'settings.visible_count':      'Visible bookmarks',
    'settings.visible_count.desc': 'Number before hiding',
    'settings.bg_url':             'Image URL',
-    'settings.bg_url.desc':        'Custom background image via URL',
+    'settings.bg_url.desc':        'Custom image via https URL or local upload',
+    'settings.bg_url.placeholder': 'https://… or empty for default',
+    'settings.bg_url.privacy_hint': 'Note: an image loaded via URL is fetched from the remote server every time you open a tab.',
    'settings.bg_change':          'Change',
    'settings.bg_apply':           'Apply',
    'settings.bg_upload':          'Upload file',
@@ -857,7 +873,7 @@ const STRINGS = {
    'settings.onboarding_btn':   'Start',
    'settings.reset_btn':        'Reset',
    'settings.bg_upload_btn':    'Upload',
-    'settings.bg_invalid_url':   'Only local images (upload) are allowed as background.',
+    'settings.bg_invalid_url':   'Only https URLs or local images (upload) are allowed as background.',
    'settings.bg_invalid_url.title': 'Invalid URL',

    // Modals
@@ -884,6 +900,18 @@ const STRINGS = {
    'theme.card.satisfactory':    'Select Satisfactory theme',
    'theme.card.avorion':         'Select Avorion theme',
    'theme.card.hellion_stealth': 'Select Hellion Stealth theme',
+    'theme.card.custom':          'Select custom theme',
+    'theme.builder.title':        'Custom',
+    'theme.builder.accent':       'Accent',
+    'theme.builder.bg':           'Background',
+    'theme.builder.board':        'Board surface',
+    'theme.builder.text':         'Text primary',
+    'theme.builder.text_secondary': 'Text secondary',
+    'theme.builder.text_muted':   'Text muted',
+    'theme.builder.reset':        'Reset',
+    'theme.builder.contrast_good': 'Good contrast',
+    'theme.builder.contrast_ok':  'Borderline',
+    'theme.builder.contrast_bad': 'Hard to read',
    'toolbar.label':              'Widget toolbar',

    // About
@@ -80,6 +80,8 @@ function openThemeModal() {
  document.addEventListener('keydown', _themeTrap);
  const first = _focusable(modal)[0];
  if (first) first.focus();
+  syncCustomPickers();
+  document.getElementById('themeBuilderPanel').classList.toggle('hidden', settings.theme !== 'custom');
 }
 function closeThemeModal() {
  const overlay = document.getElementById('themeOverlay');
@@ -113,7 +115,131 @@ function switchTheme(name) {
 */
 function isValidBgUrl(url) {
  return typeof url === 'string' && url.length > 0 &&
-    (url.startsWith('blob:') || url.startsWith('data:image/'));
+    (url.startsWith('blob:') || url.startsWith('data:image/') || url.startsWith('https://'));
+}
+
+// ---- THEME-BUILDER: Konstanten + reine Helfer ----
+const CUSTOM_DEFAULTS = {
+  accent: '#6c8cff', bgPrimary: '#0b0d12', bgBoard: '#141821',
+  textPrimary: '#e6e8ef', textSecondary: '#9aa3b8', textMuted: '#5b6478',
+};
+const HEX_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+
+function isValidHexColor(v) { return typeof v === 'string' && HEX_RE.test(v); }
+function safeHex(v, fallback) { return isValidHexColor(v) ? v : fallback; }
+
+function hexToRgba(hex, alpha) {
+  let h = hex.replace('#', '');
+  if (h.length === 3) h = h.split('').map(c => c + c).join('');
+  const r = parseInt(h.slice(0, 2), 16), g = parseInt(h.slice(2, 4), 16), b = parseInt(h.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+// WCAG 2.x Relativluminanz + Kontrastverhaeltnis
+function relLuminance(hex) {
+  let h = hex.replace('#', '');
+  if (h.length === 3) h = h.split('').map(c => c + c).join('');
+  const lin = [0, 2, 4].map(i => {
+    const c = parseInt(h.slice(i, i + 2), 16) / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
+}
+function contrastRatio(hexA, hexB) {
+  const a = relLuminance(hexA), b = relLuminance(hexB);
+  return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+}
+
+function updateContrastIndicator(textHex, bgHex) {
+  const el = document.getElementById('tbContrast');
+  if (!el) return;
+  const ratio = contrastRatio(textHex, bgHex);
+  let cls, key;
+  if (ratio >= 4.5) { cls = 'good'; key = 'theme.builder.contrast_good'; }
+  else if (ratio >= 3) { cls = 'ok'; key = 'theme.builder.contrast_ok'; }
+  else { cls = 'bad'; key = 'theme.builder.contrast_bad'; }
+  el.classList.remove('good', 'ok', 'bad');
+  el.classList.add(cls);
+  const txt = document.getElementById('tbContrastText');
+  if (txt) txt.textContent = `${t(key)} (${ratio.toFixed(1)}:1)`;
+}
+
+// Setzt data-theme='custom' + 6 validierte Inline-Vars (Gate vor jedem setProperty).
+function applyCustomTheme(ct) {
+  const root = document.documentElement;
+  const c = ct || {};
+  const accent        = safeHex(c.accent,        CUSTOM_DEFAULTS.accent);
+  const bgPrimary     = safeHex(c.bgPrimary,     CUSTOM_DEFAULTS.bgPrimary);
+  const bgBoard       = safeHex(c.bgBoard,       CUSTOM_DEFAULTS.bgBoard);
+  const textPrimary   = safeHex(c.textPrimary,   CUSTOM_DEFAULTS.textPrimary);
+  const textSecondary = safeHex(c.textSecondary, CUSTOM_DEFAULTS.textSecondary);
+  const textMuted     = safeHex(c.textMuted,     CUSTOM_DEFAULTS.textMuted);
+
+  root.setAttribute('data-theme', 'custom');
+  root.style.setProperty('--accent', accent);
+  root.style.setProperty('--bg-primary', bgPrimary);
+  root.style.setProperty('--bg-board', hexToRgba(bgBoard, 0.55));
+  root.style.setProperty('--text-primary', textPrimary);
+  root.style.setProperty('--text-secondary', textSecondary);
+  root.style.setProperty('--text-muted', textMuted);
+
+  document.querySelectorAll('.theme-card').forEach(card => {
+    const on = card.dataset.value === 'custom';
+    card.classList.toggle('active', on);
+    card.setAttribute('aria-pressed', on ? 'true' : 'false');
+  });
+  updateContrastIndicator(textPrimary, bgPrimary);
+
+  // Kein eigenes Bild gesetzt -> bgLayer leeren, damit --bg-primary (Solid) durchscheint
+  // statt des Hintergrundbilds eines zuvor gewaehlten Presets (das sonst haengen bliebe).
+  if (!(settings.bgUrl && isValidBgUrl(settings.bgUrl))) {
+    document.getElementById('bgLayer').style.backgroundImage = '';
+  }
+}
+
+// Entfernt die 6 Inline-Vars (Rueckwechsel auf Preset / Reset).
+function clearCustomTheme() {
+  const root = document.documentElement;
+  ['--accent', '--bg-primary', '--bg-board', '--text-primary', '--text-secondary', '--text-muted']
+    .forEach(v => root.style.removeProperty(v));
+}
+
+// Schreibt die gespeicherten (oder Default-) Farben in die 6 Picker-Inputs.
+function syncCustomPickers() {
+  const ct = settings.customTheme || {};
+  const set = (id, key) => { const el = document.getElementById(id); if (el) el.value = safeHex(ct[key], CUSTOM_DEFAULTS[key]); };
+  set('tbAccent', 'accent'); set('tbBg', 'bgPrimary'); set('tbBoard', 'bgBoard');
+  set('tbText', 'textPrimary'); set('tbTextSec', 'textSecondary'); set('tbTextMuted', 'textMuted');
+}
+
+// Eigenes Upload-Bild Quota-schonend verkleinern: auf die laengste Bildschirmkante
+// (× devicePixelRatio, gedeckelt) herunterrechnen und als WebP neu kodieren. Das spart
+// gegenueber dem rohen Base64-Upload locker den Grossteil der chrome.storage.local-Quota.
+// Greift nur beim lokalen Upload (data:-URL ist same-origin, Canvas wird nicht getainted);
+// https-Hintergruende liegen remote und kosten keine Quota.
+function downscaleBgImage(dataUrl) {
+  const MAX_DIM = Math.min(2560, Math.round(Math.max(screen.width, screen.height) * (window.devicePixelRatio || 1)));
+  const QUALITY = 0.82;
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      const scale = Math.min(1, MAX_DIM / Math.max(img.naturalWidth, img.naturalHeight));
+      const w = Math.max(1, Math.round(img.naturalWidth  * scale));
+      const h = Math.max(1, Math.round(img.naturalHeight * scale));
+      const canvas = document.createElement('canvas');
+      canvas.width = w;
+      canvas.height = h;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) { resolve(dataUrl); return; } // kein 2D-Context -> Original behalten
+      ctx.drawImage(img, 0, 0, w, h);
+      // WebP wo verfuegbar (Chrome/Opera/FF142+); sonst faellt toDataURL auf PNG zurueck -> dann JPEG
+      let out = canvas.toDataURL('image/webp', QUALITY);
+      if (!out.startsWith('data:image/webp')) out = canvas.toDataURL('image/jpeg', QUALITY);
+      resolve(out);
+    };
+    img.onerror = () => reject(new Error('image decode failed'));
+    img.src = dataUrl;
+  });
 }

 // ---- ACCORDION ----
@@ -344,7 +470,11 @@ function applySettings() {
  const langEl = document.getElementById('settingLanguage');
  if (langEl) langEl.value = settings.language || 'auto';

-  applyTheme(settings.theme || 'nebula', !!settings.bgUrl);
+  if (settings.theme === 'custom') {
+    applyCustomTheme(settings.customTheme);
+  } else {
+    applyTheme(settings.theme || 'nebula', !!settings.bgUrl);
+  }

  if (settings.bgUrl && isValidBgUrl(settings.bgUrl)) {
    document.getElementById('bgLayer').style.backgroundImage = `url('${settings.bgUrl}')`;
@@ -371,10 +501,25 @@ function bindSettingsEvents() {
  const themeCards = document.querySelectorAll('.theme-card');
  function selectThemeCard(card) {
    const name = card.dataset.value;
-    if (!name || name === settings.theme) return Promise.resolve();
+    if (!name) return Promise.resolve();
+
+    // Custom: VOR dem name===settings.theme-Guard, damit ein Re-Klick das Panel wieder oeffnet.
+    if (name === 'custom') {
+      settings.theme = 'custom';
+      if (!settings.customTheme) settings.customTheme = { ...CUSTOM_DEFAULTS };
+      themeCards.forEach(c => c.setAttribute('aria-pressed', c === card ? 'true' : 'false'));
+      applyCustomTheme(settings.customTheme); // setzt data-theme + Inline-Vars; bgUrl UNANGETASTET (Koexistenz)
+      syncCustomPickers();
+      document.getElementById('themeBuilderPanel').classList.remove('hidden');
+      return saveSettings();
+    }
+
+    if (name === settings.theme) return Promise.resolve();
    settings.theme  = name;
    settings.bgUrl  = '';
    document.getElementById('bgUrlInput').value = '';
+    clearCustomTheme();                       // Inline-Vars weg beim Rueckwechsel auf ein Preset
+    document.getElementById('themeBuilderPanel').classList.add('hidden');
    // aria-pressed synchron halten — applyTheme/switchTheme pflegt nur die .active-Klasse, nicht ARIA
    themeCards.forEach(c => c.setAttribute('aria-pressed', c === card ? 'true' : 'false'));
    switchTheme(name); // WICHTIG: switchTheme aus Phase 4 (View-Transition-Wrapper), NICHT applyTheme direkt — sonst geht der Theme-Fade verloren
@@ -390,6 +535,31 @@ function bindSettingsEvents() {
    });
  });

+  // Theme-Builder Picker
+  const TB_PICKERS = [['tbAccent', 'accent'], ['tbBg', 'bgPrimary'], ['tbBoard', 'bgBoard'],
+                      ['tbText', 'textPrimary'], ['tbTextSec', 'textSecondary'], ['tbTextMuted', 'textMuted']];
+  TB_PICKERS.forEach(([id, key]) => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.addEventListener('input', () => {                 // live waehrend des Ziehens
+      if (!settings.customTheme) settings.customTheme = { ...CUSTOM_DEFAULTS };
+      settings.customTheme[key] = el.value;
+      settings.theme = 'custom';
+      applyCustomTheme(settings.customTheme);
+    });
+    el.addEventListener('change', () => saveSettings()); // persistiert beim Loslassen/Schliessen
+  });
+
+  const tbReset = document.getElementById('tbReset');
+  if (tbReset) {
+    tbReset.addEventListener('click', async () => {
+      settings.customTheme = { ...CUSTOM_DEFAULTS };
+      applyCustomTheme(settings.customTheme);
+      syncCustomPickers();
+      await saveSettings();
+    });
+  }
+
  // Accordion initialisieren
  initAccordion();

@@ -434,7 +604,9 @@ function bindSettingsEvents() {

  // Background URL (im Theme-Modal)
  document.getElementById('btnChangeBg').addEventListener('click', () => {
-    document.getElementById('bgInputRow').classList.toggle('hidden');
+    // toggle() liefert true, wenn 'hidden' jetzt gesetzt ist -> Hinweis exakt parallel schalten
+    const isNowHidden = document.getElementById('bgInputRow').classList.toggle('hidden');
+    document.getElementById('bgUrlHint').classList.toggle('hidden', isNowHidden);
  });
  document.getElementById('btnApplyBg').addEventListener('click', async () => {
    const url = document.getElementById('bgUrlInput').value.trim();
@@ -458,8 +630,14 @@ function bindSettingsEvents() {
    const reader = new FileReader();
    reader.onload = async ev => {
      if (!isValidBgUrl(ev.target.result)) return;
-      settings.bgUrl = ev.target.result;
-      document.getElementById('bgLayer').style.backgroundImage = `url('${ev.target.result}')`;
+      let bg = ev.target.result;
+      try {
+        bg = await downscaleBgImage(bg); // Quota-Schutz: verkleinern + WebP
+      } catch {
+        // Downscale fehlgeschlagen -> Original-Upload nutzen (besser als gar kein Bild)
+      }
+      settings.bgUrl = bg;
+      document.getElementById('bgLayer').style.backgroundImage = `url('${bg}')`;
      await saveSettings();
    };
    reader.onerror = () => {
@@ -512,7 +690,8 @@ function bindSettingsEvents() {
    settings = { compact: false, shortenTitles: false, newTab: true, showDesc: false,
                 hideExtra: false, visibleCount: 10, bgUrl: '', theme: 'nebula',
                 showSearch: true, searchEngine: 'google', toolbarPos: 'right',
-                 imageRefEnabled: false, language: 'auto' };
+                 imageRefEnabled: false, language: 'auto', customTheme: null };
+    clearCustomTheme();
    await saveBoards();
    await saveTrash();
    await saveSettings();
@@ -25,6 +25,7 @@ let settings = {
  visibleCount:  10,
  bgUrl:         '',
  theme:         'nebula',
+  customTheme:   null,
  showSearch:    true,
  searchEngine:  'google',
  toolbarPos:    'right',
Author	SHA1	Message	Date
JonKazama-Hellion	083e78e693	merge: v2.4.0 theme builder into development	2026-06-15 08:11:12 +02:00
JonKazama-Hellion	0001de7dd7	chore(release): Version-Bump 2.4.0 (6 Stellen) + CHANGELOG	2026-06-15 08:10:43 +02:00
JonKazama-Hellion	c985a531ef	fix(theme): bgLayer beim Custom-Wechsel ohne eigenes Bild leeren Preset->Custom liess das alte Preset-Hintergrundbild im bgLayer haengen, weil applyCustomTheme den bgLayer nie anfasste. Jetzt wird er geleert, wenn keine gueltige bgUrl gesetzt ist, sodass --bg-primary (Solid) durchscheint.	2026-06-15 04:30:51 +02:00
JonKazama-Hellion	2af52fc46d	feat(theme): Verdrahtung Custom-Theme (applySettings, selectThemeCard, Picker, Reset, Modal-Sync)	2026-06-15 04:00:59 +02:00
JonKazama-Hellion	1bd2cbb9ad	feat(theme): applyCustomTheme/clearCustomTheme/syncCustomPickers + Hex-Validierung + WCAG-Kontrast	2026-06-15 03:31:25 +02:00
JonKazama-Hellion	d305d37da5	feat(theme): Eigenes-Kachel + 6-Picker-Panel im Theme-Modal	2026-06-15 03:03:29 +02:00
JonKazama-Hellion	96d4eaa8a1	feat(theme): [data-theme=custom]-Block + Theme-Builder-Panel-Styling	2026-06-15 02:34:42 +02:00
JonKazama-Hellion	22e74d41bc	feat(theme): i18n-Keys für Theme-Builder + Onboarding-Wortlaut entschaerft	2026-06-15 02:06:38 +02:00
JonKazama-Hellion	d0feddbda0	feat(theme): customTheme-Default im State + Reset-Literal	2026-06-15 01:38:55 +02:00
JonKazama-Hellion	9beeec3182	feat(theme): eigenes Hintergrundbild um https-URLs und Quota-Schutz erweitern - isValidBgUrl akzeptiert jetzt https:// zusätzlich zu data:/blob: (http bleibt ausgeschlossen wegen Mixed-Content) - CSP img-src 'self' https: data: blob: in allen 3 Manifesten, damit remote Hintergründe deterministisch laden statt still am CSP-Default zu haengen - Upload-Bilder werden vor dem Speichern per Canvas auf die Bildschirmkante (max 2560px) verkleinert und als WebP re-kodiert -> schont chrome.storage.local - URL-Feld: Platzhalter lokalisierbar (data-i18n-placeholder) + Tracking-Hinweis, dass ein per URL geladenes Bild bei jedem Oeffnen vom fremden Server kommt - i18n DE/EN: bg_url.desc + bg_invalid_url an https angepasst, 2 neue Keys	2026-06-14 21:34:34 +02:00
JonKazama-Hellion	42e3cf0dec	ci(release): Release via Gitea-API (curl) statt go-basierter release-action Code Quality / Validate Extension (push) Successful in 5s Details Release / Build & Release (push) Successful in 6s Details Security / scan (push) Successful in 42s Details Die gitea.com/actions/release-action ist 'using: go' und scheitert auf dem Forge-Runner mit exit 127 — act_runner v0.6.1 bekommt die go-Action weder im Job-Image noch im Runner kompiliert ('go: executable file not found'). Der Schritt legt das Release jetzt per curl gegen die Gitea-API an und laedt die Assets hoch, idempotent (vorhandenes Release/Assets werden wiederverwendet bzw. ersetzt). Laeuft als normaler run-Step im Job-Image und ist damit unabhaengig von go-Toolchain, Action-Cache und @main-Drift.	2026-06-14 21:05:36 +02:00
JonKazama-Hellion	2877edee69	release: v2.3.0 Code Quality / Validate Extension (push) Successful in 5s Details Security / scan (push) Successful in 19s Details Release / Build & Release (push) Failing after 12s Details	2026-06-14 20:22:11 +02:00