[ViPPET] Add theme mode button

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/AddPipelineButton.tsx

@@ -204,9 +204,9 @@ const AddPipelineButton = () => {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <button className="w-full h-full min-h-[200px] border-2 border-dashed border-gray-300 dark:border-gray-700 hover:border-classic-blue hover:bg-blue-50 dark:hover:bg-blue-950/20 transition-all flex flex-col items-center justify-center gap-3 text-carbon-tint-1 dark:text-gray-400 hover:text-classic-blue dark:hover:text-blue-400">
+        <button className="w-full h-full min-h-[200px] border-2 border-dashed border-gray-300 dark:border-gray-700 hover:border-classic-blue dark:hover:border-energy-blue hover:bg-blue-50 dark:hover:bg-energy-blue/5 transition-all flex flex-col items-center justify-center gap-3 text-carbon-tint-1 dark:text-gray-400 hover:text-classic-blue  dark:hover:text-energy-blue">
           <Plus className="w-12 h-12" />
-          <span className="text-lg font-medium">Add New Pipeline</span>
+          <span className="text-lg font-medium ">Add New Pipeline</span>
         </button>
       </DialogTrigger>
       <DialogContent className="!max-w-6xl">

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/Navigation.tsx

@@ -7,14 +7,18 @@ import {
   Grid3x3,
   Home,
   ListTodo,
+  Moon,
+  Sun,
 } from "lucide-react";
 import logo from "@/assets/digital-unboxed-energyblue-white.svg";
 import { PipelineNameEdit } from "@/components/shared/PipelineNameEdit.tsx";
+import { useTheme } from "next-themes";
 
 const Navigation = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const params = useParams();
+  const { theme, setTheme } = useTheme();
 
   // Check if we're on the pipeline editor page
   const isPipelineEditorPage = location.pathname.startsWith("/pipelines/");
@@ -32,47 +36,71 @@ const Navigation = () => {
   if (isPipelineEditorPage && pipelineId) {
     return (
       <nav className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
-        <div className="flex items-center gap-4 px-4 h-[60px]">
+        <div className="flex items-center justify-between px-4 h-[60px]">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => navigate("/")}
+              className="flex items-center gap-2 text-gray-700 dark:text-gray-300 hover:text-classic-blue dark:hover:text-energy-blue transition-colors cursor-pointer"
+            >
+              <ArrowLeft className="w-5 h-5" />
+              <span className="text-sm font-medium">Back</span>
+            </button>
+            <div className="h-7 w-px bg-gray-300 dark:bg-gray-700" />
+            <span className="text-gray-900 dark:text-white font-medium text-lg">
+              <PipelineNameEdit pipelineId={pipelineId} />
+            </span>
+          </div>
           <button
-            onClick={() => navigate("/")}
-            className="flex items-center gap-2 text-gray-700 dark:text-gray-300 hover:text-classic-blue dark:hover:text-energy-blue transition-colors cursor-pointer"
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+            aria-label="Toggle theme"
           >
-            <ArrowLeft className="w-5 h-5" />
-            <span className="text-sm font-medium">Back</span>
+            {theme === "dark" ? (
+              <Sun className="w-5 h-5 text-white hover:text-[#7e44e0]" />
+            ) : (
+              <Moon className="w-5 h-5 hover:text-[#7e44e0] text-gray-700" />
+            )}
           </button>
-          <div className="h-7 w-px bg-gray-300 dark:bg-gray-700" />
-          <span className="text-gray-900 dark:text-white font-medium text-lg">
-            <PipelineNameEdit pipelineId={pipelineId} />
-          </span>
         </div>
       </nav>
     );
   }
 
   return (
-    <nav className="bg-classic-blue dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
-      <div className="flex items-center gap-6 px-4 h-[60px]">
-        <img src={logo} alt="Intel" className="h-7" />
-        <span className="text-white font-medium text-lg pt-1.5">ViPPET</span>
-        <div className="flex items-center gap-1">
-          {navItems.map((item) => (
-            <NavLink
-              key={item.to}
-              to={item.to}
-              end={item.to === "/"}
-              className={({ isActive }) =>
-                `flex items-center gap-2 px-4 pt-5 pb-3 text-md font-medium transition-colors ${
-                  isActive
-                    ? "text-energy-blue dark:text-energy-blue border-b-2 border-white dark:border-blue-400"
-                    : "text-white dark:text-gray-400 hover:text-energy-blue dark:hover:text-gray-100 border-b-2 border-transparent"
-                }`
-              }
-            >
-              <item.icon className="w-4 h-4" />
-              {item.label}
-            </NavLink>
-          ))}
+    <nav className="bg-classic-blue dark:bg-[#313236] border-b border-gray-200 dark:border-gray-800">
+      <div className="flex items-center justify-between px-4 h-[60px]">
+        <div className="flex items-center gap-6">
+          <img src={logo} alt="Intel" className="h-7" />
+          <span className="text-white font-medium text-lg pt-1.5">ViPPET</span>
+          <div className="flex items-center gap-1">
+            {navItems.map((item) => (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                end={item.to === "/"}
+                className={({ isActive }) =>
+                  `flex items-center gap-2 px-4 pt-5 pb-3 text-md font-medium transition-colors ${
+                    isActive
+                      ? "text-white border-b-2 border-white dark:border-blue-400 dark:hover:bg-[#242528] hover:bg-classic-blue-hover"
+                      : "text-white dark:text-[#ffffff] dark:hover:bg-[#242528] border-b-2 border-transparent hover:bg-classic-blue-hover"
+                  }`
+                }
+              >
+                <item.icon className="w-4 h-4" />
+                {item.label}
+              </NavLink>
+            ))}
+          </div>
         </div>
+        <button
+          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+          aria-label="Toggle theme"
+        >
+          {theme === "dark" ? (
+            <Sun className="w-5 h-5 text-white hover:text-energy-blue" />
+          ) : (
+            <Moon className="w-5 h-5 text-white hover:text-cyan-300" />
+          )}
+        </button>
       </div>
     </nav>
   );

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/ParticipationSlider.tsx

@@ -15,7 +15,7 @@ export const ParticipationSlider = ({
 }: ParticipationSliderProps) => {
   return (
     <div className="flex items-center gap-3">
-      <span className="text-sm text-gray-600 min-w-[2ch] text-center">
+      <span className="text-sm text-muted-foreground min-w-[2ch] text-center">
         {min}
       </span>
       <Slider
@@ -26,7 +26,7 @@ export const ParticipationSlider = ({
         step={1}
         className="flex-1"
       />
-      <span className="text-sm text-gray-600 min-w-[3ch] text-center">
+      <span className="text-sm text-muted-foreground min-w-[3ch] text-center">
         {max}
       </span>
       <input
@@ -40,10 +40,11 @@ export const ParticipationSlider = ({
         }}
         min={min}
         max={max}
-        className="w-[4rem] px-2 py-1 text-sm font-medium text-center border"
+        className="w-[4rem] px-2 py-1 text-sm font-medium border bg-background [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+        style={{ textAlign: 'center' }}
         disabled={true}
       />
-      <span className="text-sm text-gray-600">%</span>
+      <span className="text-sm text-muted-foreground">%</span>
     </div>
   );
 };

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/SaveOutputWarning.tsx

@@ -1,6 +1,6 @@
 const SaveOutputWarning = () => {
   return (
-    <div className="text-muted-foreground border border-amber-400 my-2 p-2 bg-amber-200/50 w-1/2">
+    <div className="text-muted-foreground dark:text-foreground/80 border border-amber-400 my-2 p-2 bg-amber-200/50 w-1/2">
       <b>Note 1</b>: The current implementation does not automatically infer the
       best encoding device from the existing pipeline. Select the same device
       that is already used by other blocks in your pipeline. To learn more,

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/shared/StreamsSlider.tsx

@@ -15,7 +15,7 @@ export const StreamsSlider = ({
 }: StreamsSliderProps) => {
   return (
     <div className="flex items-center gap-3">
-      <span className="text-sm text-gray-600 min-w-[2ch] text-center">
+      <span className="text-sm text-muted-foreground min-w-[2ch] text-center">
         {min}
       </span>
       <Slider
@@ -26,7 +26,7 @@ export const StreamsSlider = ({
         step={1}
         className="flex-1"
       />
-      <span className="text-sm text-gray-600 min-w-[3ch] text-center">
+      <span className="text-sm text-muted-foreground min-w-[3ch] text-center">
         {max}
       </span>
       <input
@@ -40,7 +40,8 @@ export const StreamsSlider = ({
         }}
         min={min}
         max={max}
-        className="w-[4rem] px-2 py-1 text-sm font-medium text-center border"
+        className="w-[4rem] px-2 py-1 text-sm font-medium border bg-background [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+        style={{ textAlign: 'center' }}
         disabled={true}
       />
     </div>

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/card.tsx

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 border py-6 shadow-sm",
+        "bg-card text-card-foreground flex flex-col gap-6 border py-6 shadow-sm hover:shadow-md dark:shadow-[2px_2px_8px_0_rgba(255,255,255,0.08)] dark:hover:shadow-[4px_4px_12px_0_rgba(255,255,255,0.12)] transition-shadow",
         className,
       )}
       {...props}

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/checkbox.tsx

@@ -12,7 +12,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-classic-blue data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-energy-blue data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/progress.tsx

@@ -55,7 +55,7 @@ function ProgressIndicator({
 }: ProgressPrimitive.Indicator.Props) {
   return (
     <ProgressPrimitive.Indicator
-      className={cn("bg-primary transition-all duration-500", className)}
+      className={cn("bg-primary dark:bg-energy-blue transition-all duration-500", className)}
       data-slot="progress-indicator"
       {...props}
     />

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/slider.tsx

@@ -37,13 +37,13 @@ function Slider({
       <SliderPrimitive.Track
         data-slot="slider-track"
         className={cn(
-          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+          "bg-input relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
         )}
       >
         <SliderPrimitive.Range
           data-slot="slider-range"
           className={cn(
-            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+            "bg-primary dark:bg-energy-blue absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
           )}
         />
       </SliderPrimitive.Track>

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/components/ui/table.tsx

@@ -55,7 +55,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        "hover:bg-muted/70 data-[state=selected]:bg-muted border-b transition-colors",
         className,
       )}
       {...props}

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/index.css

@@ -72,7 +72,7 @@
   --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
+  --card: #F9F9F9;
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
@@ -81,7 +81,7 @@
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
+  --muted-foreground: oklch(0.500 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
@@ -123,9 +123,9 @@
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
+  --background: #2e2f32;
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
+  --card: #3c3e42;
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);
@@ -134,7 +134,7 @@
   --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
+  --muted-foreground: oklch(0.788 0 0);
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/main.tsx

@@ -6,13 +6,16 @@ import "./index.css";
 import { Provider } from "react-redux";
 import { store } from "@/store";
 import { MetricsProvider } from "@/features/metrics/MetricsProvider.tsx";
+import { ThemeProvider } from "next-themes";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <Provider store={store}>
-      <MetricsProvider>
-        <RouterProvider router={router} />
-      </MetricsProvider>
+      <ThemeProvider attribute="class" defaultTheme="light">
+        <MetricsProvider>
+          <RouterProvider router={router} />
+        </MetricsProvider>
+      </ThemeProvider>
     </Provider>
   </StrictMode>,
 );

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/DensityTests.tsx

@@ -209,7 +209,7 @@ const DensityTests = () => {
           {pipelineSelections.map((selection) => (
             <div
               key={selection.pipelineId}
-              className={`flex items-center gap-3 p-2 border bg-white transition-all duration-300 ${
+              className={`flex items-center gap-3 p-2 border bg-card transition-all duration-300 ${
                 selection.isRemoving
                   ? "opacity-0 -translate-y-2"
                   : selection.isNew
@@ -227,7 +227,7 @@ const DensityTests = () => {
                     onChange={(e) =>
                       handlePipelineChange(selection.pipelineId, e.target.value)
                     }
-                    className="w-full px-3 py-2 border text-sm cursor-pointer"
+                    className="w-full px-3 py-2 border text-sm cursor-pointer bg-white dark:bg-background"
                   >
                     {pipelines
                       .filter(
@@ -274,7 +274,7 @@ const DensityTests = () => {
           <button
             onClick={handleAddPipeline}
             disabled={pipelineSelections.length >= pipelines.length}
-            className="w-fit px-4 py-2 bg-white hover:bg-carbon border border-classic-blue text-primary hover:text-white transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+            className="w-fit px-4 py-2 bg-background hover:bg-classic-blue dark:hover:bg-energy-blue border-2 border-classic-blue dark:border-energy-blue text-primary dark:text-energy-blue hover:text-white dark:hover:text-[#242528] transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
           >
             <Plus className="w-5 h-5" />
             <span>Add Pipeline</span>
@@ -325,7 +325,7 @@ const DensityTests = () => {
                 <DeviceSelect
                   value={encoderDevice}
                   onChange={setEncoderDevice}
-                  className="w-fit px-3 py-2 border text-sm cursor-pointer"
+                  className="w-fit px-3 py-2 border text-sm cursor-pointer bg-background"
                 />
               </div>
             )}
@@ -335,7 +335,7 @@ const DensityTests = () => {
           <button
             onClick={handleRunTest}
             disabled={isRunning || pipelineSelections.length === 0 || !!jobId}
-            className="w-fit px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
+            className="w-fit px-4 py-2 bg-primary font-medium text-primary-foreground hover:bg-classic-blue-hover disabled:opacity-50 disabled:cursor-not-allowed dark:bg-energy-blue dark:hover:bg-energy-blue-tint-1 transition-colors"
           >
             {jobId
               ? "Running..."