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;
 }