From 8fc06cdb18a7488a055ffb43882aee041409835d Mon Sep 17 00:00:00 2001
From: tonym <anthonymoon61@gmail.com>
Date: Fri, 16 Jan 2026 01:05:58 -0600
Subject: [PATCH] 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    | 2 ++
 client/src/components/spoolIcon.css      | 7 ++++++-
 client/src/contexts/color-mode/index.tsx | 2 ++
 client/src/utils/overrides.css           | 9 +++++++++
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/client/src/components/otherModels.tsx b/client/src/components/otherModels.tsx
index 29af89f..e83d462 100644
--- a/client/src/components/otherModels.tsx
+++ b/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>
             );
diff --git a/client/src/components/spoolIcon.css b/client/src/components/spoolIcon.css
index 23583c4..14851b8 100644
--- a/client/src/components/spoolIcon.css
+++ b/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 {
diff --git a/client/src/contexts/color-mode/index.tsx b/client/src/contexts/color-mode/index.tsx
index f01ae72..20ee31a 100644
--- a/client/src/contexts/color-mode/index.tsx
+++ b/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(() => {
diff --git a/client/src/utils/overrides.css b/client/src/utils/overrides.css
index b455210..9cbc879 100644
--- a/client/src/utils/overrides.css
+++ b/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;
 }