From 32a54b7d3c6f4788c63fecd7934377dd4ea9098e Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Sat, 28 Feb 2026 23:41:35 +0300
Subject: [PATCH] Fix language dropdown background on dark theme, add palette
 color indicators

- Change .header-locale background from transparent to var(--card-bg)
  to prevent white flash on dark theme when leaving the dropdown
- Show card color as border-left on command palette items when a
  custom color is assigned via the card color picker

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 server/src/wled_controller/static/css/layout.css             | 2 +-
 server/src/wled_controller/static/js/core/command-palette.js | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/server/src/wled_controller/static/css/layout.css b/server/src/wled_controller/static/css/layout.css
index 8462187..6694a04 100644
--- a/server/src/wled_controller/static/css/layout.css
+++ b/server/src/wled_controller/static/css/layout.css
@@ -63,7 +63,7 @@ h2 {
     padding: 2px 4px;
     border: none;
     border-radius: 5px;
-    background: transparent;
+    background: var(--card-bg);
     color: var(--text-secondary);
     font-size: 0.7rem;
     font-weight: 600;
diff --git a/server/src/wled_controller/static/js/core/command-palette.js b/server/src/wled_controller/static/js/core/command-palette.js
index 69782a9..1fcfea2 100644
--- a/server/src/wled_controller/static/js/core/command-palette.js
+++ b/server/src/wled_controller/static/js/core/command-palette.js
@@ -10,6 +10,7 @@ import {
     ICON_DEVICE, ICON_TARGET, ICON_AUTOMATION, ICON_VALUE_SOURCE, ICON_SCENE,
     ICON_CAPTURE_TEMPLATE, ICON_PP_TEMPLATE, ICON_PATTERN_TEMPLATE,
 } from './icons.js';
+import { getCardColor } from './card-colors.js';
 
 let _isOpen = false;
 let _items = [];
@@ -191,7 +192,9 @@ function _render() {
         html += `<div class="cp-group-header">${t('search.group.' + group)}</div>`;
         for (const item of items) {
             const active = idx === _selectedIdx ? ' cp-active' : '';
-            html += `<div class="cp-result${active}" data-cp-idx="${idx}">` +
+            const color = getCardColor(item.nav[4]);
+            const colorStyle = color ? ` style="border-left:3px solid ${color}"` : '';
+            html += `<div class="cp-result${active}" data-cp-idx="${idx}"${colorStyle}>` +
                 `<span class="cp-icon">${item.icon}</span>` +
                 `<span class="cp-name">${_escHtml(item.name)}</span>` +
                 (item.detail ? `<span class="cp-detail">${_escHtml(item.detail)}</span>` : '') +