diff --git a/apps/desktop/src-tauri/src/general_settings.rs b/apps/desktop/src-tauri/src/general_settings.rs
index 47de3574..09fe123d 100644
--- a/apps/desktop/src-tauri/src/general_settings.rs
+++ b/apps/desktop/src-tauri/src/general_settings.rs
@@ -23,6 +23,8 @@ pub struct GeneralSettingsStore {
     // first launch: store won't exist so show startup
     #[serde(default = "true_b")]
     pub has_completed_startup: bool,
+    #[serde(default)]
+    pub dark_mode: bool,
 }
 
 fn true_b() -> bool {
diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx
index cbdb5987..54bee247 100644
--- a/apps/desktop/src/App.tsx
+++ b/apps/desktop/src/App.tsx
@@ -7,7 +7,9 @@ import { message } from "@tauri-apps/plugin-dialog";
 
 import "@cap/ui-solid/main.css";
 import "unfonts.css";
+import "./styles/theme.css";
 import { commands } from "./utils/tauri";
+import { themeStore } from "./store/theme";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -20,37 +22,55 @@ const queryClient = new QueryClient({
 });
 
 export default function App() {
+  const darkMode = themeStore.isDarkMode;
+
+  onMount(async () => {
+    await themeStore.initialize();
+
+    const matches = useCurrentMatches();
+
+    onMount(() => {
+      for (const match of matches()) {
+        if (match.route.info?.AUTO_SHOW_WINDOW === false) return;
+      }
+
+      getCurrentWindow().show();
+    });
+  });
+
   return (
-    <ErrorBoundary
-      fallback={(e: Error) => {
-        console.error(e);
-        return (
-          <>
-            <p>{e.toString()}</p>
-            <p>{e.stack?.toString()}</p>
-          </>
-        );
-      }}
-    >
-      <QueryClientProvider client={queryClient}>
-        <Router
-          root={(props) => {
-            const matches = useCurrentMatches();
-
-            onMount(() => {
-              for (const match of matches()) {
-                if (match.route.info?.AUTO_SHOW_WINDOW === false) return;
-              }
-
-              getCurrentWindow().show();
-            });
-
-            return <Suspense>{props.children}</Suspense>;
-          }}
-        >
-          <FileRoutes />
-        </Router>
-      </QueryClientProvider>
-    </ErrorBoundary>
+    <div class={darkMode() ? "dark" : ""}>
+      <ErrorBoundary
+        fallback={(e: Error) => {
+          console.error(e);
+          return (
+            <>
+              <p>{e.toString()}</p>
+              <p>{e.stack?.toString()}</p>
+            </>
+          );
+        }}
+      >
+        <QueryClientProvider client={queryClient}>
+          <Router
+            root={(props) => {
+              const matches = useCurrentMatches();
+
+              onMount(() => {
+                for (const match of matches()) {
+                  if (match.route.info?.AUTO_SHOW_WINDOW === false) return;
+                }
+
+                getCurrentWindow().show();
+              });
+
+              return <Suspense>{props.children}</Suspense>;
+            }}
+          >
+            <FileRoutes />
+          </Router>
+        </QueryClientProvider>
+      </ErrorBoundary>
+    </div>
   );
 }
diff --git a/apps/desktop/src/routes/(window-chrome)/(main).tsx b/apps/desktop/src/routes/(window-chrome)/(main).tsx
index 3cf4f29c..4e9576e2 100644
--- a/apps/desktop/src/routes/(window-chrome)/(main).tsx
+++ b/apps/desktop/src/routes/(window-chrome)/(main).tsx
@@ -118,10 +118,11 @@ export default function () {
   });
 
   return (
-    <div class="flex justify-center flex-col p-[1rem] gap-[0.75rem] text-[0.875rem] font-[400] bg-gray-50 h-full">
+    <div class="flex justify-center flex-col p-[1rem] gap-[0.75rem] text-[0.875rem] font-[400] bg-[--gray-50] h-full text-[--text-primary]">
       <div class="flex items-center justify-between pb-[0.25rem]">
         <div class="flex items-center space-x-1">
-          <IconCapLogoFull class="w-[90px] h-auto" />
+          <IconCapLogoFullDark class="w-[90px] h-auto text-[--text-primary] dark:block hidden" />
+          <IconCapLogoFull class="w-[90px] h-auto text-[--text-primary] dark:hidden block" />
           <span
             onClick={async () => {
               if (!isUpgraded()) {
@@ -130,8 +131,8 @@ export default function () {
             }}
             class={`text-[0.625rem] ${
               isUpgraded()
-                ? "bg-blue-400 text-gray-50"
-                : "bg-gray-200 text-gray-400 cursor-pointer hover:bg-gray-300"
+                ? "bg-[--blue-400] text-gray-50 dark:text-gray-500"
+                : "bg-gray-200 cursor-pointer hover:bg-gray-300"
             } rounded-lg px-1.5 py-0.5`}
           >
             {isUpgraded() ? "Pro" : "Free"}
@@ -150,9 +151,9 @@ export default function () {
               </button>
             </Tooltip.Trigger>
             <Tooltip.Portal>
-              <Tooltip.Content class="z-50 px-2 py-1 text-xs text-gray-50 bg-gray-500 rounded shadow-lg animate-in fade-in duration-100">
+              <Tooltip.Content class="z-50 px-2 py-1 text-xs text-gray-50 bg-[--gray-500] rounded shadow-lg animate-in fade-in duration-100">
                 Cap Apps
-                <Tooltip.Arrow class="fill-gray-500" />
+                <Tooltip.Arrow class="fill-[--gray-500]" />
               </Tooltip.Content>
             </Tooltip.Portal>
           </Tooltip.Root>
@@ -222,7 +223,7 @@ export default function () {
         href={`${import.meta.env.VITE_SERVER_URL}/dashboard`}
         target="_blank"
         rel="noreferrer"
-        class="text-gray-400 text-[0.875rem] mx-auto hover:text-gray-500 hover:underline"
+        class="text-[--text-tertiary] text-[0.875rem] mx-auto hover:text-[--text-primary] hover:underline"
       >
         Open Cap on Web
       </a>
@@ -394,8 +395,8 @@ function CameraSelect(props: {
     selectOptions()?.find((o) => o.name === props.options?.cameraLabel) ?? null;
 
   return (
-    <div class="flex flex-col gap-[0.25rem] items-stretch">
-      <label class="text-gray-400 text-[0.875rem]">Camera</label>
+    <div class="flex flex-col gap-[0.25rem] items-stretch text-[--text-primary]">
+      <label class="text-[--text-tertiary] text-[0.875rem]">Camera</label>
       <KSelect<Option>
         options={selectOptions()}
         optionValue="name"
@@ -506,8 +507,8 @@ function MicrophoneSelect(props: {
     Math.pow(1 - Math.max((dbs() ?? 0) + DB_SCALE, 0) / DB_SCALE, 0.5);
 
   return (
-    <div class="flex flex-col gap-[0.25rem] items-stretch">
-      <label class="text-gray-400">Microphone</label>
+    <div class="flex flex-col gap-[0.25rem] items-stretch text-[--text-primary]">
+      <label class="text-[--text-tertiary]">Microphone</label>
       <KSelect<Option>
         options={[{ name: "No Audio", deviceId: "" }, ...(devices.data ?? [])]}
         optionValue="deviceId"
diff --git a/apps/desktop/src/routes/(window-chrome)/settings.tsx b/apps/desktop/src/routes/(window-chrome)/settings.tsx
index e09384e0..0a538289 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings.tsx
@@ -13,9 +13,9 @@ export default function Settings(props: RouteSectionProps) {
   const [version] = createResource(() => getVersion());
 
   return (
-    <div class="flex-1 flex flex-row divide-x divide-gray-200 text-[0.875rem] leading-[1.25rem] overflow-y-hidden">
+    <div class="flex-1 flex flex-row divide-x divide-[--gray-200] text-[0.875rem] leading-[1.25rem] overflow-y-hidden">
       <div class="h-full flex flex-col">
-        <ul class="min-w-[12rem] h-full p-[0.625rem] space-y-2">
+        <ul class="min-w-[12rem] h-full p-[0.625rem] space-y-2 text-[--text-primary]">
           <For
             each={[
               { href: "general", name: "General", icon: IconCapSettings },
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/apps/index.tsx b/apps/desktop/src/routes/(window-chrome)/settings/apps/index.tsx
index 32b5e6b1..3f1ae7e4 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/apps/index.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/apps/index.tsx
@@ -30,14 +30,14 @@ export default function AppsTab() {
     <div class="p-4">
       <For each={apps}>
         {(app) => (
-          <div class="p-1.5 bg-white rounded-lg border border-gray-200">
-            <div class="flex justify-between items-center border-b border-gray-200 pb-2">
+          <div class="p-1.5 bg-white rounded-lg border border-[--gray-500]">
+            <div class="flex justify-between items-center border-b border-[--gray-500] pb-2">
               <div class="flex items-center gap-3">
-                <div class="p-2 rounded-lg bg-gray-100">
-                  <app.icon class="w-4 h-4 text-gray-500" />
+                <div class="p-2 rounded-lg bg-[--gray-100]">
+                  <app.icon class="w-4 h-4 text-[--text-tertiary]" />
                 </div>
                 <div class="flex flex-col gap-1">
-                  <span class="text-sm font-medium text-gray-900">
+                  <span class="text-sm font-medium text-[--text-primary]">
                     {app.name}
                   </span>
                 </div>
@@ -50,7 +50,7 @@ export default function AppsTab() {
               </Button>
             </div>
             <div class="p-2">
-              <p class="text-xs text-gray-400">{app.description}</p>
+              <p class="text-xs text-[--text-tertiary]">{app.description}</p>
             </div>
           </div>
         )}
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/changelog.tsx b/apps/desktop/src/routes/(window-chrome)/settings/changelog.tsx
index eed8bc32..82b34a53 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/changelog.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/changelog.tsx
@@ -40,30 +40,30 @@ export default function Page() {
           >
             <ErrorBoundary
               fallback={(e) => (
-                <div class="text-red-500 font-medium">{e.toString()}</div>
+                <div class="text-[--text-primary] font-medium">{e.toString()}</div>
               )}
             >
               <ul class="space-y-8">
                 <For each={changelog.data}>
                   {(entry, i) => (
-                    <li class="border-b-2 border-gray-200 pb-8 last:border-b-0">
+                    <li class="border-b-2 border-[--gray-200] pb-8 last:border-b-0">
                       <div class="flex mb-2">
                         <Show when={i() === 0}>
-                          <div class="bg-blue-400 text-white px-2 py-1 rounded-md uppercase font-bold">
+                          <div class="bg-[--blue-400] text-[--text-primary] px-2 py-1 rounded-md uppercase font-bold">
                             <span style="color: #fff" class="text-xs">
                               New
                             </span>
                           </div>
                         </Show>
                       </div>
-                      <h3 class="font-semibold text-gray-800 mb-2">
+                      <h3 class="font-semibold text-[--text-primary] mb-2">
                         {entry.title}
                       </h3>
-                      <div class="text-gray-500 text-sm mb-4">
+                      <div class="text-[--text-tertiary] text-sm mb-4">
                         Version {entry.version} -{" "}
                         {new Date(entry.publishedAt).toLocaleDateString()}
                       </div>
-                      <SolidMarkdown class="prose prose-sm max-w-none">
+                      <SolidMarkdown class="prose prose-sm max-w-none text-[--text-tertiary]">
                         {entry.content}
                       </SolidMarkdown>
                     </li>
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/feedback.tsx b/apps/desktop/src/routes/(window-chrome)/settings/feedback.tsx
index d46e7c25..7554e8e5 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/feedback.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/feedback.tsx
@@ -32,8 +32,8 @@ export default function FeedbackTab() {
 
   return (
     <div class="p-6 max-w-2xl">
-      <h2 class="text-lg font-medium mb-2">Send Feedback</h2>
-      <p class="text-gray-400 mb-[1rem]">
+      <h2 class="text-[--text-primary] text-lg font-medium mb-2">Send Feedback</h2>
+      <p class="text-[--text-tertiary] mb-[1rem]">
         Help us improve Cap by submitting feedback or reporting bugs. We'll get
         right on it.
       </p>
@@ -45,7 +45,7 @@ export default function FeedbackTab() {
             placeholder="Tell us what you think about Cap..."
             required
             minLength={10}
-            class="w-full h-32 p-2 border border-gray-300 rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
+            class="w-full h-32 p-2 border border-[--gray-500] bg-[--gray-100] text-[--text-primary] rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-[--blue-400]"
             disabled={isSubmitting()}
           />
         </div>
@@ -53,7 +53,7 @@ export default function FeedbackTab() {
         {error() && <p class="text-red-500 text-sm">{error()}</p>}
 
         {success() && (
-          <p class="text-green-500 text-sm">Thank you for your feedback!</p>
+          <p class="text-[--text-primary] text-sm">Thank you for your feedback!</p>
         )}
 
         <Button
@@ -62,7 +62,7 @@ export default function FeedbackTab() {
           disabled={
             isSubmitting() || !feedback().trim() || feedback().trim().length < 0
           }
-          class="w-full"
+          class="w-full bg-[--blue-400] text-[--text-primary]"
         >
           {isSubmitting() ? "Submitting..." : "Submit Feedback"}
         </Button>
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/general.tsx b/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
index 0701e2c3..e4f6ebec 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
@@ -2,6 +2,7 @@ import { createResource, Show, For } from "solid-js";
 import { createStore } from "solid-js/store";
 import { generalSettingsStore } from "~/store";
 import { commands, type GeneralSettingsStore } from "~/utils/tauri";
+import { themeStore } from "~/store/theme";
 import {
   isPermissionGranted,
   requestPermission,
@@ -15,7 +16,17 @@ const settingsList: Array<{
   platforms?: OsType[];
   requiresPermission?: boolean;
   pro?: boolean;
+  onChange?: (value: boolean) => Promise<void>;
 }> = [
+  {
+    key: "darkMode",
+    label: "Dark Mode",
+    description:
+      "Switch between light and dark theme for the application interface.",
+    onChange: async () => {
+      await themeStore.toggleTheme();
+    },
+  },
   {
     key: "uploadIndividualFiles",
     label: "Upload individual recording files when creating shareable link",
@@ -103,6 +114,14 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
       }
     }
 
+    // Find the setting once and store it
+    const setting = settingsList.find((s) => s.key === key);
+
+    // If setting exists and has onChange handler, call it
+    if (setting?.onChange) {
+      await setting.onChange(value);
+    }
+
     setSettings(key as keyof GeneralSettingsStore, value);
     generalSettingsStore.set({ [key]: value });
   };
@@ -126,7 +145,7 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
                   )}
                   <div class="flex items-center justify-between">
                     <div class="flex items-center gap-2">
-                      <p>{setting.label}</p>
+                      <p class="text-[--text-primary]">{setting.label}</p>
                     </div>
                     <button
                       type="button"
@@ -171,7 +190,9 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
                     </button>
                   </div>
                   {setting.description && (
-                    <p class="text-xs text-gray-400">{setting.description}</p>
+                    <p class="text-xs text-[--text-tertiary]">
+                      {setting.description}
+                    </p>
                   )}
                 </div>
               </Show>
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/hotkeys.tsx b/apps/desktop/src/routes/(window-chrome)/settings/hotkeys.tsx
index 9e8ad760..9faf2105 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/hotkeys.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/hotkeys.tsx
@@ -102,16 +102,16 @@ function Inner(props: { initialStore: HotkeysStore | null }) {
             });
 
             return (
-              <li class="w-full flex flex-row justify-between items-center">
+              <li class="w-full flex flex-row justify-between items-center text-[--text-primary]">
                 <span>{ACTION_TEXT[item()]}</span>
-                <div class="w-[9rem] h-[2rem]">
+                <div class="w-[9rem] h-[2rem] ">
                   <Switch>
                     <Match when={listening()?.action === item()}>
-                      <div class="border border-blue-300 rounded-lg text-gray-500 w-full h-full bg-gray-100 flex flex-row items-center justify-between px-[0.375rem]">
+                      <div class="border border-[--gray-500] rounded-lg text-[--text-tertiary] w-full h-full bg-[--gray-100] flex flex-row items-center justify-between px-[0.375rem]">
                         <Show when={hotkeys[item()]} fallback="Listening">
                           {(binding) => <HotkeyText binding={binding()} />}
                         </Show>
-                        <div class="flex flex-row items-center gap-[0.125rem]">
+                        <div class="flex flex-row items-center gap-[0.125rem] text-[--text-tertiary]">
                           <Show when={hotkeys[item()]}>
                             <button
                               type="button"
@@ -125,7 +125,7 @@ function Inner(props: { initialStore: HotkeysStore | null }) {
                                 );
                               }}
                             >
-                              <IconCapCircleCheck class="size-[1.25rem] text-blue-300" />
+                              <IconCapCircleCheck class="size-[1.25rem] text-[--blue-400]" />
                             </button>
                           </Show>
                           <button
@@ -140,7 +140,7 @@ function Inner(props: { initialStore: HotkeysStore | null }) {
                               });
                             }}
                           >
-                            <IconCapCircleX class="size-[1.25rem] text-gray-400" />
+                            <IconCapCircleX class="size-[1.25rem] text-[--gray-400]" />
                           </button>
                         </div>
                       </div>
@@ -148,7 +148,7 @@ function Inner(props: { initialStore: HotkeysStore | null }) {
                     <Match when={listening()?.action !== item()}>
                       <button
                         type="button"
-                        class="border border-gray-200 rounded-lg text-gray-400 w-full h-full"
+                        class="border border-[--gray-500] rounded-lg text-[--text-tertiary] w-full h-full"
                         onClick={(e) => {
                           e.stopPropagation();
                           setListening({
@@ -169,7 +169,7 @@ function Inner(props: { initialStore: HotkeysStore | null }) {
           }}
         </Index>
       </ul>
-      <div class="flex flex-row-reverse p-[1rem]">
+      <div class="flex flex-row-reverse p-[1rem] text-[--text-primary]">
         <Button disabled variant="secondary">
           Restore Defaults
         </Button>
@@ -180,7 +180,7 @@ function Inner(props: { initialStore: HotkeysStore | null }) {
 
 function HotkeyText(props: { binding: Hotkey }) {
   return (
-    <span class="space-x-0.5">
+    <span class="space-x-0.5 text-[--text-tertiary]">
       {props.binding.meta && <span>⌘</span>}
       {props.binding.ctrl && <span>⌃</span>}
       {props.binding.alt && <span>⌥</span>}
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/recordings.tsx b/apps/desktop/src/routes/(window-chrome)/settings/recordings.tsx
index 7de45800..f61416f9 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/recordings.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/recordings.tsx
@@ -56,13 +56,13 @@ export default function Recordings() {
   };
 
   return (
-    <div class="flex flex-col w-full h-full divide-y divide-gray-200 pt-1 pb-12">
+    <div class="flex flex-col w-full h-full divide-y divide-[--gray-200] pt-1 pb-12">
       <div class="flex-1 overflow-y-auto">
-        <ul class="p-[0.625rem] flex flex-col gap-[0.5rem] w-full">
+        <ul class="p-[0.625rem] flex flex-col gap-[0.5rem] w-full text-[--text-primary]">
           <Show
             when={fetchRecordings.data && fetchRecordings.data.length > 0}
             fallback={
-              <p class="text-center text-gray-500">No recordings found</p>
+              <p class="text-center text-[--text-tertiary]">No recordings found</p>
             }
           >
             <For each={fetchRecordings.data}>
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/screenshots.tsx b/apps/desktop/src/routes/(window-chrome)/settings/screenshots.tsx
index 92d42fea..9f491b31 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/screenshots.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/screenshots.tsx
@@ -54,7 +54,7 @@ export default function Screenshots() {
           <Show
             when={fetchScreenshots.data && fetchScreenshots.data.length > 0}
             fallback={
-              <p class="text-center text-gray-500">No screenshots found</p>
+              <p class="text-center text-[--text-tertiary]">No screenshots found</p>
             }
           >
             <For each={fetchScreenshots.data}>
@@ -81,7 +81,7 @@ function ScreenshotItem(props: {
   const [imageExists, setImageExists] = createSignal(true);
 
   return (
-    <li class="w-full flex flex-row justify-between items-center p-2 hover:bg-gray-100 rounded">
+    <li class="w-full flex flex-row justify-between items-center p-2 hover:bg-gray-100 dark:hover:bg-gray-200 rounded">
       <div class="flex items-center">
         <Show
           when={imageExists()}
@@ -96,7 +96,7 @@ function ScreenshotItem(props: {
             onError={() => setImageExists(false)}
           />
         </Show>
-        <span>{props.screenshot.prettyName.replace(".png", "")}</span>
+        <span class="text-[--text-primary]">{props.screenshot.prettyName.replace(".png", "")}</span>
       </div>
       <div class="flex items-center">
         <button
@@ -105,7 +105,7 @@ function ScreenshotItem(props: {
             e.stopPropagation();
             props.onOpenFolder();
           }}
-          class="p-2 hover:bg-gray-200 rounded-full mr-2"
+          class="p-2 hover:bg-gray-200 dark:hover:bg-gray-300 text-[--text-tertiary] hover:text-[--text-primary] rounded-full mr-2"
         >
           <IconLucideFolder class="size-5" />
         </button>
@@ -115,7 +115,7 @@ function ScreenshotItem(props: {
             e.stopPropagation();
             props.onClick();
           }}
-          class="p-2 hover:bg-gray-200 rounded-full"
+          class="p-2 hover:bg-gray-200 dark:hover:bg-gray-300 text-[--text-tertiary] hover:text-[--text-primary] rounded-full"
         >
           <IconLucideEye class="size-5" />
         </button>
diff --git a/apps/desktop/src/routes/(window-chrome)/upgrade.tsx b/apps/desktop/src/routes/(window-chrome)/upgrade.tsx
index cb0b15c6..09e44c18 100644
--- a/apps/desktop/src/routes/(window-chrome)/upgrade.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/upgrade.tsx
@@ -103,7 +103,7 @@ export default function Page() {
       {!upgradeComplete() && (
         <>
           <div class="text-center">
-            <h1 class="text-4xl md:text-4xl mb-3 tracking-[-.05em] font-medium">
+            <h1 class="text-4xl md:text-4xl mb-3 tracking-[-.05em] font-medium text-[--text-primary]">
               Upgrade to Cap Pro
             </h1>
             <p class="text-base font-normal leading-6 text-gray-400">
@@ -119,25 +119,25 @@ export default function Page() {
             <div class="border text-card-foreground shadow-sm bg-blue-300 p-3 md:p-3 rounded-xl flex-grow border-blue-500/20">
               <div class="space-y-3">
                 <div class="flex flex-col space-y-1.5 pt-6 px-6 pb-3">
-                  <h3 class="font-medium tracking-tight text-2xl text-gray-50">
+                  <h3 class="font-medium tracking-tight text-2xl text-[--text-primary]">
                     Cap Pro — Early Adopter Pricing
                   </h3>
-                  <p class="text-[0.875rem] leading-[1.25rem] text-gray-50/80">
+                  <p class="text-[0.875rem] leading-[1.25rem] text-[--text-tertiary]">
                     For professional use and teams.
                   </p>
                   <div>
                     <div class="flex items-center space-x-3">
-                      <h3 class="text-4xl text-gray-50">
+                      <h3 class="text-4xl text-[--text-primary]">
                         {isAnnual() ? "$6/mo" : "$9/mo"}
                       </h3>
                       <div>
-                        <p class="text-sm font-medium text-gray-50/80">
+                        <p class="text-sm font-medium text-[--text-tertiary]">
                           {isAnnual()
                             ? "per user, billed annually."
                             : "per user, billed monthly."}
                         </p>
                         {isAnnual() && (
-                          <p class="text-sm text-gray-50/80">
+                          <p class="text-sm text-[--text-tertiary]">
                             or, $9/month, billed monthly.
                           </p>
                         )}
@@ -147,7 +147,7 @@ export default function Page() {
                 </div>
                 <div class="mt-3 px-3 md:px-8">
                   <div class="flex items-center mt-3 pt-4 pb-1 border-t-2 border-gray-50/20">
-                    <span class="text-xs text-gray-50/80 mr-2">
+                    <span class="text-xs text-[--text-tertiary] mr-2">
                       Switch to {isAnnual() ? "monthly" : "annually"}
                     </span>
                     <button
@@ -156,12 +156,12 @@ export default function Page() {
                       aria-checked={isAnnual()}
                       data-state={isAnnual() ? "unchecked" : "checked"}
                       value={isAnnual() ? "on" : "off"}
-                      class="peer inline-flex h-4 w-8 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 bg-blue-400"
+                      class="peer inline-flex h-4 w-8 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 bg-[--blue-400]"
                       onClick={togglePricing}
                     >
                       <span
                         data-state={isAnnual() ? "unchecked" : "checked"}
-                        class="pointer-events-none block h-4 w-4 rounded-full bg-gray-50 shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+                        class="pointer-events-none block h-4 w-4 rounded-full bg-[--gray-50] shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
                       />
                     </button>
                   </div>
@@ -169,7 +169,7 @@ export default function Page() {
                 <div class="px-6 pb-4 pt-0">
                   <button
                     onClick={getCheckoutUrl}
-                    class="flex items-center justify-center rounded-full bg-gray-50 text-gray-900 hover:bg-gray-200 disabled:bg-gray-100 border border-gray-300 font-medium text-lg px-6 h-12 w-full no-underline"
+                    class="flex items-center justify-center rounded-full bg-[--gray-50] text-[--text-primary] hover:bg-[--gray-200] disabled:bg-[--gray-100] border border-[--gray-300] font-medium text-lg px-6 h-12 w-full no-underline"
                     disabled={loading()}
                   >
                     {loading() ? "Loading..." : "Upgrade to Cap Pro"}
@@ -182,9 +182,9 @@ export default function Page() {
                         {proFeatures.map((feature) => (
                           <li class="flex items-center justify-start">
                             <div class="w-6 h-6 m-0 p-0 flex items-center border-[2px] border-white justify-center rounded-full">
-                              <IconLucideCheck class="w-5 h-5 stroke-[4px] text-gray-50" />
+                              <IconLucideCheck class="w-5 h-5 stroke-[4px] text-[--gray-50]" />
                             </div>
-                            <span class="ml-2 text-lg text-gray-50">
+                            <span class="ml-2 text-lg text-[--text-primary]">
                               {feature}
                             </span>
                           </li>
diff --git a/apps/desktop/src/routes/editor/ui.tsx b/apps/desktop/src/routes/editor/ui.tsx
index 5a08ef94..9563cc04 100644
--- a/apps/desktop/src/routes/editor/ui.tsx
+++ b/apps/desktop/src/routes/editor/ui.tsx
@@ -298,9 +298,7 @@ export const topLeftAnimateClasses =
 export const topRightAnimateClasses =
   "ui-expanded:animate-in ui-expanded:fade-in ui-expanded:zoom-in-95 ui-closed:animate-out ui-closed:fade-out ui-closed:zoom-out-95 origin-top-right";
 
-export function ComingSoonTooltip(
-  props: ComponentProps<typeof KTooltip> & any
-) {
+export function ComingSoonTooltip(props: ComponentProps<typeof KTooltip> & any) {
   const [trigger, root] = splitProps(props, ["children", "as"]);
   return (
     <KTooltip placement="top" openDelay={0} closeDelay={0} {...root}>
@@ -309,13 +307,7 @@ export function ComingSoonTooltip(
       </KTooltip.Trigger>
       <KTooltip.Portal>
         <KTooltip.Content
-          class="p-2 font-medium bg-gray-500 text-white ui-expanded:animate-in ui-expanded:slide-in-from-bottom-1 ui-expanded:fade-in ui-closed:animate-out ui-closed:slide-out-to-bottom-1 ui-closed:fade-out"
-          style={{
-            color: "white",
-            "border-radius": "8px",
-            "font-size": "12px",
-            "z-index": "1000",
-          }}
+          class="p-2 font-medium bg-gray-500 dark:bg-gray-700 text-gray-50 ui-expanded:animate-in ui-expanded:slide-in-from-bottom-1 ui-expanded:fade-in ui-closed:animate-out ui-closed:slide-out-to-bottom-1 ui-closed:fade-out rounded-lg text-xs z-[1000]"
         >
           Coming Soon
         </KTooltip.Content>
diff --git a/apps/desktop/src/routes/in-progress-recording.tsx b/apps/desktop/src/routes/in-progress-recording.tsx
index a67407f0..c7c96c12 100644
--- a/apps/desktop/src/routes/in-progress-recording.tsx
+++ b/apps/desktop/src/routes/in-progress-recording.tsx
@@ -1,4 +1,5 @@
 import { createEffect, createSignal, type ComponentProps } from "solid-js";
+import { cx } from "cva";
 
 import { commands, events } from "~/utils/tauri";
 import { createTimer } from "@solid-primitives/timer";
@@ -52,13 +53,11 @@ export default function () {
   }));
 
   return (
-    <div
-      class="text-gray-400 flex flex-row items-stretch bg-gray-500 w-full h-full animate-in fade-in"
-    >
+    <div class="flex flex-row items-stretch bg-gray-500 dark:bg-gray-50 w-full h-full animate-in fade-in">
       <div class="flex flex-row justify-between p-[0.25rem] flex-1">
         <button
           disabled={stopRecording.isPending}
-          class="py-[0.25rem] px-[0.5rem] text-red-300 gap-[0.25rem] flex flex-row items-center hover:bg-red-transparent-20 transition-colors rounded-lg"
+          class="py-[0.25rem] px-[0.5rem] text-red-300 dark:text-red-300 gap-[0.25rem] flex flex-row items-center hover:bg-red-transparent-20 transition-colors rounded-lg"
           type="button"
           onClick={() => stopRecording.mutate()}
         >
@@ -67,6 +66,7 @@ export default function () {
             {formatTime((time() - start) / 1000)}
           </span>
         </button>
+
         {window.FLAGS.pauseResume && (
           <ActionButton
             disabled={togglePause.isPending}
@@ -75,6 +75,7 @@ export default function () {
             {isPaused() ? <IconCapPlayCircle /> : <IconCapPauseCircle />}
           </ActionButton>
         )}
+
         <ActionButton
           disabled={restartRecording.isPending}
           onClick={() => restartRecording.mutate()}
@@ -83,10 +84,13 @@ export default function () {
         </ActionButton>
       </div>
       <div
-        class="bg-white-transparent-5 cursor-move flex items-center justify-center p-[0.25rem] border-l border-white-transparent-5"
+        class="bg-gray-500 dark:bg-gray-50 cursor-move flex items-center justify-center p-[0.25rem] border-l border-gray-400 dark:border-gray-200"
         data-tauri-drag-region
       >
-        <IconCapMoreVertical data-tauri-drag-region />
+        <IconCapMoreVertical
+          class="text-gray-400 dark:text-gray-400"
+          data-tauri-drag-region
+        />
       </div>
     </div>
   );
@@ -96,7 +100,12 @@ function ActionButton(props: ComponentProps<"button">) {
   return (
     <button
       {...props}
-      class="p-[0.25rem] enabled:hover:bg-white-transparent-5 enabled:hover:text-gray-50 rounded-lg transition-colors"
+      class={cx(
+        "p-[0.25rem] rounded-lg transition-colors",
+        "text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-300",
+        "h-8 w-8 flex items-center justify-center",
+        props.class
+      )}
       type="button"
     />
   );
diff --git a/apps/desktop/src/routes/prev-recordings.tsx b/apps/desktop/src/routes/prev-recordings.tsx
index 25d1bc04..3b0e96f0 100644
--- a/apps/desktop/src/routes/prev-recordings.tsx
+++ b/apps/desktop/src/routes/prev-recordings.tsx
@@ -204,11 +204,11 @@ export default function () {
                   <Suspense>
                     <div
                       ref={setRef}
-                      style={{ "border-color": "rgba(255, 255, 255, 0.2)" }}
+                      style={{ "border-color": "rgba(255, 255, 255, 0.1)" }}
                       class={cx(
-                        "w-[260px] h-[150px] p-[0.1875rem] bg-gray-500/50 rounded-[12px] overflow-hidden shadow border-[1px] group relative",
+                        "w-[260px] h-[150px] p-[0.1875rem] bg-gray-500/40 rounded-[12px] overflow-hidden shadow border-[1px] group relative",
                         "transition-all duration-300",
-                        media.isNew && "ring-2 ring-blue-500 ring-opacity-75"
+                        media.isNew && "ring-2 ring-blue-300 ring-opacity-75"
                       )}
                     >
                       <div
@@ -218,18 +218,18 @@ export default function () {
                           isLoading() && "backdrop-blur bg-gray-500/80"
                         )}
                         style={{
-                          "border-color": "rgba(255, 255, 255, 0.2)",
+                          "border-color": "rgba(255, 255, 255, 0.1)",
                           "pointer-events": "auto",
                         }}
                       >
                         <Show
                           when={imageExists()}
                           fallback={
-                            <div class="pointer-events-none w-[105%] h-[105%] absolute inset-0 -z-10 bg-gray-400" />
+                            <div class="pointer-events-none w-full h-full absolute inset-0 -z-10 bg-gray-400" />
                           }
                         >
                           <img
-                            class="pointer-events-none w-[105%] h-[105%] object-cover absolute inset-0 -z-10"
+                            class="pointer-events-none w-full h-full object-cover absolute inset-0 -z-10 rounded-[6px]"
                             alt="media preview"
                             src={`${convertFileSrc(
                               isRecording
@@ -246,9 +246,14 @@ export default function () {
                             progressState.mediaPath === media.path
                           }
                         >
-                          <div class="absolute inset-0 bg-gray-500/95 flex items-center justify-center z-[999999] pointer-events-auto">
+                          <div
+                            style={{
+                              "background-color": "rgba(0, 0, 0, 0.85)",
+                            }}
+                            class="absolute inset-0 flex items-center justify-center z-[999999] pointer-events-auto"
+                          >
                             <div class="w-[80%] text-center">
-                              <h3 class="text-sm font-medium mb-3 text-gray-50">
+                              <h3 class="text-sm font-medium mb-3 text-gray-50 dark:text-gray-500">
                                 <Switch>
                                   <Match
                                     when={
@@ -257,7 +262,7 @@ export default function () {
                                     }
                                   >
                                     {(state) => (
-                                      <h3 class="text-sm font-medium mb-3 text-gray-50">
+                                      <h3 class="text-sm font-medium mb-3 text-gray-50 dark:text-gray-500">
                                         {isRecording
                                           ? state().stage === "rendering"
                                             ? "Rendering video"
@@ -273,7 +278,7 @@ export default function () {
                                     }
                                   >
                                     {(state) => (
-                                      <h3 class="text-sm font-medium mb-3 text-gray-50">
+                                      <h3 class="text-sm font-medium mb-3 text-gray-50 dark:text-gray-500">
                                         {isRecording
                                           ? state().stage === "rendering"
                                             ? "Rendering video"
@@ -289,7 +294,7 @@ export default function () {
                                     }
                                   >
                                     {(state) => (
-                                      <h3 class="text-sm font-medium mb-3 text-gray-50">
+                                      <h3 class="text-sm font-medium mb-3 text-gray-50 dark:text-gray-500">
                                         {state().stage === "rendering"
                                           ? "Rendering video"
                                           : "Creating shareable link"}
@@ -301,7 +306,7 @@ export default function () {
 
                               <div class="w-full bg-gray-200/20 rounded-full h-2.5 mb-2">
                                 <div
-                                  class="bg-blue-300 h-2.5 rounded-full transition-all duration-200"
+                                  class="bg-blue-300 text-gray-50 dark:text-gray-500 h-2.5 rounded-full transition-all duration-200"
                                   style={{
                                     width: `${(() => {
                                       if (
@@ -341,7 +346,7 @@ export default function () {
                                 />
                               </div>
 
-                              <p class="text-xs text-gray-50 mt-2">
+                              <p class="text-xs text-gray-50 dark:text-gray-500 mt-2">
                                 {"message" in progressState
                                   ? progressState.message
                                   : undefined}
@@ -351,12 +356,15 @@ export default function () {
                         </Show>
 
                         <div
+                          style={{
+                            "background-color": "rgba(0, 0, 0, 0.4)",
+                          }}
                           class={cx(
                             "w-full h-full absolute inset-0 transition-all duration-150 pointer-events-auto",
                             isLoading() || showUpgradeTooltip()
                               ? "opacity-100"
                               : "opacity-0 group-hover:opacity-100",
-                            "backdrop-blur bg-gray-500/80 text-white p-2"
+                            "backdrop-blur text-white p-2"
                           )}
                         >
                           <TooltipIconButton
@@ -490,7 +498,7 @@ export default function () {
                           </TooltipIconButton>
                           <div class="absolute inset-0 flex items-center justify-center">
                             <Button
-                              variant="secondary"
+                              variant="white"
                               size="sm"
                               onClick={() => save.mutate()}
                               disabled={copy.isPending || upload.isPending}
@@ -517,7 +525,7 @@ export default function () {
                             <div
                               style={{ color: "white", "font-size": "14px" }}
                               class={cx(
-                                "absolute bottom-0 left-0 right-0 font-medium bg-gray-500 bg-opacity-40 backdrop-blur p-2 flex justify-between items-center pointer-events-none transition-all",
+                                "absolute bottom-0 left-0 right-0 font-medium bg-gray-500 dark:bg-gray-50 bg-opacity-40 backdrop-blur p-2 flex justify-between items-center pointer-events-none transition-all",
                                 isLoading() || showUpgradeTooltip()
                                   ? "opacity-0"
                                   : "group-hover:opacity-0"
@@ -553,7 +561,7 @@ const IconButton = (props: ComponentProps<"button">) => {
       {...props}
       type="button"
       class={cx(
-        "p-[0.325rem] bg-gray-100 rounded-full text-neutral-300 text-[12px] shadow-[0px 2px 4px rgba(18, 22, 31, 0.12)]",
+        "p-[0.325rem] bg-gray-50 dark:bg-gray-500 rounded-full text-[12px] shadow-[0px 2px 4px rgba(18, 22, 31, 0.12)]",
         props.class
       )}
     />
@@ -587,10 +595,10 @@ const TooltipIconButton = (
       </Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Content
-          class="p-2 font-medium"
+          class="py-1.5 px-2 font-medium"
           style={{
-            "background-color": "rgba(255, 255, 255, 0.1)",
-            color: "white",
+            "background-color": "rgba(255, 255, 255, 0.85)",
+            color: "black",
             "border-radius": "8px",
             "font-size": "12px",
             "z-index": "15",
diff --git a/apps/desktop/src/store/theme.ts b/apps/desktop/src/store/theme.ts
new file mode 100644
index 00000000..79a89512
--- /dev/null
+++ b/apps/desktop/src/store/theme.ts
@@ -0,0 +1,47 @@
+import { createSignal } from "solid-js";
+import { generalSettingsStore } from "~/store";
+import type { GeneralSettingsStore } from "~/utils/tauri";
+import { emit, listen } from "@tauri-apps/api/event";
+
+const THEME_CHANGE_EVENT = "theme-change";
+const [isDarkMode, setIsDarkMode] = createSignal(false);
+
+const applyTheme = (darkMode: boolean) => {
+  setIsDarkMode(darkMode);
+  document.documentElement.classList.toggle("dark", darkMode);
+};
+
+export const themeStore = {
+  isDarkMode,
+  toggleTheme: async () => {
+    const newValue = !isDarkMode();
+    applyTheme(newValue);
+    await generalSettingsStore.set({ darkMode: newValue } as Partial<GeneralSettingsStore>);
+    // Emit theme change event to other windows
+    await emit(THEME_CHANGE_EVENT, { darkMode: newValue });
+  },
+  initialize: async () => {
+    const settings = await generalSettingsStore.get();
+    
+    // Check system preference if no setting is saved
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const darkMode = settings?.darkMode ?? prefersDark;
+    
+    applyTheme(darkMode);
+    
+    // Listen for theme changes from other windows
+    await listen(THEME_CHANGE_EVENT, (event: any) => {
+      applyTheme(event.payload.darkMode);
+    });
+    
+    // Listen for system theme changes
+    window.matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", (e) => {
+        // Only change theme if user hasn't explicitly set a preference
+        if (settings?.darkMode === undefined) {
+          applyTheme(e.matches);
+          emit(THEME_CHANGE_EVENT, { darkMode: e.matches });
+        }
+      });
+  },
+};
diff --git a/apps/desktop/src/styles/theme.css b/apps/desktop/src/styles/theme.css
new file mode 100644
index 00000000..7c3dc1f0
--- /dev/null
+++ b/apps/desktop/src/styles/theme.css
@@ -0,0 +1,90 @@
+:root {
+  /* Light theme variables */
+  --gray-50: #FFFFFF;
+  --gray-100: #F7F8FA;
+  --gray-200: #E7EAF0;
+  --gray-300: #C9CEDB;
+  --gray-400: #8991A3;
+  --gray-500: #12161F;
+
+  --black-transparent-5: rgba(18,22,31,0.05);
+  --black-transparent-10: rgba(18,22,31,0.1);
+  --black-transparent-20: rgba(18,22,31,0.2);
+  --black-transparent-40: rgba(18,22,31,0.4);
+  --black-transparent-60: rgba(18,22,31,0.6);
+  --black-transparent-80: rgba(18,22,31,0.8);
+
+  --white-transparent-5: rgba(255,255,255,0.05);
+  --white-transparent-10: rgba(255,255,255,0.1);
+  --white-transparent-20: rgba(255,255,255,0.2);
+  --white-transparent-40: rgba(255,255,255,0.4);
+
+  --blue-50: #EBF1FF;
+  --blue-100: #ADC9FF;
+  --blue-200: #85ADFF;
+  --blue-300: #4785FF;
+  --blue-400: #3F75E0;
+
+  --blue-transparent-10: rgba(34,64,122,0.1);
+  --blue-transparent-20: rgba(34,64,122,0.2);
+
+  --red-50: #FFEBEE;
+  --red-100: #FFADBB;
+  --red-200: #FF8599;
+  --red-300: #FF4766;
+  --red-400: #E03F5A;
+
+  --red-transparent-20: rgba(255,71,102,0.2);
+
+  --shadow-s: 0px 8px 16px 0px rgba(18, 22, 31, 0.04);
+}
+
+/* Dark theme variables */
+:root.dark {
+  /* Main background colors */
+  --gray-50: #1E1E1E;    /* Main background */
+  --gray-100: #242424;   /* Secondary background */
+  --gray-200: #2A2A2A;   /* Borders and dividers */
+  --gray-300: #3A3A3A;   /* Subtle highlights */
+  --gray-400: #EBEBF0;   /* Secondary text - descriptions */
+  --gray-500: #FFFFFF;   /* Primary text - titles/headings (back to white) */
+
+  /* Add new variables for text hierarchy */
+  --text-primary: rgba(255, 255, 255, 0.95);    /* Section titles, headings */
+  --text-secondary: rgba(255, 255, 255, 0.85);  /* Important labels */
+  --text-tertiary: rgba(255, 255, 255, 0.65);   /* Descriptions */
+
+  /* Transparent overlays - adjusted for better contrast */
+  --black-transparent-5: rgba(255,255,255,0.05);
+  --black-transparent-10: rgba(255,255,255,0.1);
+  --black-transparent-20: rgba(255,255,255,0.2);
+  --black-transparent-40: rgba(255,255,255,0.4);
+  --black-transparent-60: rgba(255,255,255,0.6);
+  --black-transparent-80: rgba(255,255,255,0.8);
+
+  /* White transparencies */
+  --white-transparent-5: rgba(18,22,31,0.05);
+  --white-transparent-10: rgba(18,22,31,0.1);
+  --white-transparent-20: rgba(18,22,31,0.2);
+  --white-transparent-40: rgba(18,22,31,0.4);
+
+  /* Accent colors remain mostly the same but adjusted for dark theme */
+  --blue-50: #1A2438;
+  --blue-100: #243352;
+  --blue-200: #2E426B;
+  --blue-300: #4785FF;
+  --blue-400: #5C8FFF;
+
+  --blue-transparent-10: rgba(71,133,255,0.1);
+  --blue-transparent-20: rgba(71,133,255,0.2);
+
+  --red-50: #2C1A1E;
+  --red-100: #52232C;
+  --red-200: #6B2C39;
+  --red-300: #FF4766;
+  --red-400: #FF5C7A;
+
+  --red-transparent-20: rgba(255,71,102,0.2);
+
+  --shadow-s: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
+}
diff --git a/apps/desktop/src/utils/tauri.ts b/apps/desktop/src/utils/tauri.ts
index 377c701e..2ada9228 100644
--- a/apps/desktop/src/utils/tauri.ts
+++ b/apps/desktop/src/utils/tauri.ts
@@ -231,7 +231,7 @@ export type CursorType = "pointer" | "circle"
 export type Display = { path: string }
 export type EditorStateChanged = { playhead_position: number }
 export type Flags = { recordMouse: boolean; split: boolean; pauseResume: boolean; zoom: boolean }
-export type GeneralSettingsStore = { uploadIndividualFiles?: boolean; openEditorAfterRecording?: boolean; hideDockIcon?: boolean; autoCreateShareableLink?: boolean; enableNotifications?: boolean; disableAutoOpenLinks?: boolean; hasCompletedStartup?: boolean }
+export type GeneralSettingsStore = { uploadIndividualFiles?: boolean; openEditorAfterRecording?: boolean; hideDockIcon?: boolean; autoCreateShareableLink?: boolean; enableNotifications?: boolean; disableAutoOpenLinks?: boolean; hasCompletedStartup?: boolean; darkMode?: boolean }
 export type Hotkey = { code: string; meta: boolean; ctrl: boolean; alt: boolean; shift: boolean }
 export type HotkeyAction = "startRecording" | "stopRecording" | "restartRecording" | "takeScreenshot"
 export type HotkeysConfiguration = { show: boolean }
diff --git a/packages/ui-solid/icons/logo-full-dark.svg b/packages/ui-solid/icons/logo-full-dark.svg
new file mode 100644
index 00000000..0d563ed4
--- /dev/null
+++ b/packages/ui-solid/icons/logo-full-dark.svg
@@ -0,0 +1,7 @@
+<svg width="103" height="40" viewBox="0 0 103 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="8" fill="white"/>
+<path d="M20 36C28.8365 36 36 28.8365 36 20C36 11.1635 28.8365 4 20 4C11.1635 4 4 11.1635 4 20C4 28.8365 11.1635 36 20 36Z" fill="#12161F"/>
+<path d="M20.0001 33C27.1797 33 33 27.1797 33 20.0001C33 12.8203 27.1797 7 20.0001 7C12.8203 7 7 12.8204 7 20.0001C7 27.1797 12.8204 33 20.0001 33Z" fill="#C9CEDB"/>
+<path d="M19.9999 30C25.5228 30 30 25.5228 30 19.9999C30 14.4771 25.5228 10 19.9999 10C14.4771 10 10 14.4771 10 19.9999C10 25.5228 14.4771 30 19.9999 30Z" fill="white"/>
+<path d="M58.416 30.448C53.012 30.448 49.204 26.584 49.204 20.088C49.204 13.704 52.872 9.672 58.472 9.672C63.54 9.672 66.256 12.332 67.096 16.84L63.288 17.036C62.812 14.432 61.216 12.836 58.472 12.836C55.084 12.836 52.984 15.664 52.984 20.088C52.984 24.568 55.14 27.284 58.444 27.284C61.384 27.284 62.952 25.576 63.4 22.72L67.208 22.916C66.424 27.592 63.456 30.448 58.416 30.448ZM74.6451 30.336C71.5091 30.336 69.4371 28.852 69.4371 26.248C69.4371 23.672 71.0331 22.3 74.3091 21.656L79.2651 20.676C79.2651 18.576 78.2851 17.484 76.4091 17.484C74.6451 17.484 73.6931 18.296 73.3571 19.808L69.6891 19.64C70.2771 16.504 72.6851 14.712 76.4091 14.712C80.6651 14.712 82.8491 16.952 82.8491 20.928V26.36C82.8491 27.172 83.1291 27.396 83.6891 27.396H84.1651V30C83.9411 30.056 83.3531 30.112 82.8771 30.112C81.2531 30.112 80.0491 29.524 79.7411 27.676C79.0131 29.272 77.1091 30.336 74.6451 30.336ZM75.3731 27.732C77.7531 27.732 79.2651 26.22 79.2651 23.952V23.112L75.4011 23.896C73.8051 24.204 73.1611 24.876 73.1611 25.912C73.1611 27.088 73.9451 27.732 75.3731 27.732ZM86.8741 34.2V15.048H90.3181L90.3741 17.26C91.2421 15.608 92.8941 14.712 94.8541 14.712C99.1101 14.712 101.21 18.212 101.21 22.524C101.21 26.836 99.0821 30.336 94.8261 30.336C92.9221 30.336 91.2701 29.412 90.4581 27.956V34.2H86.8741ZM93.9861 27.424C96.1701 27.424 97.4861 25.604 97.4861 22.524C97.4861 19.444 96.1701 17.624 93.9861 17.624C91.8021 17.624 90.4581 19.276 90.4581 22.524C90.4581 25.772 91.7741 27.424 93.9861 27.424Z" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/packages/ui-solid/src/Button.tsx b/packages/ui-solid/src/Button.tsx
index d1d21107..1e7f4d96 100644
--- a/packages/ui-solid/src/Button.tsx
+++ b/packages/ui-solid/src/Button.tsx
@@ -11,11 +11,13 @@ const styles = cva(
     variants: {
       variant: {
         primary:
-          "bg-blue-300 text-gray-50 hover:bg-blue-400 disabled:bg-blue-200 outline-blue-300",
+          "bg-blue-300 text-gray-50 dark:text-gray-500 hover:bg-blue-400 disabled:bg-blue-200 outline-blue-300",
         secondary:
           "bg-gray-200 text-gray-500 hover:bg-gray-300 disabled:bg-gray-200 disabled:text-gray-400 outline-blue-300",
         destructive:
-          "bg-red-300 text-gray-50 hover:bg-red-400 disabled:bg-red-200 outline-red-300",
+          "bg-red-300 text-gray-50 dark:text-white hover:bg-red-400 disabled:bg-red-200 outline-red-300",
+        white:
+          "bg-gray-50 dark:bg-gray-500 text-gray-500 dark:text-gray-50 hover:bg-gray-100 disabled:bg-gray-50 disabled:text-gray-400 outline-blue-300",
       },
       size: {
         xs: "font-[400] text-[0.75rem] px-[0.5rem] h-[1.25rem] ",
diff --git a/packages/ui-solid/src/auto-imports.d.ts b/packages/ui-solid/src/auto-imports.d.ts
index bff1f0e7..6b5d4a05 100644
--- a/packages/ui-solid/src/auto-imports.d.ts
+++ b/packages/ui-solid/src/auto-imports.d.ts
@@ -6,8 +6,6 @@
 // biome-ignore lint: disable
 export {}
 declare global {
-  const IconCapApps: typeof import('~icons/cap/apps.jsx')['default']
-  const IconCapArrows: typeof import('~icons/cap/arrows.jsx')['default']
   const IconCapAudioOn: typeof import('~icons/cap/audio-on.jsx')['default']
   const IconCapBlur: typeof import('~icons/cap/blur.jsx')['default']
   const IconCapCamera: typeof import('~icons/cap/camera.jsx')['default']
@@ -29,6 +27,7 @@ declare global {
   const IconCapLayout: typeof import('~icons/cap/layout.jsx')['default']
   const IconCapLogo: typeof import('~icons/cap/logo.jsx')['default']
   const IconCapLogoFull: typeof import('~icons/cap/logo-full.jsx')['default']
+  const IconCapLogoFullDark: typeof import('~icons/cap/logo-full-dark.jsx')['default']
   const IconCapMessageBubble: typeof import('~icons/cap/message-bubble.jsx')['default']
   const IconCapMicrophone: typeof import('~icons/cap/microphone.jsx')['default']
   const IconCapMoreVertical: typeof import('~icons/cap/more-vertical.jsx')['default']
@@ -41,32 +40,22 @@ declare global {
   const IconCapScissors: typeof import('~icons/cap/scissors.jsx')['default']
   const IconCapSettings: typeof import('~icons/cap/settings.jsx')['default']
   const IconCapShadow: typeof import('~icons/cap/shadow.jsx')['default']
-  const IconCapSquare: typeof import('~icons/cap/square.jsx')['default']
   const IconCapStopCircle: typeof import('~icons/cap/stop-circle.jsx')['default']
   const IconCapTrash: typeof import('~icons/cap/trash.jsx')['default']
   const IconCapUndo: typeof import('~icons/cap/undo.jsx')['default']
   const IconCapUpload: typeof import('~icons/cap/upload.jsx')['default']
   const IconLucideBell: typeof import('~icons/lucide/bell.jsx')['default']
-  const IconLucideBlocks: typeof import('~icons/lucide/blocks.jsx')['default']
-  const IconLucideBrickWall: typeof import('~icons/lucide/brick-wall.jsx')['default']
-  const IconLucideCable: typeof import('~icons/lucide/cable.jsx')['default']
   const IconLucideCamera: typeof import('~icons/lucide/camera.jsx')['default']
   const IconLucideCheck: typeof import('~icons/lucide/check.jsx')['default']
-  const IconLucideCloud: typeof import('~icons/lucide/cloud.jsx')['default']
   const IconLucideDatabase: typeof import('~icons/lucide/database.jsx')['default']
-  const IconLucideDevice: typeof import('~icons/lucide/device.jsx')['default']
   const IconLucideEdit: typeof import('~icons/lucide/edit.jsx')['default']
   const IconLucideEye: typeof import('~icons/lucide/eye.jsx')['default']
   const IconLucideFolder: typeof import('~icons/lucide/folder.jsx')['default']
   const IconLucideLayoutGrid: typeof import('~icons/lucide/layout-grid.jsx')['default']
   const IconLucideLoaderCircle: typeof import('~icons/lucide/loader-circle.jsx')['default']
   const IconLucideMessageSquarePlus: typeof import('~icons/lucide/message-square-plus.jsx')['default']
-  const IconLucidePlugZap: typeof import('~icons/lucide/plug-zap.jsx')['default']
   const IconLucideRabbit: typeof import('~icons/lucide/rabbit.jsx')['default']
   const IconLucideRotateCcw: typeof import('~icons/lucide/rotate-ccw.jsx')['default']
   const IconLucideSearch: typeof import('~icons/lucide/search.jsx')['default']
-  const IconLucideSettings: typeof import('~icons/lucide/settings.jsx')['default']
   const IconLucideSquarePlay: typeof import('~icons/lucide/square-play.jsx')['default']
-  const IconLucideVolume2: typeof import('~icons/lucide/volume2.jsx')['default']
-  const IconLucideVolumeX: typeof import('~icons/lucide/volume-x.jsx')['default']
 }
diff --git a/packages/ui-solid/tailwind.config.js b/packages/ui-solid/tailwind.config.js
index 5ceb8232..81e4dd8b 100644
--- a/packages/ui-solid/tailwind.config.js
+++ b/packages/ui-solid/tailwind.config.js
@@ -4,55 +4,56 @@ module.exports = {
     "../../apps/*/src/**/*.{js,ts,jsx,tsx,mdx}",
     "../../packages/*/src/**/*.{ts,tsx,html,stories.tsx}",
   ],
+  darkMode: "class",
   theme: {
     colors: {
       transparent: "rgba(0,0,0,0)",
       gray: {
-        50: "#FFFFFF",
-        100: "#F7F8FA",
-        200: "#E7EAF0",
-        300: "#C9CEDB",
-        400: "#8991A3",
-        500: "#12161F",
+        50: "var(--gray-50)",
+        100: "var(--gray-100)",
+        200: "var(--gray-200)",
+        300: "var(--gray-300)",
+        400: "var(--gray-400)",
+        500: "var(--gray-500)",
       },
       "black-transparent": {
-        5: "rgba(18,22,31,0.05)",
-        10: "rgba(18,22,31,0.1)",
-        20: "rgba(18,22,31,0.2)",
-        40: "rgba(18,22,31,0.4)",
-        60: "rgba(18,22,31,0.6)",
-        80: "rgba(18,22,31,0.8)",
+        5: "var(--black-transparent-5)",
+        10: "var(--black-transparent-10)",
+        20: "var(--black-transparent-20)",
+        40: "var(--black-transparent-40)",
+        60: "var(--black-transparent-60)",
+        80: "var(--black-transparent-80)",
       },
       "white-transparent": {
-        5: "rgba(255,255,255,0.05)",
-        10: "rgba(255,255,255,0.1)",
-        20: "rgba(255,255,255,0.2)",
-        40: "rgba(255,255,255,0.4)",
+        5: "var(--white-transparent-5)",
+        10: "var(--white-transparent-10)",
+        20: "var(--white-transparent-20)",
+        40: "var(--white-transparent-40)",
       },
       blue: {
-        50: "#EBF1FF",
-        100: "#ADC9FF",
-        200: "#85ADFF",
-        300: "#4785FF",
-        400: "#3F75E0",
+        50: "var(--blue-50)",
+        100: "var(--blue-100)",
+        200: "var(--blue-200)",
+        300: "var(--blue-300)",
+        400: "var(--blue-400)",
       },
       "blue-transparent": {
-        10: "rgba(34,64,122,0.1)",
-        20: "rgba(34,64,122,0.2)",
+        10: "var(--blue-transparent-10)",
+        20: "var(--blue-transparent-20)",
       },
       red: {
-        50: "#FFEBEE",
-        100: "#FFADBB",
-        200: "#FF8599",
-        300: "#FF4766",
-        400: "#E03F5A",
+        50: "var(--red-50)",
+        100: "var(--red-100)",
+        200: "var(--red-200)",
+        300: "var(--red-300)",
+        400: "var(--red-400)",
       },
       "red-transparent": {
-        20: "rgba(255,71,102,0.2)",
+        20: "var(--red-transparent-20)",
       },
     },
     boxShadow: {
-      s: "0px 8px 16px 0px rgba(18, 22, 31, 0.04)",
+      s: "var(--shadow-s)",
     },
   },
   plugins: [