[ViPPET] Add theme mode button

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

@@ -204,7 +204,7 @@ 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>
         </button>

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

@@ -130,7 +130,7 @@ const CopyPipelineButton = ({
                     setName(`Copy of ${baseName} [${e.target.value}]`);
                   }
                 }}
-                className="w-full px-3 py-2 border"
+                className="w-full px-3 py-2 border bg-background"
               >
                 {tags.map((tag) => (
                   <option key={tag} value={tag}>
@@ -179,13 +179,13 @@ const CopyPipelineButton = ({
 
           <div className="flex justify-end gap-2">
             <button
-              className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 transition-colors"
+              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"
               onClick={() => setOpen(false)}
             >
               Cancel
             </button>
             <button
-              className="px-4 py-2 text-sm font-medium text-white bg-classic-blue hover:bg-classic-blue-hover transition-colors 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"
               onClick={handleCopy}
               disabled={isLoading || !name.trim() || !selectedPipeline}
             >

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/");
@@ -31,48 +35,72 @@ 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]">
+      <nav className="bg-white 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-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-energy-blue" />
+            ) : (
+              <Moon className="w-5 h-5 hover:text-cyan-300 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/features/pipeline-editor/DeletePipelineButton.tsx

@@ -39,7 +39,7 @@ const DeletePipelineButton = ({
     <button
       onClick={handleDelete}
       disabled={isLoading}
-      className="bg-red-600 hover:bg-red-700 disabled:bg-red-300 text-white p-2 flex items-center gap-2 transition-colors"
+      className="bg-red-600 dark:bg-[#f88f8f] dark:text-[#242528] dark:hover:bg-red-400 hover:bg-red-700 font-medium disabled:bg-red-300 text-white p-2 flex items-center gap-2 transition-colors"
     >
       <Trash2 className="w-5 h-5" />
       <span>{isLoading ? "Deleting..." : "Delete"}</span>

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/ExportPipelineButton.tsx

@@ -84,7 +84,7 @@ const ExportPipelineButton = ({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <button
-          className="bg-white hover:bg-carbon border border-classic-blue text-primary hover:text-white px-3 py-2 transition-colors flex items-center gap-2"
+          className="bg-background hover:bg-classic-blue dark:text-energy-blue font-medium dark:hover:text-[#242528] dark:border-energy-blue dark:hover:bg-energy-blue border-2 border-classic-blue text-primary hover:text-white px-3 py-2 transition-colors flex items-center gap-2"
           title="Export Pipeline"
         >
           <Download className="w-5 h-5" />

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/FpsDisplay.tsx

@@ -12,7 +12,7 @@ const FpsDisplay = ({ className = "" }: FpsDisplayProps) => {
 
   return (
     <div
-      className={`bg-white text-black/80 p-2 shadow-lg text-sm ${className}`}
+      className={`bg-background dark:text-white/80 text-black/80 p-2 shadow-lg dark:shadow-[2px_2px_8px_0_rgba(255,255,255,0.08)] text-sm ${className}`}
     >
       <div className="flex flex-row gap-2 font-mono justify-center items-center">
         <span className={statusColor}>{statusIcon}</span>

tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/pipeline-editor/ImportPipelineButton.tsx

@@ -153,7 +153,7 @@ const ImportPipelineButton = ({ onImport }: ImportPipelineButtonProps) => {
       <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
         <PopoverTrigger asChild>
           <button
-            className="bg-white hover:bg-carbon border border-classic-blue text-primary hover:text-white px-3 py-2 transition-colors flex items-center gap-2"
+            className="bg-background hover:bg-classic-blue dark:text-energy-blue font-medium dark:hover:text-[#242528] dark:border-energy-blue dark:hover:bg-energy-blue border-2 border-classic-blue text-primary hover:text-white px-3 py-2 transition-colors flex items-center gap-2"
             title="Import Pipeline"
           >
             <Upload className="w-5 h-5" />