feat: add basic support for dark mode

package.json

@@ -15,9 +15,11 @@
     "preview": "vite preview",
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
-    "type-check": "tsc --noEmit -p ./tsconfig.app.json"
+    "type-check": "tsc --noEmit -p ./tsconfig.app.json",
+    "generate-colors": "node ./src/scripts/generateColorTokens.js"
   },
   "dependencies": {
+    "@adobe/leonardo-contrast-colors": "^1.0.0",
     "@hey-api/client-fetch": "^0.6.0",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.4",
@@ -81,4 +83,4 @@
   "overrides": {
     "vite": "^6.0.1"
   }
-}
+}

src/App.tsx

@@ -28,8 +28,12 @@ function App() {
     fetchPrompts();
   }, [fetchPrompts]);
 
+  const prefersDarkMode = window.matchMedia(
+    "(prefers-color-scheme: dark)",
+  ).matches;
+
   return (
-    <div className="flex w-screen h-screen">
+    <div className={`flex w-screen h-screen ${prefersDarkMode ? "dark" : ""}`}>
       <Sidebar loading={loading}>
         <PromptList prompts={prompts} />
       </Sidebar>

src/baseColors.json

@@ -0,0 +1,9 @@
+{
+  "background": "#fff",
+  "foreground": "#000",
+  "teal": "#c2e6ff",
+  "blue": "#5058FF",
+  "red": "#ff5058",
+  "orange": "#ffa050",
+  "green": "#58ff50"
+}

src/components/Chat.tsx

@@ -30,8 +30,8 @@ export function Chat() {
           <div key={index} className="flex flex-col w-full h-full gap-6">
             <ChatBubble variant="sent">
               <ChatBubbleAvatar fallback="User" className="w-14" />
-              <ChatBubbleMessage variant="sent" className="bg-zinc-700">
-                <Markdown className="text-gray-300">
+              <ChatBubbleMessage variant="sent">
+                <Markdown>
                   {sanitizeQuestionPrompt({
                     question: question?.message ?? "",
                     answer: answer?.message ?? "",

src/components/Header.tsx

@@ -4,7 +4,7 @@ import { Separator } from "./ui/separator";
 
 export function Header() {
   return (
-    <header className="flex-shrink-0 h-16 px-3 items-center flex w-full bg-teal-25 opacity-1 border-b-blue-200 border-b">
+    <header className="flex-shrink-0 h-16 px-3 items-center flex w-full bg-teal-100 opacity-1 border-b-gray-200 border-b">
       <div className="flex items-center flex-1">
         <SidebarTrigger />
         <Separator orientation="vertical" className="h-8 mx-3" />
@@ -18,41 +18,41 @@ export function Header() {
       </div>
       <div className="flex items-center gap-4 mr-16">
         <div className="flex items-center relative group">
-          <div className="text-black hover:text-gray-800 font-semibold cursor-pointer text-base px-2 py-1 rounded-md hover:bg-blue-50 transition-colors">
+          <div className="text-black hover:text-gray-800 font-semibold cursor-pointer text-base px-2 py-1 rounded-md hover:bg-teal-200 transition-colors">
             Certificates
           </div>
-          <div className="absolute right-0 top-full mt-2 w-56 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 border border-gray-100">
+          <div className="absolute right-0 top-full mt-2 w-56 bg-gray-100 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 border border-gray-100">
             <div className="py-1">
               <Link
                 to="/certificates"
-                className="block px-5 py-3 text-gray-700 hover:bg-blue-50"
+                className="block px-5 py-3 text-gray-700 hover:bg-gray-200"
               >
                 Download
               </Link>
               <Link
                 to="/certificates/security"
-                className="block px-5 py-3 text-gray-700 hover:bg-blue-50"
+                className="block px-5 py-3 text-gray-700 hover:bg-gray-200"
               >
                 Certificate Security
               </Link>
             </div>
           </div>
         </div>
         <div className="flex items-center relative group">
-          <div className="text-black hover:text-gray-800 font-semibold cursor-pointer text-base px-2 py-1 rounded-md hover:bg-blue-50 transition-colors">
+          <div className="text-black hover:text-gray-800 font-semibold cursor-pointer text-base px-2 py-1 rounded-md hover:bg-teal-200 transition-colors">
             Help
           </div>
-          <div className="absolute right-0 top-full mt-2 w-56 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 border border-gray-100">
+          <div className="absolute right-0 top-full mt-2 w-56 bg-gray-100 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 border border-gray-100">
             <div className="py-1">
               <Link
                 to="/help/continue-setup"
-                className="block px-5 py-3 text-gray-700 hover:bg-blue-50"
+                className="block px-5 py-3 text-gray-700 hover:bg-gray-200"
               >
                 Continue Setup
               </Link>
               <Link
                 to="/help/copilot-setup"
-                className="block px-5 py-3 text-gray-700 hover:bg-blue-50"
+                className="block px-5 py-3 text-gray-700 hover:bg-gray-200"
               >
                 Copilot Setup
               </Link>
@@ -61,7 +61,7 @@ export function Header() {
         </div>
 
         <div className="flex items-center relative group">
-          <div className="text-black hover:text-gray-800 font-semibold cursor-pointer text-base px-2 py-1 rounded-md hover:bg-blue-50 transition-colors">
+          <div className="text-black hover:text-gray-800 font-semibold cursor-pointer text-base px-2 py-1 rounded-md hover:bg-teal-200 transition-colors">
             <a
               href="https://docs.codegate.ai/"
               target="_blank"

src/components/Help.tsx

@@ -30,7 +30,7 @@ export function Help() {
       } catch (error) {
         console.error("Error loading help content:", error);
         setContent(
-          "# Error\nFailed to load help content. Please try again later."
+          "# Error\nFailed to load help content. Please try again later.",
         );
       }
     };
@@ -39,15 +39,13 @@ export function Help() {
   }, [section]);
 
   return (
-    <div className="max-w-5xl bg-white rounded-lg px-6 mx-auto">
+    <div className="max-w-5xl rounded-lg px-6 mx-auto">
       <Markdown
         className="prose prose-lg max-w-none
-            prose-headings:text-gray-900 
             prose-h1:text-3xl prose-h1:font-bold prose-h1:mb-8
             prose-h2:text-2xl prose-h2:font-semibold prose-h2:mt-8 prose-h2:mb-4
             prose-h3:text-xl prose-h3:font-medium prose-h3:mt-6 prose-h3:mb-3
-            prose-p:text-gray-600 prose-p:leading-relaxed
-            prose-code:text-blue-600
+             prose-p:leading-relaxed
             prose-pre:bg-gray-900 prose-pre:rounded-lg prose-pre:p-4
             prose-pre:shadow-md
           "

src/components/Markdown.tsx

@@ -2,7 +2,6 @@ import remarkGfm from "remark-gfm";
 import ReactMarkdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { cn } from "@/lib/utils";
 import { CopyToClipboard } from "./CopyToClipboard";
 import hljs from "highlight.js";
 
@@ -84,18 +83,6 @@ export function Markdown({ children, className = "" }: Props) {
             </div>
           );
         },
-        p({ children }) {
-          return (
-            <p
-              className={cn(
-                "text-gray-600 leading-relaxed mt-6 mb-3",
-                className,
-              )}
-            >
-              {children}
-            </p>
-          );
-        },
         pre({ children }) {
           return <div className="not-prose">{children}</div>;
         },

src/components/Sidebar.tsx

@@ -18,11 +18,11 @@ export function Sidebar({
 }) {
   if (loading) {
     return (
-      <SidebarUI side="left" className="border-r-blue-200">
-        <SidebarHeader className="bg-teal-25 py-6 pb-3 text-sm font-bold px-4">
+      <SidebarUI side="left" className="border-r-gray-200">
+        <SidebarHeader className="bg-teal-100 py-6 pb-3 text-sm font-bold px-4">
           History Prompts
         </SidebarHeader>
-        <SidebarContent className="bg-teal-25">
+        <SidebarContent className="bg-teal-100">
           <SidebarMenu className="px-2">
             {Array.from({ length: 20 }).map((_, index) => (
               <SidebarMenuItem key={index}>
@@ -37,11 +37,11 @@ export function Sidebar({
   }
 
   return (
-    <SidebarUI side="left" className="border-r-blue-200">
-      <SidebarHeader className="bg-teal-25 py-6 pb-3 text-sm font-bold px-4">
+    <SidebarUI side="left" className="border-r-gray-200">
+      <SidebarHeader className="bg-teal-100 py-6 pb-3 text-sm font-bold px-4">
         History Prompts
       </SidebarHeader>
-      <SidebarContent className="bg-teal-25">
+      <SidebarContent className="bg-teal-100">
         <SidebarGroup>{children}</SidebarGroup>
       </SidebarContent>
     </SidebarUI>

src/components/ui/chat/chat-bubble.tsx

@@ -75,9 +75,8 @@
 const chatBubbleMessageVariants = cva("p-4", {
   variants: {
     variant: {
-      received:
-        "bg-secondary text-secondary-foreground rounded-r-lg rounded-tl-lg",
-      sent: "bg-primary text-primary-foreground rounded-l-lg rounded-tr-lg",
+      received: "rounded-r-lg rounded-tl-lg bg-teal-100",
+      sent: "rounded-l-lg rounded-tr-lg bg-teal-100",
     },
     layout: {
       default: "",
@@ -195,8 +194,8 @@
   ChatBubbleAvatar,
   ChatBubbleMessage,
   ChatBubbleTimestamp,
   chatBubbleVariant,
   chatBubbleMessageVariants,
   ChatBubbleAction,
   ChatBubbleActionWrapper,
 };

src/components/ui/input.tsx

@@ -12,19 +12,19 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <div
         className={cn(
           "flex h-10 items-center rounded-md border border-input bg-white pl-3 text-sm ring-offset-background focus-within:ring-1 focus-within:ring-ring focus-within:ring-offset-2",
-          className
+          className,
         )}
       >
         {icon}
         <input
           {...props}
           type="search"
           ref={ref}
-          className="w-full p-2 placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+          className="w-full p-2 placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 bg-white"
         />
       </div>
     );
-  }
+  },
 );
 Input.displayName = "Input";
 

src/components/ui/skeleton.tsx

@@ -1,15 +1,15 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Skeleton({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("animate-pulse rounded-md bg-gray-200", className)}
+      className={cn("animate-pulse rounded-md bg-gray-400", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };