From 7856433c6f46be04bdbcf6db3ae14794af4801fa Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Wed, 10 Jun 2026 11:00:56 -0700
Subject: [PATCH] Profiles: dark disc for white-wordmark logos (Plex/SoulSync)
 in the modal

The Plex logo is a white wordmark, so it vanished on the modal's white logo
disc (it only shows on Settings because those toggles sit on dark). Added a
per-logo `dark` flag (Plex + SoulSync) that renders their disc dark (#1f2329)
across the hero, rail, and option cards, so the white logo is visible. Other
logos keep the white disc.
---
 webui/static/service-switch.js | 18 ++++++++++--------
 webui/static/style.css         |  2 ++
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/webui/static/service-switch.js b/webui/static/service-switch.js
index a1611987..a585b681 100644
--- a/webui/static/service-switch.js
+++ b/webui/static/service-switch.js
@@ -19,10 +19,12 @@ const _SS_TABS = [
 // Brand logos. Metadata pulls from SOURCE_LABELS (shared-helpers.js) when
 // available; server + download have their own small maps.
 const _SS_SERVER_INFO = {
-    plex:      { name: 'Plex',      logo: 'https://www.plex.tv/wp-content/themes/plex/assets/img/plex-logo.svg' },
+    // `dark`: the logo is a white/light wordmark, so it needs a dark disc to be
+    // visible (it'd vanish on the default white disc).
+    plex:      { name: 'Plex',      logo: 'https://www.plex.tv/wp-content/themes/plex/assets/img/plex-logo.svg', dark: true },
     jellyfin:  { name: 'Jellyfin',  logo: 'https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/jellyfin.png' },
     navidrome: { name: 'Navidrome', logo: 'https://tweakers.net/ext/i/2007323764.png' },
-    soulsync:  { name: 'SoulSync',  logo: '/static/trans2.png' },
+    soulsync:  { name: 'SoulSync',  logo: '/static/trans2.png', dark: true },
 };
 const _SS_META_FALLBACK = {
     spotify_free: { text: 'Spotify (no auth)', icon: '🆓', logo: 'https://storage.googleapis.com/pr-newsroom-wp/1/2023/05/Spotify_Primary_Logo_RGB_Green.png' },
@@ -122,7 +124,7 @@ function _ssRailCurrent(tabId) {
     }
     if (tabId === 'server') {
         const id = d.server.active; const info = _SS_SERVER_INFO[id] || { name: id };
-        return { logo: info.logo, emoji: '🖥️', label: info.name, brand: _ssBrand(id) };
+        return { logo: info.logo, emoji: '🖥️', label: info.name, brand: _ssBrand(id), dark: info.dark };
     }
     const id = d.download.mode;
     if (id === 'hybrid') return { emoji: '🔀', label: 'Hybrid', brand: 'var(--accent-light-rgb-hex,#7c5cff)' };
@@ -143,7 +145,7 @@ function _ssRenderRail() {
         return `
             <button class="ss-tab${t.id === _ssState.tab ? ' active' : ''}" style="--ss-brand:${cur ? cur.brand : '#7c5cff'}"
                     onclick="switchServiceSwitchTab('${t.id}')">
-                <span class="ss-tab-disc">${media}</span>
+                <span class="ss-tab-disc${cur && cur.dark ? ' ss-disc--dark' : ''}">${media}</span>
                 <span class="ss-tab-text">
                     <span class="ss-tab-cat">${t.name}</span>
                     <span class="ss-tab-cur">${cur ? _ssEsc(cur.label) : '…'}</span>
@@ -158,7 +160,7 @@ function switchServiceSwitchTab(tab) {
     _ssRenderPanel();
 }
 
-function _ssCard({ logo, emoji, label, active, available, onclick, badge, brand }) {
+function _ssCard({ logo, emoji, label, active, available, onclick, badge, brand, dark }) {
     const dim = available === false ? ' ss-card--locked' : '';
     const act = active ? ' active' : '';
     const media = logo
@@ -166,7 +168,7 @@ function _ssCard({ logo, emoji, label, active, available, onclick, badge, brand
         : `<span class="ss-card-emoji">${emoji || '🎵'}</span>`;
     return `
         <button class="ss-card${act}${dim}" style="--ss-brand:${brand || '#7c5cff'}" ${onclick ? `onclick="${onclick}"` : 'disabled'}>
-            <span class="ss-card-disc">${media}</span>
+            <span class="ss-card-disc${dark ? ' ss-disc--dark' : ''}">${media}</span>
             <span class="ss-card-label">${_ssEsc(label)}</span>
             ${badge ? `<span class="ss-card-badge">${_ssEsc(badge)}</span>` : ''}
             ${active ? '<span class="ss-card-check">✓</span>' : ''}
@@ -189,7 +191,7 @@ function _ssHero(kind) {
         : kind === 'server' ? 'Active media server' : 'Active download source';
     return `
         <div class="ss-hero" style="--ss-brand:${cur.brand}">
-            <div class="ss-hero-disc">${media}</div>
+            <div class="ss-hero-disc${cur.dark ? ' ss-disc--dark' : ''}">${media}</div>
             <div class="ss-hero-info">
                 <div class="ss-hero-eyebrow">${eyebrow}</div>
                 <div class="ss-hero-name">${_ssEsc(cur.label)}</div>
@@ -231,7 +233,7 @@ function _ssRenderPanel() {
         const cards = d.server.options.map(o => {
             const info = _SS_SERVER_INFO[o.id] || { name: o.id };
             return _ssCard({
-                logo: info.logo, emoji: '🖥️', label: info.name, brand: _ssBrand(o.id),
+                logo: info.logo, emoji: '🖥️', label: info.name, brand: _ssBrand(o.id), dark: info.dark,
                 active: d.server.active === o.id, available: o.available,
                 onclick: (editable && o.available) ? `setActiveSource('server','${o.id}')` : null,
             });
diff --git a/webui/static/style.css b/webui/static/style.css
index 42b3e5bb..d6c56f7e 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -67727,6 +67727,8 @@ body.em-scroll-lock { overflow: hidden; }
     box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-brand) 45%, transparent); transition: box-shadow 0.16s;
 }
 .ss-card.active .ss-card-disc { box-shadow: 0 0 0 3px var(--ss-brand), 0 0 22px color-mix(in srgb, var(--ss-brand) 55%, transparent); }
+/* White/light wordmark logos (Plex, SoulSync) need a dark disc to be visible. */
+.ss-disc--dark { background: #1f2329 !important; }
 .ss-card--locked { opacity: 0.38; cursor: not-allowed; }
 .ss-card[disabled] { cursor: default; }
 .ss-card-logo { width: 34px; height: 34px; object-fit: contain; }