Add light border to color swatches in dark mode (#34)

- Set data-theme attribute on body for CSS dark mode detection
- Add white border (30% opacity) to spool icons in dark mode
- Add --swatch-border-color CSS variable for consistent theming
- Dark/black filament colors now visible against dark backgrounds

Fixes upstream issue: https://github.com/Donkie/Spoolman/issues/597

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

client/src/components/otherModels.tsx

@@ -37,11 +37,13 @@ export function useSpoolmanFilamentFilter(enabled: boolean = false) {
             tooltipParts.push(
               <div
                 key="color"
+                className="color-swatch-mini"
                 style={{
                   borderRadius: ".4em",
                   width: "1.4em",
                   height: "1.4em",
                   backgroundColor: "#" + filament.color_hex,
+                  border: "1px solid var(--swatch-border-color, rgba(68, 68, 68, 0.3))",
                 }}
               ></div>
             );

client/src/components/spoolIcon.css

@@ -22,7 +22,12 @@
 .spool-icon * {
   flex: 1 1 0px;
   border-radius: 2px;
-  border: #44444430 solid 2px;
+  border: rgba(68, 68, 68, 0.3) solid 2px;
+}
+
+/* Light border for dark mode to make dark colors visible */
+body[data-theme="dark"] .spool-icon * {
+  border-color: rgba(255, 255, 255, 0.3);
 }
 
 .spool-icon.vertical *:first-child {

client/src/contexts/color-mode/index.tsx

@@ -32,6 +32,8 @@ export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({ children
 
   useEffect(() => {
     window.localStorage.setItem("colorMode", mode);
+    // Set data attribute on body for CSS targeting
+    document.body.setAttribute("data-theme", mode);
   }, [mode]);
 
   useEffect(() => {

client/src/utils/overrides.css

@@ -1,3 +1,12 @@
+/* Color swatch border for dark mode visibility (#34) */
+:root {
+  --swatch-border-color: rgba(68, 68, 68, 0.3);
+}
+
+body[data-theme="dark"] {
+  --swatch-border-color: rgba(255, 255, 255, 0.3);
+}
+
 #qty-input {
   text-align: center !important;
 }