Merge pull request #5 from DataResponsibly/accessible-frontend

added light/dark mode

Author: soham-chitnis10

client/src/App.jsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ChatInput from "./components/ChatInput.jsx";
 import ChatOutput from "./components/ChatOutput.jsx";
 import SettingsPanel from "./components/SettingsPanel.jsx";
@@ -48,6 +48,20 @@ function resolveMaxNewTokens(input) {
 }
 
 export default function App() {
+  const [isDark, setIsDark] = useState(() => {
+    const saved = localStorage.getItem("theme");
+    return saved ? saved === "dark" : false;
+  });
+
+  useEffect(() => {
+    if (isDark) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+    localStorage.setItem("theme", isDark ? "dark" : "light");
+  }, [isDark]);
+
   const [prompt, setPrompt] = useState("");
   const [settings, setSettings] = useState(DEFAULT_SETTINGS);
   const [tokens, setTokens] = useState([]);
@@ -243,6 +257,15 @@ export default function App() {
           )}
         </div>
         <div className="flex items-center gap-2 shrink-0">
+          <button
+            type="button"
+            className="border border-border px-2 min-h-[36px] hover:bg-panel active:bg-panel touch-manipulation"
+            onClick={() => setIsDark((d) => !d)}
+            title={isDark ? "Switch to light mode" : "Switch to dark mode"}
+            aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+          >
+            {isDark ? <SunIcon /> : <MoonIcon />}
+          </button>
           <button
             type="button"
             className="border border-border px-3 min-h-[36px] uppercase text-xs tracking-wider hover:bg-panel active:bg-panel disabled:opacity-40 disabled:cursor-not-allowed touch-manipulation"
@@ -403,6 +426,30 @@ function MobileDrawer({ title, onClose, children }) {
   );
 }
 
+function SunIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="12" cy="12" r="5" />
+      <line x1="12" y1="1" x2="12" y2="3" />
+      <line x1="12" y1="21" x2="12" y2="23" />
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+      <line x1="1" y1="12" x2="3" y2="12" />
+      <line x1="21" y1="12" x2="23" y2="12" />
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    </svg>
+  );
+}
+
+function MoonIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  );
+}
+
 function DesktopBarplotPanel({ barplotData, safenudgeActive, onTokenEdit }) {
   return (
     <div className="flex flex-col h-full min-h-0 p-3 overflow-hidden">

client/src/index.css

@@ -2,6 +2,24 @@
 @tailwind components;
 @tailwind utilities;
 
+/* 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;
+}
+
+/* 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;
+}
+
 html,
 body,
 #root {
@@ -10,8 +28,8 @@ body,
 
 body {
   margin: 0;
-  background-color: #212121;
-  color: #f5f6fa;
+  background-color: rgb(var(--color-bg));
+  color: rgb(var(--color-fg));
   font-family: "Andale Mono", AndaleMono, ui-monospace, SFMono-Regular, Menlo,
     monospace;
   letter-spacing: 0px;
@@ -55,14 +73,14 @@ input[type="number"] {
   font-family: "Andale Mono", AndaleMono, monospace;
   letter-spacing: 1px;
   font-size: 12px;
-  fill: #f5f6fa;
+  fill: rgb(var(--color-fg));
   cursor: pointer;
 }
 .barplot-svg .bar {
   fill: rgb(39, 174, 96);
 }
 .barplot-svg .label {
-  fill: #ffffff;
+  fill: rgb(var(--color-fg));
   font-size: 12px;
 }
 
@@ -117,8 +135,8 @@ input[type="number"] {
   text-indent: -20px;
   word-spacing: 20px;
   white-space: nowrap;
-  background: #f5f6fa;
-  color: #f5f6fa;
+  background: rgb(var(--color-fg));
+  color: rgb(var(--color-fg));
   transition: transform cubic-bezier(0.3, 1.5, 0.7, 1) 0.2s;
 }
 .toggle:checked {
@@ -142,12 +160,12 @@ input[type="number"] {
   appearance: none;
   width: 25px;
   height: 25px;
-  background: #f5f6fa;
+  background: rgb(var(--color-fg));
   cursor: pointer;
 }
 .slider::-moz-range-thumb {
   width: 25px;
   height: 25px;
-  background: #f5f6fa;
+  background: rgb(var(--color-fg));
   cursor: pointer;
 }

client/tailwind.config.js

@@ -1,15 +1,15 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: "class",
   content: ["./index.html", "./src/**/*.{js,jsx}"],
   theme: {
     extend: {
       colors: {
-        // Match the existing dark terminal aesthetic
-        bg: "#212121",
-        panel: "#202c33",
-        input: "#2a3942",
-        border: "#7f8c8d",
-        fg: "#f5f6fa",
+        bg: "rgb(var(--color-bg) / <alpha-value>)",
+        panel: "rgb(var(--color-panel) / <alpha-value>)",
+        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",
       },