Podcast-Oberfläche aus diora-android 6a02899 (Vorlesen in der Leiste, Zurück auf dem Podcast-Tab, Farbvariablen); sw v103

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

static/js/sw.js

@@ -2,7 +2,7 @@
  * diora service worker — caches the app shell for offline use.
  */
 
-const CACHE = 'diora-v102';
+const CACHE = 'diora-v103';
 const SHELL = [
   '/static/css/app.css',
   '/static/js/app.js',

static/podcasts/native-podcast.js

@@ -1,4 +1,4 @@
-// Copied from diora-android 5821dfa 2026-10-12: web-native/static/native-podcast.js
+// Copied from diora-android 6a02899 2026-10-14: web-native/static/native-podcast.js
 // by tools/sync_podcast_ui.py. Do not edit here: change it in diora-android
 // and copy again. The browser host is static/js/podcasts-web.js.
 
@@ -198,7 +198,6 @@
     return d.getFullYear() === now.getFullYear() ? dm : dm + String(d.getFullYear() % 100).padStart(2, '0');
   }
 
-  let toastTimer = 0;
   function toast(text) {
     let t = $id('nui-radio-toast');
     if (!t) {
@@ -208,8 +207,9 @@
     }
     t.textContent = text;
     t.classList.add('nui-show');
-    clearTimeout(toastTimer);
+    // The element is shared (radio and podcasts): so is its timer, or one hides the other's text early.
-    toastTimer = setTimeout(() => t.classList.remove('nui-show'), 2600);
+    clearTimeout(t.nuiTimer);
+    t.nuiTimer = setTimeout(() => t.classList.remove('nui-show'), 2600);
   }
 
   // Feed titles sometimes arrive with HTML entities still in them (&).
@@ -2801,20 +2801,32 @@
     const text = el('button', 'nui-mini-text');
     text.type = 'button';
     text.append(el('span', 'nui-mini-station'), el('span', 'nui-mini-track'));
-    text.addEventListener('click', () => (miniKind === 'ambient' ? showTab('ambient')
+    text.addEventListener('click', () => (miniKind === 'tts' ? ttsShowBook()
+      : miniKind === 'ambient' ? showTab('ambient')
       : miniKind === 'radio' ? openRadioPlayer() : openPlayer()));
     const devices = button('⇄', 'Wiedergabe auf …', deviceMenu, 'nui-mini-devices');
     const here = button('⇩', 'Hier abspielen', takeOver, 'nui-mini-here');
     devices.hidden = here.hidden = true;
+    const tts = (sign, label, fn, cls) => {
+      const b = button(sign, label, () => { const t = window.__dioraTts; if (t) fn(t); }, 'nui-tts-btn ' + cls);
+      b.hidden = true;
+      return b;
+    };
     mini.append(art('', 'mini'), text,
+      tts('⏮︎', 'Voriger Satz', t => t.prev(), 'nui-tts-prev'),
       button('↺', '15 s zurück', () => (miniKind === 'remote'
         ? remoteCmd('skip', -(devicePrefs().skip_back || 15)) : N.podcastSkip(false)), 'nui-pod-skip'),
       button('☆', 'Sender speichern', () => window.__dioraRadioSave && window.__dioraRadioSave(), 'nui-mini-save'),
       devices, here,
       button('▶', 'Abspielen', () => (miniKind === 'remote' ? remoteToggle()
+        : miniKind === 'tts' ? window.__dioraTts && window.__dioraTts.toggle()
         : miniKind === 'ambient' ? ambientToggle()
-        : miniKind === 'radio' ? window.__dioraRadioToggle && window.__dioraRadioToggle() : N.podcastToggle()), 'nui-mini-toggle'));
+        : miniKind === 'radio' ? window.__dioraRadioToggle && window.__dioraRadioToggle() : N.podcastToggle()), 'nui-mini-toggle'),
+      tts('⏭︎', 'Nächster Satz', t => t.next(), 'nui-tts-next'),
+      tts('■', 'Vorlesen beenden', t => t.stop(), 'nui-tts-stop'));
     dock.prepend(mini);
+    // Read-aloud uses this bar; app.js leaves out its own (.tts-bar).
+    window.__dioraTtsDock = true;
     // One player for podcasts and radio: the radio's own bar steps aside.
     document.documentElement.classList.add('nui-one-player');
 
@@ -2881,11 +2893,57 @@
     t.title = a.playing ? 'Ambient stoppen' : 'Ambient abspielen';
     const box = mini.querySelector('.nui-pod-art');
     setArt(box, '');
+    const ttsArt = box.querySelector('.nui-tts-art');
+    if (ttsArt) ttsArt.remove();
     if (!box.querySelector('.nui-amb-art')) { box.textContent = ''; box.append(el('span', 'nui-pod-initial nui-amb-art', '∿')); }
     mini.querySelector('.nui-pod-mini-bar span').style.width = a.playing ? '100%' : '0';
     return true;
   }
 
+  // Read-aloud (app.js, window.__dioraTts; on Android with the device's voice) has the bar
+  // while it runs: the book, the chapter, sentence back / pause / sentence on / stop.
+  function ttsState() {
+    try { return window.__dioraTts ? window.__dioraTts.state() : null; } catch (e) { return null; }
+  }
+
+  function ttsButtons(on) {
+    if (!mini) return;
+    mini.querySelectorAll('.nui-tts-btn').forEach(b => { b.hidden = !on; });
+  }
+
+  // A tap on the text: back to the book that's being read, if it isn't open.
+  function ttsShowBook() {
+    const s = ttsState();
+    if (s && s.bookId && typeof openBook === 'function' && (typeof currentBookId === 'undefined' || currentBookId !== s.bookId)) openBook(s.bookId);
+  }
+
+  function renderTtsMini() {
+    const s = ttsState();
+    document.documentElement.classList.toggle('nui-tts-on', !!(s && s.active));
+    if (!mini || !s || !s.active) return false;
+    miniKind = 'tts';
+    document.documentElement.classList.remove('nui-pod-playing');
+    document.documentElement.classList.add('nui-pod-mini-open');
+    mini.hidden = false;
+    mini.classList.add('nui-mini-radio');
+    mini.classList.remove('nui-mini-remote');
+    for (const c of ['.nui-pod-skip', '.nui-mini-save', '.nui-mini-devices', '.nui-mini-here']) mini.querySelector(c).hidden = true;
+    ttsButtons(true);
+    mini.querySelector('.nui-mini-station').textContent = s.title || 'Vorlesen';
+    mini.querySelector('.nui-mini-track').textContent = (s.paused ? 'Angehalten' : 'Vorlesen') + (s.chapter ? ' · ' + s.chapter : '');
+    const t = mini.querySelector('.nui-mini-toggle');
+    t.textContent = s.paused ? '▶' : '❚❚';
+    t.title = s.paused ? 'Weiterlesen' : 'Pause';
+    const box = mini.querySelector('.nui-pod-art');
+    setArt(box, '');
+    const amb = box.querySelector('.nui-amb-art');
+    if (amb) amb.remove();
+    if (!box.querySelector('.nui-tts-art')) { box.textContent = ''; box.append(el('span', 'nui-pod-initial nui-tts-art', '❝')); }
+    mini.querySelector('.nui-pod-mini-bar span').style.width = typeof s.progress === 'number' ? Math.min(100, s.progress * 100) + '%' : '0';
+    return true;
+  }
+  window.addEventListener('diora-tts', () => renderMini());
+
   // The bar names a running sleep timer: "… · ☾ 12 min".
   function sleepSuffix() {
     const l = sleepLabel();
@@ -2916,12 +2974,14 @@
 
   function renderMini() {
     renderAmbientSleep();
+    if (renderTtsMini()) return;
+    ttsButtons(false);
     if (renderAmbientMini()) return;
     const r = remote();
     const isPod = player.kind === 'podcast';
     document.documentElement.classList.toggle('nui-pod-playing', isPod || !!r);
     if (!mini) return;
-    const ambArt = mini.querySelector('.nui-amb-art');
+    const ambArt = mini.querySelector('.nui-amb-art, .nui-tts-art');
     if (ambArt) ambArt.remove();
     const radio = isPod || r ? null : radioNow();
     miniKind = r ? 'remote' : isPod ? 'podcast' : radio ? 'radio' : '';
@@ -4453,9 +4513,11 @@
       if (closeDownloads()) return true;
       if (closeNotes()) return true;
       if (closePlayer()) return true;
-      if (typeof _currentTopTab !== 'undefined' && _currentTopTab === 'podcasts' && stopSelecting()) return true;
+      const onPodcasts = typeof _currentTopTab !== 'undefined' && _currentTopTab === 'podcasts';
-      if (back && back()) return true;
+      if (onPodcasts && stopSelecting()) return true;
-      if (typeof _currentTopTab !== 'undefined' && _currentTopTab === 'podcasts') {
+      // The tab's own pages go back one by one, before the next handler: that one would
+      // leave the tab for Home (native-radio.js). A menu or dialog on top closes first.
+      if (onPodcasts && !somethingOnTop()) {
         if (closePreview()) return true;
         if (feedView) { feedView = null; render(); return true; }
         // From the search back to the list it was opened from.
@@ -4465,12 +4527,22 @@
           render();
           return true;
         }
+      }
+      if (back && back()) return true;
+      if (onPodcasts) {
         showTab('books');
         return true;
       }
       return false;
     };
 
+    // A menu, dialog or note sheet over the page (native-ui.js, app.js's modal).
+    function somethingOnTop() {
+      if (document.querySelector('#nui-sheet, .nui-backdrop, .note-bottom-sheet')) return true;
+      const modal = $id('modal-dialog');
+      return !!modal && getComputedStyle(modal).display !== 'none';
+    }
+
     // A swipe waiting for „Rückgängig“ is done when the page goes away.
     document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') commitSwipe(); });
     window.addEventListener('pagehide', commitSwipe);

static/podcasts/podcast-ui.css

@@ -1,4 +1,4 @@
-/* Copied from diora-android 5821dfa 2026-10-12: the podcast parts of web-native/static/native.css
+/* Copied from diora-android 88b4842 2026-10-14: the podcast parts of web-native/static/native.css
    (bottom sheet, podcasts) by tools/sync_podcast_ui.py. Do not edit here.
    The web's own additions are in podcasts-web.css. */
 
@@ -19,7 +19,7 @@
 .nui-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.6);
+  background: var(--scrim, rgba(0, 0, 0, 0.6));
 }
 
 .nui-panel {
@@ -70,7 +70,7 @@
 
 .nui-row:active,
 .nui-row-main:active {
-  background: #1d1d1d;
+  background: var(--hover, #1d1d1d);
 }
 
 .nui-row-icon {
@@ -183,15 +183,15 @@ html.nui-one-player #nui-mini { display: none !important; }
   min-width: 18px;
   padding: 1px 5px;
   border-radius: 9px;
-  background: #2a2a2a;
+  background: var(--raised, #2a2a2a);
-  color: #ddd;
+  color: var(--fg, #ddd);
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: 0;
   text-align: center;
   font-variant-numeric: tabular-nums;
 }
-.nui-pod-count-queue { background: var(--accent); color: #fff; }
+.nui-pod-count-queue { background: var(--accent); color: var(--on-accent, #fff); }
 
 .nui-pod-summary { padding: 6px 2px 10px; font-size: 12px; color: var(--nui-muted); }
 .nui-pod-empty { padding: 32px 12px; color: var(--nui-muted); text-align: center; line-height: 1.5; font-family: var(--nui-sans); letter-spacing: normal; font-weight: 400; font-size: 14px; }
@@ -207,7 +207,7 @@ html.nui-one-player #nui-mini { display: none !important; }
   background: var(--bg);
   -webkit-tap-highlight-color: transparent;
 }
-.nui-pod-row:active { background: #141414; }
+.nui-pod-row:active { background: var(--hover, #141414); }
 .nui-pod-row.nui-pod-played .nui-pod-title { color: var(--nui-muted); font-weight: 400; }
 .nui-pod-row.nui-pod-gone { display: none; }
 .nui-pod-row.nui-pod-current .nui-pod-title { color: var(--accent); }
@@ -219,13 +219,13 @@ html.nui-one-player #nui-mini { display: none !important; }
   height: 46px;
   border-radius: 4px;
   overflow: hidden;
-  background: #1c1c1c;
+  background: var(--raised, #1c1c1c);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 /* No cover anywhere: the podcast's initial on a neutral tile. */
-.nui-pod-initial { font-size: 20px; font-weight: 700; color: #6a6a6a; line-height: 1; }
+.nui-pod-initial { font-size: 20px; font-weight: 700; color: var(--muted, #6a6a6a); line-height: 1; }
 .nui-pod-art-big .nui-pod-initial { font-size: 30px; }
 .nui-pod-art-player .nui-pod-initial { font-size: 96px; }
 .nui-pod-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
@@ -257,7 +257,7 @@ html.nui-one-player #nui-mini { display: none !important; }
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.nui-pod-progress { height: 3px; margin-top: 2px; border-radius: 2px; background: #2a2a2a; overflow: hidden; max-width: 160px; }
+.nui-pod-progress { height: 3px; margin-top: 2px; border-radius: 2px; background: var(--raised, #2a2a2a); overflow: hidden; max-width: 160px; }
 .nui-pod-progress > span { display: block; height: 100%; background: var(--accent); }
 .nui-pod-badge {
   flex: none;
@@ -289,7 +289,7 @@ html.nui-one-player #nui-mini { display: none !important; }
   transition: none;
   position: relative;
   z-index: 2;
-  background: #1a1a1a;
+  background: var(--raised, #1a1a1a);
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
 }
 
@@ -314,7 +314,7 @@ html.nui-one-player #nui-mini { display: none !important; }
 }
 #nui-pod-mini[hidden] { display: none; }
 #nui-pod-mini [hidden] { display: none !important; }
-.nui-pod-mini-bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: #2a2a2a; }
+.nui-pod-mini-bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--raised, #2a2a2a); }
 .nui-pod-mini-bar span { display: block; height: 100%; background: var(--accent); }
 .nui-pod-skip { font-size: 20px; }
 
@@ -323,7 +323,7 @@ html.nui-one-player #nui-mini { display: none !important; }
   position: fixed;
   inset: 0;
   z-index: 880;
-  background: rgba(0, 0, 0, 0.6);
+  background: var(--scrim, rgba(0, 0, 0, 0.6));
   display: flex;
   align-items: flex-end;
 }
@@ -331,7 +331,7 @@ html.nui-one-player #nui-mini { display: none !important; }
   width: 100%;
   max-height: 100%;
   overflow-y: auto;
-  background: #0b0b0b;
+  background: var(--panel, #0b0b0b);
   border-top: 1px solid var(--border);
   border-radius: 14px 14px 0 0;
   padding: 8px 20px calc(24px + env(safe-area-inset-bottom, 0px));
@@ -354,7 +354,7 @@ html.nui-one-player #nui-mini { display: none !important; }
   height: 72px;
   border-radius: 50%;
   background: var(--accent) !important;
-  color: #fff !important;
+  color: var(--on-accent, #fff) !important;
   font-size: 26px !important;
 }
 .nui-pod-extra { display: flex; justify-content: space-around; }
@@ -431,7 +431,7 @@ body.eink .nui-pod-selbar { background: #fff; }
   font-size: 13px;
 }
 .nui-pod-chip strong { color: inherit; font-weight: 700; }
-.nui-pod-chip.on { border-color: #8a8a8a; color: var(--fg, #fff); font-weight: 700; }
+.nui-pod-chip.on { border-color: var(--border-strong, #8a8a8a); color: var(--fg, #fff); font-weight: 700; }
 .nui-pod-sleep { font-size: 15px !important; white-space: nowrap; }
 .nui-pod-sleep.on { color: var(--accent) !important; font-weight: 700; }
 body.eink .nui-pod-chip.on { border-color: #000; }
@@ -470,7 +470,7 @@ body.eink .nui-pod-sleep.on { color: #000 !important; }
 .nui-pod-chapter.current .nui-pod-chapter-t { color: var(--accent); }
 .nui-pod-notes { font-family: var(--nui-sans); font-size: 14.5px; font-weight: 400; letter-spacing: normal; line-height: 1.55; overflow-wrap: anywhere; }
 .nui-pod-notes img { max-width: 100%; height: auto; }
-.nui-pod-notes a { color: inherit; text-decoration: underline; text-decoration-color: #777; }
+.nui-pod-notes a { color: inherit; text-decoration: underline; text-decoration-color: var(--muted, #777); }
 .nui-pod-notes .nui-pod-stamp { font-weight: 700; text-decoration: none; border-bottom: 1px dotted currentColor; }
 .nui-pod-notes table { display: block; overflow-x: auto; }
 .nui-pod-notes-sheet .nui-pod-player-panel { max-height: 88%; }
@@ -480,7 +480,7 @@ body.eink .nui-pod-sleep.on { color: #000 !important; }
 .nui-pod-ephead { display: flex; align-items: flex-start; gap: 12px; }
 .nui-pod-ephead .nui-pod-art-big { width: 88px; height: 88px; border-radius: 6px; flex: none; }
 .nui-pod-ephead .nui-pod-player-title { text-align: left; font-size: 17px; }
-.nui-pod-eplink { align-self: flex-start; border: none; background: none; padding: 4px 0; color: var(--nui-muted); font: inherit; font-size: 14px; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: #555; }
+.nui-pod-eplink { align-self: flex-start; border: none; background: none; padding: 4px 0; color: var(--nui-muted); font: inherit; font-size: 14px; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--border-strong, #555); }
 .nui-pod-epplay { align-self: stretch; font-size: 16px; font-weight: 700; }
 .nui-pod-epactions { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
 .nui-pod-epact { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; padding: 6px 4px; border: 1px solid var(--border); border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 12.5px; line-height: 1.2; text-align: center; cursor: pointer; }
@@ -527,7 +527,7 @@ body.eink .nui-pod-subtab.active { border-bottom-color: #000; color: #000; }
   color: var(--nui-muted);
   background:
     radial-gradient(closest-side, var(--bg) 78%, transparent 80% 100%),
-    conic-gradient(#d0d0d0 var(--p, 0%), #2a2a2a 0);
+    conic-gradient(var(--muted, #d0d0d0) var(--p, 0%), var(--raised, #2a2a2a) 0);
 }
 body.eink .nui-pod-dl-done { color: #000; }
 body.eink .nui-pod-dl-done::after { border-color: #000; }
@@ -548,7 +548,7 @@ body.eink .nui-pod-dl-ring > span {
 .nui-pod-dls-head .btn { min-width: 0 !important; padding: 0 14px; font-size: 15px !important; }
 .nui-pod-dls-sec { margin-top: 10px; padding: 4px 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nui-muted); border-bottom: 1px solid var(--border); }
 .nui-pod-dlrow { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--border); -webkit-tap-highlight-color: transparent; }
-.nui-pod-dlrow:active { background: #141414; }
+.nui-pod-dlrow:active { background: var(--hover, #141414); }
 .nui-pod-dlrow .nui-pod-title { font-size: 14px; -webkit-line-clamp: 1; }
 .nui-pod-dlrow .nui-icon { font-size: 18px; color: var(--nui-muted); }
 .nui-pod-dlrow-failed .nui-pod-dlstatus { color: var(--yellow); }
@@ -584,7 +584,7 @@ body.eink .nui-pod-star, body.eink .nui-pod-fav.on { color: #000 !important; }
 .nui-pod-feederr-box { padding: 8px 10px; margin: 4px 0 8px; border: 1px solid var(--yellow); border-radius: 6px; line-height: 1.4; }
 .nui-pod-transcript { max-height: 60vh; overflow-y: auto; padding-right: 4px; }
 .nui-pod-seg { margin: 0; padding: 6px 4px; font-family: var(--nui-sans); letter-spacing: normal; font-weight: 400; font-size: 14.5px; line-height: 1.5; color: var(--nui-muted); border-radius: 4px; cursor: pointer; }
-.nui-pod-seg.current { color: inherit; background: #1a1a1a; }
+.nui-pod-seg.current { color: inherit; background: var(--raised, #1a1a1a); }
 .nui-pod-speaker { color: inherit; }
 body.eink .nui-pod-feederr { color: #000; }
 body.eink .nui-pod-feederr-box { border-color: #000; }
@@ -602,7 +602,7 @@ body.eink .nui-pod-seg.current { color: #000; background: #e6e6e6; }
 .nui-pod-facts { font-weight: 400; display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 10px 0 4px; font-size: 14px; }
 .nui-pod-facts dt { color: var(--nui-muted); }
 .nui-pod-facts dd { margin: 0; min-width: 0; font-weight: 400; overflow-wrap: anywhere; }
-.nui-pod-facts a { color: inherit; text-decoration: underline; text-decoration-color: #777; }
+.nui-pod-facts a { color: inherit; text-decoration: underline; text-decoration-color: var(--muted, #777); }
 .nui-pod-info-url { display: block; font-size: 12px; color: var(--nui-muted); }
 .nui-pod-info-actions { display: flex; gap: 8px; margin-top: 6px; }
 .nui-pod-info-actions .btn { min-height: 36px; padding: 0 14px; font-size: 14px; }
@@ -625,20 +625,20 @@ body.eink .nui-pod-facts a { color: #000; text-decoration: underline; }
   margin-right: 5px;
   vertical-align: -2px;
   border-radius: 50%;
-  border: 1px solid #8a8a8a;
+  border: 1px solid var(--border-strong, #8a8a8a);
   font-size: 9px;
   font-weight: 700;
   line-height: 1;
-  color: #cfcfcf;
+  color: var(--muted, #cfcfcf);
 }
-.nui-pod-dlmark-done { background: #3a3a3a; border-color: #3a3a3a; color: #fff; }
+.nui-pod-dlmark-done { background: var(--raised, #3a3a3a); border-color: var(--raised, #3a3a3a); color: var(--fg, #fff); }
 .nui-pod-dlmark-failed { border-color: var(--yellow); color: var(--yellow); }
 .nui-pod-dlmark-queued,
 .nui-pod-dlmark-downloading {
   border: none;
   background:
     radial-gradient(closest-side, var(--bg) 62%, transparent 66% 100%),
-    conic-gradient(#d0d0d0 var(--p, 0%), #3a3a3a 0);
+    conic-gradient(var(--muted, #d0d0d0) var(--p, 0%), var(--raised, #3a3a3a) 0);
 }
 .nui-pod-queued { font-size: 18px !important; }
 
@@ -655,13 +655,13 @@ body.eink .nui-pod-facts a { color: #000; text-decoration: underline; }
   align-items: center;
   justify-content: space-between;
   padding: 0 14px;
-  background: #161616;
+  background: var(--hover, #161616);
   color: var(--nui-muted);
   font-size: 14px;
   white-space: nowrap;
   pointer-events: none;
 }
-.nui-pod-swipebg.armed { background: #2c2c2c; color: var(--fg, #fff); }
+.nui-pod-swipebg.armed { background: var(--raised, #2c2c2c); color: var(--fg, #fff); }
 /* Behind the row: the icon, under it the action in bold and what it means for this episode
    (narrow, so it shows whole by the time the swipe is armed). */
 .nui-pod-swipe-l, .nui-pod-swipe-r { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
@@ -814,7 +814,7 @@ body.eink .nui-pod-facts a { text-decoration-color: #000; }
 .nui-usage-table th { text-align: right; font-weight: 400; color: var(--nui-muted, #9a9a9a); padding: 2px 0 6px; }
 .nui-usage-table td { padding: 7px 0; border-top: 1px solid var(--border, #2a2a2a); vertical-align: top; }
 .nui-usage-table td + td { text-align: right; white-space: nowrap; padding-left: 10px; }
-.nui-usage-bar { display: block; height: 3px; margin-top: 4px; background: #2a2a2a; border-radius: 2px; overflow: hidden; }
+.nui-usage-bar { display: block; height: 3px; margin-top: 4px; background: var(--raised, #2a2a2a); border-radius: 2px; overflow: hidden; }
 .nui-usage-bar > span { display: block; height: 100%; background: var(--accent, #e63946); }
 .nui-usage-note { font-size: 12px; color: var(--nui-muted, #9a9a9a); margin: 10px 0 0; }
 body.eink .nui-usage-bar > span { background: #000; }
@@ -837,7 +837,7 @@ html.nui-sidebar #nui-tabbar {
   width: var(--nui-rail-w);
   flex-direction: column;
   padding: 18px 0 12px;
-  background: #0b0b0b;
+  background: var(--panel, #0b0b0b);
   border-right: 1px solid var(--border);
   overflow-y: auto;
 }
@@ -852,7 +852,7 @@ html.nui-sidebar #nui-tabbar button {
   text-align: left;
 }
 html.nui-sidebar #nui-tabbar .nui-tab-icon { width: 22px; text-align: center; font-size: 19px; }
-html.nui-sidebar #nui-tabbar button.nui-active { background: #181818; box-shadow: inset 3px 0 0 var(--accent); }
+html.nui-sidebar #nui-tabbar button.nui-active { background: var(--hover, #181818); box-shadow: inset 3px 0 0 var(--accent); }
 html.nui-sidebar .nui-rail-brand {
   display: block;
   padding: 0 22px 18px;