use accessible colors

soham-chitnis10 · claude · soham-chitnis10 · commit 42c16ff54523 · 2026-05-12T19:35:19.000-04:00
Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/client/index.html b/client/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-    <meta name="theme-color" content="#212121" />
+    <meta name="theme-color" content="#ffffff" />
     <title>Safe-Lens</title>
   </head>
   <body class="bg-bg text-fg font-mono">
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -60,6 +60,8 @@ export default function App() {
       document.documentElement.classList.remove("dark");
     }
     localStorage.setItem("theme", isDark ? "dark" : "light");
+    const meta = document.querySelector('meta[name="theme-color"]');
+    if (meta) meta.setAttribute("content", isDark ? "#09090b" : "#ffffff");
   }, [isDark]);
 
   const [prompt, setPrompt] = useState("");
diff --git a/client/src/components/Barplot.jsx b/client/src/components/Barplot.jsx
@@ -81,7 +81,6 @@ export default function Barplot({ data, onTickClick, disabled }) {
     const tickFontSize = Math.min(15, Math.max(5, yScale.bandwidth() * 0.9));
     yAxis
       .selectAll("text")
-      .attr("fill", "#f5f6fa")
       .style("font-size", `${tickFontSize}px`)
       .style("font-weight", "500");
 
@@ -119,8 +118,7 @@ export default function Barplot({ data, onTickClick, disabled }) {
       .attr("y", (d) => yScale(d.text))
       .attr("x", 0)
       .attr("height", yScale.bandwidth())
-      .attr("width", (d) => xScale(d.prob))
-      .attr("fill", "white");
+      .attr("width", (d) => xScale(d.prob));
 
     const labelFontSize = Math.min(14, Math.max(5, yScale.bandwidth() * 0.9));
     svg
@@ -134,8 +132,7 @@ export default function Barplot({ data, onTickClick, disabled }) {
       .attr("dy", "0.35em")
       .attr("dx", "8px")
       .style("font-size", `${labelFontSize}px`)
-      .text((d) => (Number(d.prob) === 0 ? "<0.01" : d.prob))
-      .attr("fill", "white");
+      .text((d) => (Number(d.prob) === 0 ? "<0.01" : d.prob));
   }, [data, size]);
 
   const hasData = data && data.length > 0;
diff --git a/client/src/components/ChatOutput.jsx b/client/src/components/ChatOutput.jsx
@@ -6,7 +6,7 @@ function uncertaintyBg(token) {
   const p = probs[selected_idx];
   if (typeof p !== "number") return "transparent";
   const u = Math.max(0, Math.min(1, 1 - Number(p.toFixed(2))));
-  return `rgba(231, 76, 60, ${u})`;
+  return `rgb(var(--color-danger) / ${u})`;
 }
 
 export default function ChatOutput({
diff --git a/client/src/index.css b/client/src/index.css
@@ -4,20 +4,24 @@
 
 /* Light mode (default) */
 :root {
-  --color-bg: 245 246 250;
-  --color-panel: 225 232 237;
-  --color-input: 213 221 227;
-  --color-border: 127 140 141;
-  --color-fg: 33 33 33;
+  --color-bg: 255 255 255;
+  --color-panel: 244 244 245;
+  --color-input: 250 250 250;
+  --color-border: 161 161 170;
+  --color-fg: 24 24 27;
+  --color-accent: 37 99 235;
+  --color-danger: 220 38 38;
 }
 
 /* Dark mode */
 .dark {
-  --color-bg: 33 33 33;
-  --color-panel: 32 44 51;
-  --color-input: 42 57 66;
-  --color-border: 127 140 141;
-  --color-fg: 245 246 250;
+  --color-bg: 9 9 11;
+  --color-panel: 24 24 27;
+  --color-input: 39 39 42;
+  --color-border: 82 82 91;
+  --color-fg: 250 250 250;
+  --color-accent: 59 130 246;
+  --color-danger: 239 68 68;
 }
 
 html,
@@ -77,7 +81,7 @@ input[type="number"] {
   cursor: pointer;
 }
 .barplot-svg .bar {
-  fill: rgb(39, 174, 96);
+  fill: rgb(var(--color-accent));
 }
 .barplot-svg .label {
   fill: rgb(var(--color-fg));
@@ -99,7 +103,7 @@ input[type="number"] {
 }
 .token-selected {
   text-decoration: underline;
-  text-decoration-color: rgb(39, 174, 96);
+  text-decoration-color: rgb(var(--color-accent));
   text-decoration-thickness: 3px;
 }
 
@@ -116,7 +120,7 @@ input[type="number"] {
   overflow: hidden;
   background-color: transparent;
   transition: background ease 0.3s;
-  border: 1px solid rgb(127, 140, 141);
+  border: 1px solid rgb(var(--color-border));
   flex-shrink: 0;
 }
 .toggle:before {
@@ -140,7 +144,7 @@ input[type="number"] {
   transition: transform cubic-bezier(0.3, 1.5, 0.7, 1) 0.2s;
 }
 .toggle:checked {
-  background-color: rgb(39, 174, 96);
+  background-color: rgb(var(--color-accent));
 }
 .toggle:checked:before {
   transform: translateX(30px);
@@ -153,7 +157,7 @@ input[type="number"] {
   height: 26px;
   background: transparent;
   outline: none;
-  border: 1px solid rgb(127, 140, 141);
+  border: 1px solid rgb(var(--color-border));
 }
 .slider::-webkit-slider-thumb {
   -webkit-appearance: none;
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -10,8 +10,8 @@ export default {
         input: "rgb(var(--color-input) / <alpha-value>)",
         border: "rgb(var(--color-border) / <alpha-value>)",
         fg: "rgb(var(--color-fg) / <alpha-value>)",
-        accent: "#27ae60",
-        danger: "#c0392b",
+        accent: "rgb(var(--color-accent) / <alpha-value>)",
+        danger: "rgb(var(--color-danger) / <alpha-value>)",
       },
       fontFamily: {
         mono: [

Original file line number	Diff line number	Diff line change
`@@ -60,6 +60,8 @@ export default function App() {`
`60`	`60`	`document.documentElement.classList.remove("dark");`
`61`	`61`	`}`
`62`	`62`	`localStorage.setItem("theme", isDark ? "dark" : "light");`
	`63`	`+ const meta = document.querySelector('meta[name="theme-color"]');`
	`64`	`+ if (meta) meta.setAttribute("content", isDark ? "#09090b" : "#ffffff");`
`63`	`65`	`}, [isDark]);`
`64`	`66`
`65`	`67`	`const [prompt, setPrompt] = useState("");`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ function uncertaintyBg(token) {`
`6`	`6`	`const p = probs[selected_idx];`
`7`	`7`	`if (typeof p !== "number") return "transparent";`
`8`	`8`	`const u = Math.max(0, Math.min(1, 1 - Number(p.toFixed(2))));`
`9`		- return `rgba(231, 76, 60, ${u})`;
	`9`	+ return `rgb(var(--color-danger) / ${u})`;
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`export default function ChatOutput({`