optimize UI

templates/led.html

@@ -25,25 +25,39 @@
   color: #d1d5db;
 }
 .dark .text-slate-500 {
-  color: #a1a1aa;
+  color: #e2e8f0;
 }
 .dark .text-slate-600 {
-  color: #d4d4d8;
+  color: #f1f5f9;
 }
 .dark .text-slate-700 {
-  color: #e4e4e7;
+  color: #f8fafc;
 }
 .dark .text-slate-800 {
-  color: #e5e5e5;
+  color: #ffffff;
 }
 .dark .text-slate-900 {
-  color: #f4f4f5;
+  color: #ffffff;
+}
+.dark .bg-slate-50 {
+  background-color: #262626;
+}
+
+/* Specific label overrides for better visibility */
+.dark label {
+  color: #f1f5f9;
 }
 
 /* Form elements */
 .dark input[type="range"] {
   background-color: #404040;
 }
+.dark input[type="number"],
+.dark input[type="text"]:not(.effect-color-picker) {
+  background-color: #1f1f1f;
+  border-color: #404040;
+  color: #e5e5e5;
+}
 .dark select,
 .dark .form-select {
   background-color: #1f1f1f;
@@ -83,6 +97,18 @@
 .dark .text-amber-700 {
   color: #fcd34d;
 }
+.dark .bg-blue-50 {
+  background-color: #1f1f1f;
+}
+.dark .border-blue-200 {
+  border-color: #404040;
+}
+.dark .text-blue-700 {
+  color: #e2e8f0;
+}
+.dark .text-blue-800 {
+  color: #f1f5f9;
+}
 
 /* Iframe border */
 .dark iframe {

templates/settings.html

@@ -7,19 +7,24 @@ endblock %}
   background-color: #262626;
 }
 .dark .text-slate-900 {
-  color: #e5e5e5;
+  color: #ffffff;
 }
 .dark .text-slate-800 {
-  color: #e5e5e5;
+  color: #f8fafc;
 }
 .dark .text-slate-700 {
-  color: #d1d5db;
+  color: #f1f5f9;
 }
 .dark .text-slate-600 {
-  color: #9ca3af;
+  color: #e2e8f0;
 }
 .dark .text-slate-500 {
-  color: #9ca3af;
+  color: #e2e8f0;
+}
+
+/* Label overrides for better visibility */
+.dark label {
+  color: #f1f5f9;
 }
 .dark .border-slate-200 {
   border-color: #404040;
@@ -39,8 +44,10 @@ endblock %}
 .dark .bg-slate-100 {
   background-color: #404040;
 }
-.dark .form-input {
-  background-color: #262626;
+.dark .form-input,
+.dark input[type="number"],
+.dark input[type="text"] {
+  background-color: #1f1f1f;
   border-color: #404040;
   color: #e5e5e5;
 }
@@ -52,7 +59,7 @@ endblock %}
   ring-color: #0c7ff2;
 }
 .dark .form-select {
-  background-color: #262626;
+  background-color: #1f1f1f;
   border-color: #404040;
   color: #e5e5e5;
 }
@@ -214,25 +221,38 @@ input:checked + .slider:before {
   border-color: #64748b;
 }
 
-/* Info box dark mode */
+/* Info box dark mode - grey theme */
 .dark .bg-blue-50 {
-  background-color: #1e3a8a;
+  background-color: #1f1f1f;
 }
 
 .dark .border-blue-200 {
-  border-color: #1e40af;
+  border-color: #404040;
 }
 
 .dark .text-blue-600 {
-  color: #60a5fa;
+  color: #e2e8f0;
 }
 
 .dark .text-blue-800 {
-  color: #dbeafe;
+  color: #f1f5f9;
 }
 
 .dark .text-blue-700 {
-  color: #bfdbfe;
+  color: #e2e8f0;
+}
+
+/* Amber box dark mode - grey theme */
+.dark .bg-amber-50 {
+  background-color: #1f1f1f;
+}
+
+.dark .border-amber-200 {
+  border-color: #404040;
+}
+
+.dark .text-amber-600 {
+  color: #f1f5f9;
 }
 {% endblock %}
 
@@ -571,8 +591,8 @@ input:checked + .slider:before {
             id="dwLedPixelOrder"
             class="form-select flex w-full min-w-0 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 px-4 text-base font-normal leading-normal transition-colors"
           >
-            <option value="GRB" selected>GRB - WS2812/WS2812B/WS2815 (most common)</option>
-            <option value="RGB">RGB - WS2811 and some variants</option>
+            <option value="GRB" selected>GRB - WS2812/WS2812B (most common)</option>
+            <option value="RGB">RGB - WS2815/WS2811 and some variants</option>
             <option value="BGR">BGR - Some WS2811 variants</option>
             <option value="RBG">RBG - Rare variant</option>
             <option value="GBR">GBR - Rare variant</option>