diff --git a/core/autocomplete/filtering/test/testCases.ts b/core/autocomplete/filtering/test/testCases.ts
index f83de16073..3ec71c8da8 100644
--- a/core/autocomplete/filtering/test/testCases.ts
+++ b/core/autocomplete/filtering/test/testCases.ts
@@ -650,10 +650,10 @@ export const Button = ({
 <|fim|>
   );
 };`,
-    llmOutput: `<button onClick={onClick} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+    llmOutput: `<button onClick={onClick} className="bg-blue-500 hover:bg-primary text-primary-foreground font-bold py-2 px-4 rounded">
       {children}
     </button>`,
-    expectedCompletion: `<button onClick={onClick} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+    expectedCompletion: `<button onClick={onClick} className="bg-blue-500 hover:bg-primary text-primary-foreground font-bold py-2 px-4 rounded">
       {children}
     </button>`,
     filename: "Button.tsx",
diff --git a/extensions/intellij/src/main/kotlin/com/github/continuedev/continueintellijextension/editor/InlineEditAction.kt b/extensions/intellij/src/main/kotlin/com/github/continuedev/continueintellijextension/editor/InlineEditAction.kt
index 714cd6417e..39b7ac2a86 100644
--- a/extensions/intellij/src/main/kotlin/com/github/continuedev/continueintellijextension/editor/InlineEditAction.kt
+++ b/extensions/intellij/src/main/kotlin/com/github/continuedev/continueintellijextension/editor/InlineEditAction.kt
@@ -479,7 +479,7 @@ class CustomPanel(
         JPanel(MigLayout("insets 0, fillx")).apply {
             val leftLabel =
                 JLabel("Type to re-prompt").apply {
-                    foreground = Color(156, 163, 175) // text-gray-400
+                    foreground = Color(156, 163, 175) // text-description
                     font = UIUtil.getFontWithFallback("Arial", Font.PLAIN, 11)
                     border = EmptyBorder(0, 4, 0, 0)
                 }
@@ -737,7 +737,7 @@ class TransparentArrowButtonUI : BasicComboBoxUI() {
         if (item != null) {
             val c = renderer.getListCellRendererComponent(listBox, item, -1, false, false)
             c.font = comboBox.font
-            c.foreground = Color(156, 163, 175) // text-gray-400
+            c.foreground = Color(156, 163, 175) // text-description
             c.background = comboBox.background
 
             if (c is JComponent) {
diff --git a/gui/src/App.tsx b/gui/src/App.tsx
index 18df91b868..40894e4199 100644
--- a/gui/src/App.tsx
+++ b/gui/src/App.tsx
@@ -1,4 +1,3 @@
-import { useDispatch } from "react-redux";
 import { RouterProvider, createMemoryRouter } from "react-router-dom";
 import Layout from "./components/Layout";
 import { VscThemeProvider } from "./context/VscTheme";
@@ -13,6 +12,7 @@ import MorePage from "./pages/More";
 import Stats from "./pages/stats";
 import { ROUTES } from "./util/navigation";
 import { SubmenuContextProvidersProvider } from "./context/SubmenuContextProviders";
+import ThemePage from "./pages/theme";
 
 const router = createMemoryRouter([
   {
@@ -56,6 +56,10 @@ const router = createMemoryRouter([
         path: "/migration",
         element: <MigrationPage />,
       },
+      {
+        path: ROUTES.THEME,
+        element: <ThemePage />,
+      },
     ],
   },
 ]);
diff --git a/gui/src/components/AccountDialog.tsx b/gui/src/components/AccountDialog.tsx
index c555205747..36112f1f9c 100644
--- a/gui/src/components/AccountDialog.tsx
+++ b/gui/src/components/AccountDialog.tsx
@@ -43,7 +43,7 @@ export default function AccountDialog() {
     return (
       <div className="p-4 pt-0">
         <h1 className="mb-0.5 text-center text-2xl">Account</h1>
-        <span className="text-lightgray mb-4 block text-center">
+        <span className="text-description mb-4 block text-center">
           Signed out
         </span>
         <Button className="w-full" onClick={login}>
@@ -77,7 +77,7 @@ export default function AccountDialog() {
     <div className="flex flex-col items-center gap-5 p-4 pt-0">
       <div className="flex flex-col items-center text-center">
         <h1 className="mb-1 text-2xl">Account</h1>
-        <span className="text-lightgray text-sm">
+        <span className="text-description text-sm">
           {session.account.label === "" ? (
             "Signed in"
           ) : (
diff --git a/gui/src/components/CodeToEditCard/AddFileButton.tsx b/gui/src/components/CodeToEditCard/AddFileButton.tsx
index b1e1966fe5..f419789ba4 100644
--- a/gui/src/components/CodeToEditCard/AddFileButton.tsx
+++ b/gui/src/components/CodeToEditCard/AddFileButton.tsx
@@ -31,7 +31,7 @@ export default function AddFileButton({ onClick }: AddFileButtonProps) {
       <div className="relative">
         <Listbox.Button
           ref={buttonRef}
-          className="bg-vsc-editor-background border-lightgray/50 flex h-5 cursor-pointer items-center justify-between rounded-md border border-solid px-0 shadow-sm transition-colors"
+          className="bg-vsc-editor-background border-border/50 flex h-5 cursor-pointer items-center justify-between rounded-md border border-solid px-0 shadow-sm transition-colors"
         >
           <div
             className="flex h-5 w-14 items-center justify-center gap-1 hover:brightness-125"
@@ -47,12 +47,12 @@ export default function AddFileButton({ onClick }: AddFileButtonProps) {
             </span>
           </div>
 
-          <div className="border-lightgray/50 h-4 w-[1px] border-y-0 border-l-0 border-r border-solid" />
+          <div className="border-border/50 h-4 w-[1px] border-y-0 border-l-0 border-r border-solid" />
 
           <ChevronDownIcon className="text-vsc-foreground h-2.5 w-2.5 cursor-pointer px-1 brightness-75 hover:brightness-125" />
         </Listbox.Button>
 
-        <Listbox.Options className="bg-vsc-editor-background border-lightgray/50 absolute right-0 top-full z-50 mt-1 min-w-fit whitespace-nowrap rounded-md border border-solid px-1 py-0 shadow-lg">
+        <Listbox.Options className="bg-vsc-editor-background border-border/50 absolute right-0 top-full z-50 mt-1 min-w-fit whitespace-nowrap rounded-md border border-solid px-1 py-0 shadow-lg">
           <Listbox.Option
             value="addAllFiles"
             className="text-vsc-foreground block w-full cursor-pointer px-2 py-1 text-left text-[10px] brightness-75 hover:brightness-125"
diff --git a/gui/src/components/CodeToEditCard/AddFileCombobox.tsx b/gui/src/components/CodeToEditCard/AddFileCombobox.tsx
index b79365fb1f..97e3d60097 100644
--- a/gui/src/components/CodeToEditCard/AddFileCombobox.tsx
+++ b/gui/src/components/CodeToEditCard/AddFileCombobox.tsx
@@ -67,7 +67,7 @@ export default function AddFileCombobox({
               onFocus={() => {
                 buttonRef.current?.click();
               }}
-              className="bg-vsc-background border-lightgray text-vsc-foreground box-border w-full rounded border border-solid py-0.5 pl-2 focus:outline-none"
+              className="bg-vsc-background border-border text-vsc-foreground box-border w-full rounded border border-solid py-0.5 pl-2 focus:outline-none"
               onChange={(event) => setQuery(event.target.value)}
               placeholder="Type to search files..."
               onKeyDown={(e) => {
@@ -77,7 +77,7 @@ export default function AddFileCombobox({
               }}
             />
 
-            <Combobox.Options className="no-scrollbar bg-vsc-editor-background border-lightgray/50 absolute left-0 right-0 z-50 mt-1 max-h-60 overflow-y-auto overflow-x-hidden rounded-md border border-solid px-1 py-0 pl-0 pr-5 shadow-lg focus:outline-none">
+            <Combobox.Options className="no-scrollbar bg-vsc-editor-background border-border/50 absolute left-0 right-0 z-50 mt-1 max-h-60 overflow-y-auto overflow-x-hidden rounded-md border border-solid px-1 py-0 pl-0 pr-5 shadow-lg focus:outline-none">
               {filteredFiles.length > 0 ? (
                 filteredFiles.map((file) => (
                   <Combobox.Option
@@ -103,7 +103,7 @@ export default function AddFileCombobox({
                         </div>
 
                         <span
-                          className={`text-lightgray max-w-[30%] truncate ${
+                          className={`text-description max-w-[30%] truncate ${
                             active || selected ? "visible" : "invisible"
                           } group-hover:visible`}
                         >
@@ -114,7 +114,7 @@ export default function AddFileCombobox({
                   </Combobox.Option>
                 ))
               ) : (
-                <div className="text-vsc-list-active-foreground0 px-2 py-1 text-xs">
+                <div className="text-vsc-list-active-foreground px-2 py-1 text-xs">
                   No results
                 </div>
               )}
diff --git a/gui/src/components/CodeToEditCard/CodeToEditCard.tsx b/gui/src/components/CodeToEditCard/CodeToEditCard.tsx
index 7bd469c240..57d481e04d 100644
--- a/gui/src/components/CodeToEditCard/CodeToEditCard.tsx
+++ b/gui/src/components/CodeToEditCard/CodeToEditCard.tsx
@@ -56,7 +56,7 @@ export default function CodeToEditCard() {
 
   return (
     <div className="bg-vsc-editor-background mx-3 flex flex-col rounded-t-lg p-1">
-      <div className="text-lightgray flex items-center justify-between gap-1.5 py-1.5 pl-3 pr-2 text-xs">
+      <div className="text-description flex items-center justify-between gap-1.5 py-1.5 pl-3 pr-2 text-xs">
         <span>{title}</span>
         <AddFileButton onClick={() => setShowAddFileCombobox(true)} />
       </div>
@@ -75,7 +75,7 @@ export default function CodeToEditCard() {
       ) : (
         !showAddFileCombobox && (
           <div
-            className="text-lightgray hover:bg-lightgray hover:text-vsc-foreground -mt-0.5 flex cursor-pointer items-center justify-center gap-1 rounded py-1 text-center text-xs transition-colors hover:bg-opacity-20"
+            className="text-description hover:bg-description hover:text-vsc-foreground -mt-0.5 flex cursor-pointer items-center justify-center gap-1 rounded py-1 text-center text-xs transition-colors hover:bg-opacity-20"
             onClick={() => setShowAddFileCombobox(true)}
           >
             <PlusIcon className="h-3.5 w-3.5" />
@@ -96,7 +96,7 @@ export default function CodeToEditCard() {
             onClick={(e) => {
               setShowAddFileCombobox(false);
             }}
-            className="text-lightgray hover:bg-lightgray hover:text-vsc-foreground mb-2 h-3.5 w-3.5 cursor-pointer rounded-md rounded-sm p-0.5 hover:bg-opacity-20"
+            className="text-description hover:bg-description hover:text-vsc-foreground mb-2 h-3.5 w-3.5 cursor-pointer rounded-sm p-0.5 hover:bg-opacity-20"
           />
         </div>
       )}
diff --git a/gui/src/components/CodeToEditCard/CodeToEditListItem.tsx b/gui/src/components/CodeToEditCard/CodeToEditListItem.tsx
index 46380f0843..c3c79ea068 100644
--- a/gui/src/components/CodeToEditCard/CodeToEditListItem.tsx
+++ b/gui/src/components/CodeToEditCard/CodeToEditListItem.tsx
@@ -78,7 +78,7 @@ export default function CodeToEditListItem({
       }}
     >
       <div
-        className={`hover:bg-lightgray hover:text-vsc-foreground flex items-center justify-between rounded px-2 py-0.5 transition-colors hover:bg-opacity-20 ${showCodeSnippet && "text-vsc-foreground bg-lightgray bg-opacity-20"}`}
+        className={`hover:bg-description hover:text-vsc-foreground flex items-center justify-between rounded px-2 py-0.5 transition-colors hover:bg-opacity-20 ${showCodeSnippet && "text-vsc-foreground bg-border bg-opacity-20"}`}
       >
         <div className="flex w-4/5 min-w-0 items-center gap-0.5">
           <FileIcon filename={code.filepath} height={"18px"} width={"18px"} />
@@ -92,7 +92,7 @@ export default function CodeToEditListItem({
             >
               {title}
             </span>
-            <span className="text-lightgray invisible flex-grow truncate text-xs group-hover:visible">
+            <span className="text-description invisible flex-grow truncate text-xs group-hover:visible">
               {last2Parts}
             </span>
           </div>
@@ -106,7 +106,7 @@ export default function CodeToEditListItem({
                   e.stopPropagation();
                   setShowCodeSnippet(false);
                 }}
-                className="text-lightgray hover:bg-lightgray hover:text-vsc-foreground h-3.5 w-3.5 cursor-pointer rounded-sm p-0.5 hover:bg-opacity-20"
+                className="text-description hover:bg-description hover:text-vsc-foreground h-3.5 w-3.5 cursor-pointer rounded-sm p-0.5 hover:bg-opacity-20"
               />
             ) : (
               <ChevronRightIcon
@@ -114,7 +114,7 @@ export default function CodeToEditListItem({
                   e.stopPropagation();
                   setShowCodeSnippet(true);
                 }}
-                className="text-lightgray hover:bg-lightgray hover:text-vsc-foreground h-3.5 w-3.5 cursor-pointer rounded-sm p-0.5 hover:bg-opacity-20"
+                className="text-description hover:bg-description hover:text-vsc-foreground h-3.5 w-3.5 cursor-pointer rounded-sm p-0.5 hover:bg-opacity-20"
               />
             )}
           </div>
@@ -124,7 +124,7 @@ export default function CodeToEditListItem({
                 e.stopPropagation();
                 onDelete(code);
               }}
-              className="text-lightgray hover:bg-lightgray hover:text-vsc-foreground h-3.5 w-3.5 cursor-pointer rounded-sm p-0.5 hover:bg-opacity-20"
+              className="text-description hover:bg-description hover:text-vsc-foreground h-3.5 w-3.5 cursor-pointer rounded-sm p-0.5 hover:bg-opacity-20"
             />
           </div>
         </div>
diff --git a/gui/src/components/Footer.tsx b/gui/src/components/Footer.tsx
index 9b5a6840c9..8a49fa0b4c 100644
--- a/gui/src/components/Footer.tsx
+++ b/gui/src/components/Footer.tsx
@@ -8,7 +8,7 @@ function Footer() {
 
   if (defaultModel?.provider === "free-trial") {
     return (
-      <footer className="flex flex-col border-0 border-t border-solid border-t-zinc-700 px-2 py-2">
+      <footer className="border-t-border flex flex-col border-0 border-t border-solid px-2 py-2">
         <FreeTrialProgressBar
           completed={parseInt(localStorage.getItem("ftc") || "0")}
           total={FREE_TRIAL_LIMIT_REQUESTS}
diff --git a/gui/src/components/History/HistoryTableRow.tsx b/gui/src/components/History/HistoryTableRow.tsx
index 11a5a36df3..a48d269855 100644
--- a/gui/src/components/History/HistoryTableRow.tsx
+++ b/gui/src/components/History/HistoryTableRow.tsx
@@ -88,7 +88,7 @@ export function HistoryTableRow({
         >
           <div className="flex-1 cursor-pointer space-y-1">
             {editing ? (
-              <div className="text-md">
+              <div className="text-base">
                 <Input
                   type="text"
                   className="w-full"
@@ -100,7 +100,7 @@ export function HistoryTableRow({
                 />
               </div>
             ) : (
-              <span className="text-md block max-w-80 truncate text-base font-semibold">
+              <span className="block max-w-80 truncate text-base font-semibold">
                 {sessionMetadata.title}
               </span>
             )}
diff --git a/gui/src/components/InfoHover.tsx b/gui/src/components/InfoHover.tsx
index 4b0774efe7..5cc3ba3745 100644
--- a/gui/src/components/InfoHover.tsx
+++ b/gui/src/components/InfoHover.tsx
@@ -19,7 +19,7 @@ const InfoHover = ({
     <>
       <InformationCircleIcon
         data-tooltip-id={dataTooltipId}
-        className={`h-${size ?? DEFAULT_SIZE} w-${size ?? DEFAULT_SIZE} cursor-help text-gray-500`}
+        className={`h-${size ?? DEFAULT_SIZE} w-${size ?? DEFAULT_SIZE} text-description cursor-help`}
       />
 
       <ToolTip id={dataTooltipId} place="bottom">
diff --git a/gui/src/components/Layout.tsx b/gui/src/components/Layout.tsx
index e8a0deb129..27334e2c20 100644
--- a/gui/src/components/Layout.tsx
+++ b/gui/src/components/Layout.tsx
@@ -301,7 +301,7 @@ const Layout = () => {
 
             {hasFatalErrors && pathname !== ROUTES.CONFIG_ERROR && (
               <div
-                className="z-50 cursor-pointer bg-red-600 p-4 text-center text-white"
+                className="bg-error text-error-foreground z-50 cursor-pointer p-4 text-center"
                 role="alert"
                 onClick={() => navigate(ROUTES.CONFIG_ERROR)}
               >
diff --git a/gui/src/components/OnboardingCard/components/BestExperienceConfigForm.tsx b/gui/src/components/OnboardingCard/components/BestExperienceConfigForm.tsx
index a76f6b57b2..c132b01450 100644
--- a/gui/src/components/OnboardingCard/components/BestExperienceConfigForm.tsx
+++ b/gui/src/components/OnboardingCard/components/BestExperienceConfigForm.tsx
@@ -2,7 +2,7 @@ import { CubeIcon } from "@heroicons/react/24/outline";
 import { DEFAULT_CHAT_MODEL_CONFIG } from "core/config/default";
 import { useContext, useState } from "react";
 import { useDispatch } from "react-redux";
-import { Button, Input, InputSubtext, lightGray } from "../..";
+import { Button, Input, InputSubtext, vscBorder } from "../..";
 import { IdeMessengerContext } from "../../../context/IdeMessenger";
 import { models } from "../../../pages/AddNewModel/configs/models";
 import { providers } from "../../../pages/AddNewModel/configs/providers";
@@ -84,7 +84,7 @@ function BestExperienceConfigForm({
             <label className="text-lg font-bold">Chat model</label>
             <div
               className="flex hidden items-center justify-end text-xs font-semibold sm:flex"
-              style={{ color: lightGray }}
+              style={{ color: vscBorder }}
             >
               <CubeIcon className="mr-1 h-4 w-4 flex-shrink-0" />
               <span className="inline text-right italic">
@@ -118,7 +118,7 @@ function BestExperienceConfigForm({
             <label className="text-lg font-bold">Autocomplete model</label>
             <div
               className="flex hidden items-center text-xs font-semibold sm:flex"
-              style={{ color: lightGray }}
+              style={{ color: vscBorder }}
             >
               <CubeIcon className="mr-1 inline h-4 w-4 flex-shrink-0" />
               <span className="text-right italic">
diff --git a/gui/src/components/OnboardingCard/components/OllamaCompletedStep.tsx b/gui/src/components/OnboardingCard/components/OllamaCompletedStep.tsx
index 1b2cbea0ad..78a27e3f3b 100644
--- a/gui/src/components/OnboardingCard/components/OllamaCompletedStep.tsx
+++ b/gui/src/components/OnboardingCard/components/OllamaCompletedStep.tsx
@@ -8,7 +8,7 @@ function OllamaCompletedStep({ text }: OllamaCompletedStepProps) {
   return (
     <div className="flex items-center justify-between">
       <p className="mr-1 w-3/4 truncate font-mono text-sm">{text}</p>
-      <CheckCircleIcon width={24} height={24} className="text-emerald-600" />
+      <CheckCircleIcon width={24} height={24} className="text-success" />
     </div>
   );
 }
diff --git a/gui/src/components/PageHeader.tsx b/gui/src/components/PageHeader.tsx
index 23e108c388..0e9d83c33d 100644
--- a/gui/src/components/PageHeader.tsx
+++ b/gui/src/components/PageHeader.tsx
@@ -7,9 +7,9 @@ export interface PageHeaderProps {
 
 export default function PageHeader({ onClick, title }: PageHeaderProps) {
   return (
-    <div className="bg-vsc-background sticky top-0 z-20 m-0 flex items-center border-0 border-b border-solid border-b-zinc-700 bg-inherit p-0">
+    <div className="border-b-border sticky top-0 z-20 m-0 flex items-center border-0 border-b border-solid bg-inherit p-0">
       <div
-        className="cursor-pointer transition-colors duration-200 hover:text-zinc-100"
+        className="cursor-pointer transition-colors duration-200 hover:opacity-80"
         onClick={onClick}
       >
         <ArrowLeftIcon className="ml-3 inline-block h-3 w-3" />
diff --git a/gui/src/components/ProfileSwitcher.tsx b/gui/src/components/ProfileSwitcher.tsx
index 3a5d620ded..c78c016ea6 100644
--- a/gui/src/components/ProfileSwitcher.tsx
+++ b/gui/src/components/ProfileSwitcher.tsx
@@ -7,12 +7,13 @@ import { UserCircleIcon as UserCircleIconSolid } from "@heroicons/react/24/solid
 import { ProfileDescription } from "core/config/ConfigHandler";
 import { Fragment, useContext, useEffect, useState } from "react";
 import ReactDOM from "react-dom";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import styled from "styled-components";
 import {
   defaultBorderRadius,
-  lightGray,
   vscBackground,
+  vscBorder,
+  vscDescription,
   vscForeground,
   vscInputBackground,
   vscListActiveBackground,
@@ -22,7 +23,6 @@ import { useAuth } from "../context/Auth";
 import { IdeMessengerContext } from "../context/IdeMessenger";
 import { useWebviewListener } from "../hooks/useWebviewListener";
 import { setLastControlServerBetaEnabledStatus } from "../redux/slices/miscSlice";
-import { RootState } from "../redux/store";
 import { getFontSize } from "../util";
 import HeaderButtonWithToolTip from "./gui/HeaderButtonWithToolTip";
 import { useAppSelector } from "../redux/hooks";
@@ -45,7 +45,7 @@ const StyledListboxButton = styled(Listbox.Button)`
   white-space: nowrap;
   overflow: hidden;
 
-  border: 0.5px solid ${lightGray};
+  border: 0.5px solid ${vscBorder};
   border-radius: ${defaultBorderRadius};
 
   display: grid;
@@ -202,7 +202,7 @@ function ProfileSwitcher() {
               <span className="truncate">{selectedProfile()?.title}</span>
               <div className="pointer-events-none flex items-center">
                 <ChevronUpDownIcon
-                  className="h-4 w-4 text-gray-400"
+                  className="text-description h-4 w-4"
                   aria-hidden="true"
                 />
               </div>
@@ -228,7 +228,7 @@ function ProfileSwitcher() {
                     <div
                       className="px-2 py-1"
                       style={{
-                        color: lightGray,
+                        color: vscDescription,
                         fontSize: getFontSize() - 2,
                       }}
                     >
diff --git a/gui/src/components/StepContainer/AcceptRejectAllButtons.tsx b/gui/src/components/StepContainer/AcceptRejectAllButtons.tsx
index 532593c18e..fc70cab06d 100644
--- a/gui/src/components/StepContainer/AcceptRejectAllButtons.tsx
+++ b/gui/src/components/StepContainer/AcceptRejectAllButtons.tsx
@@ -34,12 +34,12 @@ export default function AcceptRejectAllButtons({
   }
 
   return (
-    <div className="flex justify-center gap-2 border-b border-gray-200/25 p-1 px-3">
+    <div className="border-border/25 flex justify-center gap-2 border-b p-1 px-3">
       <button
-        className="flex cursor-pointer items-center border-none bg-transparent px-2 py-1 text-xs text-gray-300 opacity-80 hover:opacity-100 hover:brightness-125"
+        className="text-description flex cursor-pointer items-center border-none bg-transparent px-2 py-1 text-xs opacity-80 hover:opacity-100 hover:brightness-125"
         onClick={() => handleAcceptOrReject("rejectDiff")}
       >
-        <XMarkIcon className="mr-1 h-4 w-4 text-red-600" />
+        <XMarkIcon className="text-error mr-1 h-4 w-4" />
         {isSingleRangeEdit ? (
           <span>Reject ({getMetaKeyLabel()}⇧⌫)</span>
         ) : (
@@ -51,10 +51,10 @@ export default function AcceptRejectAllButtons({
         )}
       </button>
       <button
-        className="flex cursor-pointer items-center border-none bg-transparent px-2 py-1 text-xs text-gray-300 opacity-80 hover:opacity-100 hover:brightness-125"
+        className="text-description flex cursor-pointer items-center border-none bg-transparent px-2 py-1 text-xs opacity-80 hover:opacity-100 hover:brightness-125"
         onClick={() => handleAcceptOrReject("acceptDiff")}
       >
-        <CheckIcon className="mr-1 h-4 w-4 text-green-600" />
+        <CheckIcon className="text-success mr-1 h-4 w-4" />
         {isSingleRangeEdit ? (
           <span>Accept ({getMetaKeyLabel()}⇧⏎)</span>
         ) : (
diff --git a/gui/src/components/StepContainer/EditActions.tsx b/gui/src/components/StepContainer/EditActions.tsx
index bd1f1f5d9f..09f17a5f62 100644
--- a/gui/src/components/StepContainer/EditActions.tsx
+++ b/gui/src/components/StepContainer/EditActions.tsx
@@ -40,7 +40,7 @@ export default function EditActions({ index, item }: EditActionsProps) {
 
   return (
     <div
-      className={`mx-2 mb-2 mt-2 flex h-7 items-center justify-between pb-0 text-xs text-gray-400`}
+      className={`text-description mx-2 mb-2 mt-2 flex h-7 items-center justify-between pb-0 text-xs`}
     >
       <div className="flex-1" />
 
@@ -76,8 +76,8 @@ export default function EditActions({ index, item }: EditActionsProps) {
         <CopyIconButton
           tabIndex={-1}
           text={renderChatMessage(item.message)}
-          clipboardIconClassName="h-3.5 w-3.5 text-gray-500"
-          checkIconClassName="h-3.5 w-3.5 text-green-400"
+          clipboardIconClassName="h-3.5 w-3.5 text-description"
+          checkIconClassName="h-3.5 w-3.5 text-success"
         />
 
         <FeedbackButtons item={item} />
diff --git a/gui/src/components/StepContainer/FeedbackButtons.tsx b/gui/src/components/StepContainer/FeedbackButtons.tsx
index e621fda339..285baa569b 100644
--- a/gui/src/components/StepContainer/FeedbackButtons.tsx
+++ b/gui/src/components/StepContainer/FeedbackButtons.tsx
@@ -37,7 +37,7 @@ export default function FeedbackButtons({ item }: FeedbackButtonsProps) {
         onClick={() => sendFeedback(true)}
       >
         <HandThumbUpIcon
-          className={`mx-0.5 h-3.5 w-3.5 ${feedback === true ? "text-green-400" : "text-gray-500"}`}
+          className={`mx-0.5 h-3.5 w-3.5 ${feedback === true ? "text-success" : "text-description"}`}
         />
       </HeaderButtonWithToolTip>
       <HeaderButtonWithToolTip
@@ -46,7 +46,7 @@ export default function FeedbackButtons({ item }: FeedbackButtonsProps) {
         onClick={() => sendFeedback(false)}
       >
         <HandThumbDownIcon
-          className={`h-3.5 w-3.5 ${feedback === false ? "text-red-400" : "text-gray-500"}`}
+          className={`h-3.5 w-3.5 ${feedback === false ? "text-red-400" : "text-description"}`}
         />
       </HeaderButtonWithToolTip>
     </>
diff --git a/gui/src/components/StepContainer/ResponseActions.tsx b/gui/src/components/StepContainer/ResponseActions.tsx
index bda0d4a6cd..00a92be1cd 100644
--- a/gui/src/components/StepContainer/ResponseActions.tsx
+++ b/gui/src/components/StepContainer/ResponseActions.tsx
@@ -32,7 +32,7 @@ export default function ResponseActions({
   }
 
   return (
-    <div className="mx-2 flex cursor-default items-center justify-end space-x-1 bg-transparent pb-0 text-xs text-gray-400">
+    <div className="text-description mx-2 flex cursor-default items-center justify-end space-x-1 bg-transparent pb-0 text-xs">
       {shouldHideActions || (
         <>
           {isTruncated && (
@@ -41,7 +41,7 @@ export default function ResponseActions({
               text="Continue generation"
               onClick={onContinueGeneration}
             >
-              <BarsArrowDownIcon className="h-3.5 w-3.5 text-gray-500" />
+              <BarsArrowDownIcon className="text-description h-3.5 w-3.5" />
             </HeaderButtonWithToolTip>
           )}
 
@@ -51,14 +51,14 @@ export default function ResponseActions({
             tabIndex={-1}
             onClick={onDelete}
           >
-            <TrashIcon className="h-3.5 w-3.5 text-gray-500" />
+            <TrashIcon className="text-description h-3.5 w-3.5" />
           </HeaderButtonWithToolTip>
 
           <CopyIconButton
             tabIndex={-1}
             text={renderChatMessage(item.message)}
-            clipboardIconClassName="h-3.5 w-3.5 text-gray-500"
-            checkIconClassName="h-3.5 w-3.5 text-green-400"
+            clipboardIconClassName="h-3.5 w-3.5 text-description"
+            checkIconClassName="h-3.5 w-3.5 text-success"
           />
 
           <FeedbackButtons item={item} />
diff --git a/gui/src/components/StepContainer/ThinkingIndicator.tsx b/gui/src/components/StepContainer/ThinkingIndicator.tsx
index 8757cae838..792f536e7d 100644
--- a/gui/src/components/StepContainer/ThinkingIndicator.tsx
+++ b/gui/src/components/StepContainer/ThinkingIndicator.tsx
@@ -37,7 +37,7 @@ const ThinkingIndicator = ({ historyItem }: ThinkingIndicatorProps) => {
 
   return (
     <div className="px-2 py-2">
-      <span className="text-stone-500">{`Thinking.${".".repeat(animation)}`}</span>
+      <span className="text-description">{`Thinking.${".".repeat(animation)}`}</span>
     </div>
   );
 };
diff --git a/gui/src/components/StepContainer/UndoAndRedoButtons.tsx b/gui/src/components/StepContainer/UndoAndRedoButtons.tsx
index a57b29bd2a..f8f7caffb1 100644
--- a/gui/src/components/StepContainer/UndoAndRedoButtons.tsx
+++ b/gui/src/components/StepContainer/UndoAndRedoButtons.tsx
@@ -38,9 +38,9 @@ export default function UndoAndRedoButtons() {
   }
 
   return (
-    <div className="flex justify-center gap-2 border-b border-gray-200/25 p-1 px-3">
+    <div className="border-border/25 flex justify-center gap-2 border-b p-1 px-3">
       <button
-        className="flex cursor-pointer items-center border-none bg-transparent px-2 py-1 text-xs text-gray-300 opacity-80 hover:opacity-100 hover:brightness-125"
+        className="text-description flex cursor-pointer items-center border-none bg-transparent px-2 py-1 text-xs opacity-80 hover:opacity-100 hover:brightness-125"
         onClick={() => handleUndoOrRedo("undo")}
       >
         <ArrowUturnLeftIcon className="mr-2 h-3.5 w-3.5" />
@@ -49,7 +49,7 @@ export default function UndoAndRedoButtons() {
 
       {shouldRenderRedo && (
         <button
-          className="flex cursor-pointer items-center border-none bg-transparent px-2 py-1 text-xs text-gray-300 opacity-80 hover:opacity-100 hover:brightness-125"
+          className="text-description flex cursor-pointer items-center border-none bg-transparent px-2 py-1 text-xs opacity-80 hover:opacity-100 hover:brightness-125"
           onClick={() => handleUndoOrRedo("redo")}
         >
           <ArrowUturnRightIcon className="mr-2 h-3.5 w-3.5" />
diff --git a/gui/src/components/dialogs/AddDocsDialog.tsx b/gui/src/components/dialogs/AddDocsDialog.tsx
index 0bcd40fd94..32634999c7 100644
--- a/gui/src/components/dialogs/AddDocsDialog.tsx
+++ b/gui/src/components/dialogs/AddDocsDialog.tsx
@@ -161,13 +161,13 @@ function AddDocsDialog() {
       <div className="">
         <h1 className="mb-0 hidden sm:block">Add documentation</h1>
         <h1 className="sm:hidden">Add docs</h1>
-        <p className="m-0 mt-2 p-0 text-stone-500">
+        <p className="text-description m-0 mt-2 p-0">
           For the @docs context provider
         </p>
         {!!sortedDocsSuggestions.length && (
           <p className="m-0 mb-1 mt-4 p-0 font-semibold">Suggestions</p>
         )}
-        <div className="border-vsc-foreground-muted max-h-[145px] overflow-y-scroll rounded-sm py-1 pr-2">
+        <div className="border-description max-h-[145px] overflow-y-scroll rounded-sm py-1 pr-2">
           {sortedDocsSuggestions.map((docsResult) => {
             const { error, details } = docsResult;
             const { language, name, version } = docsResult.packageInfo;
@@ -175,7 +175,7 @@ function AddDocsDialog() {
             return (
               <div
                 key={id}
-                className="grid cursor-pointer grid-cols-[auto_minmax(0,1fr)_minmax(0,1fr)_auto] items-center px-1 py-1 hover:bg-gray-200/10"
+                className="hover:bg-hover/20 grid cursor-pointer grid-cols-[auto_minmax(0,1fr)_minmax(0,1fr)_auto] items-center px-1 py-1"
                 onClick={() => {
                   handleSelectSuggestion(docsResult);
                 }}
@@ -185,14 +185,14 @@ function AddDocsDialog() {
                     <div>
                       <PencilIcon
                         data-tooltip-id={id + "-edit"}
-                        className="vsc-foreground-muted h-3 w-3"
+                        className="description h-3 w-3"
                       />
                       <ToolTip id={id + "-edit"} place="bottom">
                         This may not be a docs page
                       </ToolTip>
                     </div>
                   ) : (
-                    <PlusIcon className="text-foreground-muted h-3.5 w-3.5" />
+                    <PlusIcon className="text-description h-3.5 w-3.5" />
                   )}
                 </div>
                 <div className="flex items-center gap-0.5">
@@ -207,7 +207,7 @@ function AddDocsDialog() {
                 </div>
                 <div>
                   {error || !details?.docsLink ? (
-                    <span className="text-vsc-foreground-muted italic">
+                    <span className="text-description italic">
                       No docs link found
                     </span>
                   ) : (
@@ -234,7 +234,7 @@ function AddDocsDialog() {
                 >
                   <InformationCircleIcon
                     data-tooltip-id={id + "-info"}
-                    className="text-vsc-foreground-muted h-3.5 w-3.5 select-none"
+                    className="text-description h-3.5 w-3.5 select-none"
                   />
                   <ToolTip id={id + "-info"} place="bottom">
                     <p className="m-0 p-0">{`Version: ${version}`}</p>
@@ -254,7 +254,7 @@ function AddDocsDialog() {
                   <div>
                     <InformationCircleIcon
                       data-tooltip-id={"add-docs-form-title"}
-                      className="text-vsc-foreground-muted h-3.5 w-3.5 select-none"
+                      className="text-description h-3.5 w-3.5 select-none"
                     />
                     <ToolTip id={"add-docs-form-title"} place="top">
                       The title that will be displayed to users in the `@docs`
@@ -280,7 +280,7 @@ function AddDocsDialog() {
                   <div>
                     <InformationCircleIcon
                       data-tooltip-id={"add-docs-form-url"}
-                      className="text-vsc-foreground-muted h-3.5 w-3.5 select-none"
+                      className="text-description h-3.5 w-3.5 select-none"
                     />
                     <ToolTip id={"add-docs-form-url"} place="top">
                       The starting location to begin crawling the documentation
@@ -319,7 +319,7 @@ function AddDocsDialog() {
       <div className="flex flex-row items-end justify-between pb-3">
         <div>
           {docsIndexingStatuses.length ? (
-            <p className="mt-2 flex flex-row items-center gap-1 p-0 px-1 text-xs text-stone-500">
+            <p className="text-description mt-2 flex flex-row items-center gap-1 p-0 px-1 text-xs">
               <CheckIcon className="h-3 w-3" />
               It is safe to close this form while indexing
             </p>
diff --git a/gui/src/components/dialogs/ConfirmationDialog.tsx b/gui/src/components/dialogs/ConfirmationDialog.tsx
index 08950d363a..d6da2dd646 100644
--- a/gui/src/components/dialogs/ConfirmationDialog.tsx
+++ b/gui/src/components/dialogs/ConfirmationDialog.tsx
@@ -17,7 +17,7 @@ function ConfirmationDialog(props: ConfirmationDialogProps) {
 
   return (
     <div className="p-4 pt-0">
-      <h1 className="text-2x mb-1 text-center">
+      <h1 className="mb-1 text-center text-xl">
         {props.title ?? "Confirmation"}
       </h1>
       <p className="text-center text-base" style={{ whiteSpace: "pre-wrap" }}>
@@ -27,7 +27,7 @@ function ConfirmationDialog(props: ConfirmationDialogProps) {
       <div className="w/1/2 flex justify-end gap-2">
         {!!props.hideCancelButton || (
           <SecondaryButton
-            className="text-lightgray"
+            className="text-description"
             onClick={() => {
               dispatch(setShowDialog(false));
               dispatch(setDialogMessage(undefined));
diff --git a/gui/src/components/dialogs/index.tsx b/gui/src/components/dialogs/index.tsx
index 9e515d6cb0..ed86677b90 100644
--- a/gui/src/components/dialogs/index.tsx
+++ b/gui/src/components/dialogs/index.tsx
@@ -5,13 +5,12 @@ import {
   CloseButton,
   VSC_BACKGROUND_VAR,
   defaultBorderRadius,
-  lightGray,
   parseColorForHex,
   vscBackground,
+  vscBorder,
   vscForeground,
 } from "..";
 import { useDispatch } from "react-redux";
-import { setShowDialog } from "../../redux/slices/uiSlice";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 
 interface TextDialogProps {
@@ -42,7 +41,7 @@ const Dialog = styled.div`
   border-radius: ${defaultBorderRadius};
   display: flex;
   flex-direction: column;
-  border: 1px solid ${lightGray};
+  border: 1px solid ${vscBorder};
   margin: auto;
   word-wrap: break-word;
   // overflow: hidden;
diff --git a/gui/src/components/find/FindWidget.tsx b/gui/src/components/find/FindWidget.tsx
index 9bf965d0fd..ee2f9165a1 100644
--- a/gui/src/components/find/FindWidget.tsx
+++ b/gui/src/components/find/FindWidget.tsx
@@ -43,7 +43,7 @@ const HighlightOverlay = (props: HighlightOverlayProps) => {
   const { isCurrent, top, left, width, height } = props;
   return (
     <div
-      className={isCurrent ? "bg-vsc-find-match-selected" : "bg-blue-200/30"} // bg-vsc-find-match can"t get to work
+      className={isCurrent ? "bg-vsc-find-match-selected" : "bg-hover/30"} // bg-vsc-find-match can"t get to work
       key={`highlight-${top}-${left}`}
       style={{
         position: "absolute",
diff --git a/gui/src/components/gui/Alert.tsx b/gui/src/components/gui/Alert.tsx
index cc1e5c9d10..ccc6ba4f82 100644
--- a/gui/src/components/gui/Alert.tsx
+++ b/gui/src/components/gui/Alert.tsx
@@ -39,7 +39,7 @@ function Alert({ children, type = "info" }: AlertProps) {
   const { Icon } = ALERT_CONFIGS[type];
 
   return (
-    <div className="rounded-lg border-l-4 bg-[color:var(--vscode-editor-foreground)] p-4 opacity-70 shadow-none">
+    <div className="bg-vsc-foreground rounded-lg border-l-4 p-4 opacity-70 shadow-none">
       <div className="flex items-start">
         <Icon
           className="h-6 min-h-5 w-6 min-w-5"
diff --git a/gui/src/components/gui/CopyIconButton.tsx b/gui/src/components/gui/CopyIconButton.tsx
index 5600420269..0b755a3a3f 100644
--- a/gui/src/components/gui/CopyIconButton.tsx
+++ b/gui/src/components/gui/CopyIconButton.tsx
@@ -15,8 +15,8 @@ interface CopyIconButtonProps {
 export function CopyIconButton({
   text,
   tabIndex,
-  checkIconClassName = "h-4 w-4 text-green-400",
-  clipboardIconClassName = "h-4 w-4 text-gray-400",
+  checkIconClassName = "h-4 w-4 text-success",
+  clipboardIconClassName = "h-4 w-4 text-description",
 }: CopyIconButtonProps) {
   const { copyText, copied } = useCopy(text);
 
diff --git a/gui/src/components/gui/Spinner.tsx b/gui/src/components/gui/Spinner.tsx
index e79f5c1523..bc28c52e52 100644
--- a/gui/src/components/gui/Spinner.tsx
+++ b/gui/src/components/gui/Spinner.tsx
@@ -4,7 +4,7 @@
 export default function Spinner() {
   return (
     <svg
-      className="animate-spin-slow h-3.5 w-3.5 text-gray-400"
+      className="animate-spin-slow text-description h-3.5 w-3.5"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
diff --git a/gui/src/components/gui/TimelineItem.tsx b/gui/src/components/gui/TimelineItem.tsx
index c3edc4c766..3577ebdd77 100644
--- a/gui/src/components/gui/TimelineItem.tsx
+++ b/gui/src/components/gui/TimelineItem.tsx
@@ -1,7 +1,7 @@
 import { ChatBubbleOvalLeftIcon } from "@heroicons/react/24/outline";
 import { ChatHistoryItem } from "core";
 import styled from "styled-components";
-import { lightGray, vscBackground } from "..";
+import { vscBackground, vscDescription } from "..";
 import { getFontSize } from "../../util";
 
 const CollapseButton = styled.div`
@@ -48,7 +48,7 @@ function TimelineItem(props: TimelineItemProps) {
           <ChatBubbleOvalLeftIcon width="16px" height="16px" />
         )}
       </CollapseButton>
-      <span style={{ color: lightGray }}>
+      <span style={{ color: vscDescription }}>
         {props.item.message.role} Message
         {/* {props.step.error ? props.step.error.title : props.step.name} */}
       </span>
diff --git a/gui/src/components/index.ts b/gui/src/components/index.ts
index 95e1784805..101ed212c1 100644
--- a/gui/src/components/index.ts
+++ b/gui/src/components/index.ts
@@ -26,6 +26,10 @@ export const VSC_DIFF_REMOVED_LINE_BACKGROUND_VAR =
   "--vscode-diffEditor-removedLineBackground";
 export const VSC_DIFF_INSERTED_LINE_BACKGROUND_VAR =
   "--vscode-diffEditor-insertedLineBackground";
+export const VSC_SUCCESS_VAR = "--vscode-testing-iconPassed";
+export const VSC_WARNING_VAR = "--vscode-list-warningForeground";
+export const VSC_ERROR_VAR = "--vscode-errorForeground"; // "--vscode-list-errorForeground";
+export const VSC_LIST_HOVER_VAR = "--vscode-list-hoverBackground";
 
 export const VSC_THEME_COLOR_VARS = [
   VSC_INPUT_BACKGROUND_VAR,
@@ -48,11 +52,14 @@ export const VSC_THEME_COLOR_VARS = [
   VSC_BADGE_FOREGROUND_VAR,
   VSC_DIFF_REMOVED_LINE_BACKGROUND_VAR,
   VSC_DIFF_INSERTED_LINE_BACKGROUND_VAR,
+  VSC_SUCCESS_VAR,
+  VSC_ERROR_VAR,
+  VSC_WARNING_VAR,
+  VSC_LIST_HOVER_VAR,
 ];
 
 export const defaultBorderRadius = "5px";
-export const lightGray = "#999998";
-export const greenButtonColor = "#189e72";
+const lightGray = "#999998";
 
 export const vscInputBackground = `var(${VSC_INPUT_BACKGROUND_VAR}, rgb(45 45 45))`;
 export const vscQuickInputBackground = `var(${VSC_QUICK_INPUT_BACKGROUND_VAR}, ${VSC_INPUT_BACKGROUND_VAR}, rgb(45 45 45))`;
@@ -67,6 +74,12 @@ export const vscListActiveForeground = `var(${VSC_LIST_ACTIVE_FOREGROUND_VAR}, $
 export const vscInputBorder = `var(${VSC_INPUT_BORDER_VAR}, ${lightGray})`;
 export const vscInputBorderFocus = `var(${VSC_INPUT_BORDER_FOCUS_VAR}, ${lightGray})`;
 export const vscBadgeBackground = `var(${VSC_BADGE_BACKGROUND_VAR}, #1bbe84)`;
+export const vscSuccess = `var(${VSC_SUCCESS_VAR}, "#189e72")`;
+export const vscError = `var(${VSC_ERROR_VAR}, "#d91434")`;
+export const vscWarning = `var(${VSC_WARNING_VAR}, #ff9600)`;
+export const vscBorder = `var(${VSC_SIDEBAR_BORDER_VAR}, ${lightGray})`;
+export const vscDescription = `var(${VSC_DESCRIPTION_FOREGROUND}, ${lightGray})`;
+export const vscListHover = `var(${VSC_LIST_HOVER_VAR}, ${lightGray}20)`;
 
 if (typeof document !== "undefined") {
   for (const colorVar of VSC_THEME_COLOR_VARS) {
@@ -197,7 +210,7 @@ export const GhostButton = styled.button`
 export const InputSubtext = styled.span`
   font-size: 0.75rem;
   line-height: 1rem;
-  color: ${lightGray};
+  color: ${vscDescription};
   margin-top: 0.25rem;
 `;
 
@@ -205,7 +218,7 @@ export const ButtonSubtext = styled.span`
   display: block;
   margin-top: 0;
   text-align: center;
-  color: ${lightGray};
+  color: ${vscDescription};
   font-size: 0.75rem;
 `;
 
@@ -235,14 +248,14 @@ export const Input = styled.input`
   box-sizing: border-box;
   margin: 4px 0px;
   border-radius: ${defaultBorderRadius};
-  outline: 1px solid ${lightGray};
+  outline: 1px solid ${vscBorder};
   border: none;
   background-color: ${vscBackground};
   color: ${vscForeground};
 
   &:focus {
     background: ${vscInputBackground};
-    outline: 1px solid ${lightGray};
+    outline: 1px solid ${vscBorder};
   }
 
   &:invalid {
@@ -255,7 +268,7 @@ export const Select = styled.select`
   margin: 8px 0;
   box-sizing: border-box;
   border-radius: ${defaultBorderRadius};
-  outline: 1px solid ${lightGray};
+  outline: 1px solid ${vscBorder};
   border: none;
   background-color: ${vscBackground};
   color: ${vscForeground};
@@ -300,7 +313,7 @@ export const HeaderButton = styled.button<{
 
 export const Divider = styled.div`
   height: 1px;
-  background-color: ${lightGray};
+  background-color: ${vscBorder};
 `;
 
 export const StyledActionButton = styled.div`
@@ -311,18 +324,19 @@ export const StyledActionButton = styled.div`
   transition: background-color 200ms;
   border-radius: ${defaultBorderRadius};
   padding: 2px 12px;
-  background-color: ${lightGray}33;
+  background-color: ${vscBorder};
   background-opacity: 0.1;
 
   &:hover {
-    background-color: ${lightGray}55;
+    background-color: ${vscBorder};
+    background-opacity: 0.55;
   }
 `;
 
 export const CloseButton = styled.button`
   border: none;
   background-color: inherit;
-  color: ${lightGray};
+  color: ${vscDescription};
   position: absolute;
   top: 0.6rem;
   right: 1rem;
diff --git a/gui/src/components/indexing/ChatIndexingPeeks.tsx b/gui/src/components/indexing/ChatIndexingPeeks.tsx
index 1ec1076c01..cfd42d4fd3 100644
--- a/gui/src/components/indexing/ChatIndexingPeeks.tsx
+++ b/gui/src/components/indexing/ChatIndexingPeeks.tsx
@@ -33,36 +33,36 @@ function ChatIndexingPeek({ state }: ChatIndexingPeekProps) {
   if (hiddenPeeks[state.type]) return null;
   return (
     <div
-      className="flex flex-row items-center border-0 border-t border-solid border-t-zinc-700 px-3 py-0.5"
+      className="border-t-border flex flex-row items-center border-0 border-t border-solid px-3 py-0.5"
       onClick={() => {
         navigate("/more");
       }}
     >
       <div className="group flex flex-1 cursor-pointer flex-row items-center gap-2">
         <div className={`flex flex-row items-center gap-2`}>
-          <p className="m-0 p-0 text-xs text-stone-500 group-hover:underline">
+          <p className="text-description m-0 p-0 text-xs group-hover:underline">
             {state.displayName}
           </p>
         </div>
-        <div className="my-2 h-1.5 flex-1 rounded-md border border-solid border-gray-400">
+        <div className="border-border my-2 h-1.5 flex-1 rounded-md border border-solid">
           <div
-            className={`h-full rounded-lg bg-stone-500 transition-all duration-200 ease-in-out`}
+            className={`bg-vsc-editor-background h-full rounded-lg transition-all duration-200 ease-in-out`}
             style={{
               width: `${state.progressPercentage}%`,
             }}
           />
         </div>
-        <div className="xs:flex hidden flex-row items-center gap-1 text-stone-500">
+        <div className="xs:flex text-description hidden flex-row items-center gap-1">
           <span className="text-xs no-underline">
             {state.progressPercentage.toFixed(0)}%
           </span>
           <ArrowPathIcon
-            className={`animate-spin-slow inline-block h-4 w-4 text-stone-500`}
+            className={`animate-spin-slow text-description inline-block h-4 w-4`}
           ></ArrowPathIcon>
         </div>
       </div>
       <EyeSlashIcon
-        className="ml-2 h-4 w-4 cursor-pointer text-stone-500 hover:opacity-80"
+        className="text-description ml-2 h-4 w-4 cursor-pointer hover:opacity-80"
         onClick={(e) => {
           dispatch(
             setIndexingChatPeekHidden({ type: state.type, hidden: true }),
diff --git a/gui/src/components/indexing/DocsIndexingPeeks.tsx b/gui/src/components/indexing/DocsIndexingPeeks.tsx
index f659b48f92..5d395c3e91 100644
--- a/gui/src/components/indexing/DocsIndexingPeeks.tsx
+++ b/gui/src/components/indexing/DocsIndexingPeeks.tsx
@@ -18,30 +18,30 @@ function DocsIndexingPeek({ status }: DocsIndexingPeekProps) {
 
   return (
     <div
-      className="flex cursor-pointer flex-row items-center gap-2 rounded-md px-1 text-stone-500 hover:bg-gray-700/10"
+      className="text-description hover:bg-hover/10 flex cursor-pointer flex-row items-center gap-2 rounded-md px-1"
       onClick={() => {
         navigate("/more");
         dispatch(setShowDialog(false));
         dispatch(setDialogMessage(undefined));
       }}
     >
-      <p className="m-0 p-0 text-stone-500 group-hover:underline">
+      <p className="text-description m-0 p-0 group-hover:underline">
         {status.title}
       </p>
-      <div className="my-2 h-1.5 flex-1 rounded-md border border-solid border-gray-400">
+      <div className="border-border my-2 h-1.5 flex-1 rounded-md border border-solid">
         <div
-          className={`h-full rounded-lg bg-stone-500 transition-all duration-200 ease-in-out`}
+          className={`bg-vsc-editor-background h-full rounded-lg transition-all duration-200 ease-in-out`}
           style={{
             width: `${progressPercentage}%`,
           }}
         />
       </div>
-      <div className="xs:flex hidden flex-row items-center gap-1 text-stone-500">
+      <div className="xs:flex text-description hidden flex-row items-center gap-1">
         <span className="text-xs no-underline">
           {progressPercentage.toFixed(0)}%
         </span>
         {/* <ArrowPathIcon
-          className={`animate-spin-slow inline-block h-4 w-4 text-stone-500`}
+          className={`animate-spin-slow inline-block h-4 w-4 text-description`}
         ></ArrowPathIcon> */}
       </div>
     </div>
@@ -55,7 +55,7 @@ interface DocsIndexingPeeksProps {
 function DocsIndexingPeekList({ statuses }: DocsIndexingPeeksProps) {
   return (
     <div className="border-vsc-input-border mt-2 flex flex-col border-0 border-t border-solid pt-2">
-      <p className="mx-0 my-1.5 p-0 px-1 font-semibold text-stone-500">
+      <p className="text-description mx-0 my-1.5 p-0 px-1 font-semibold">
         Currently Indexing:
       </p>
       <div className="max-h-[100px] overflow-y-auto pr-2">
@@ -64,7 +64,7 @@ function DocsIndexingPeekList({ statuses }: DocsIndexingPeeksProps) {
             return <DocsIndexingPeek key={status.id} status={status} />;
           })
         ) : (
-          <p className="m-0 pl-1 font-semibold text-stone-500">None</p>
+          <p className="text-description m-0 pl-1 font-semibold">None</p>
         )}
       </div>
     </div>
diff --git a/gui/src/components/indexing/DocsIndexingStatus.tsx b/gui/src/components/indexing/DocsIndexingStatus.tsx
index 12627dff56..c3c466f44d 100644
--- a/gui/src/components/indexing/DocsIndexingStatus.tsx
+++ b/gui/src/components/indexing/DocsIndexingStatus.tsx
@@ -109,23 +109,23 @@ function DocsIndexingStatus({ docConfig }: IndexingStatusViewerProps) {
           <p className="lines lines-1 m-0 p-0 text-left">
             {docConfig.title ?? docConfig.startUrl}
           </p>
-          <ArrowTopRightOnSquareIcon className="mb-0.5 h-3 w-3 text-stone-500" />
+          <ArrowTopRightOnSquareIcon className="text-description mb-0.5 h-3 w-3" />
         </div>
         {status?.status === "pending" ? (
-          <div className="text-xs text-stone-500">Pending...</div>
+          <div className="text-description text-xs">Pending...</div>
         ) : (
-          <div className="flex flex-row items-center gap-1 text-stone-500">
+          <div className="text-description flex flex-row items-center gap-1">
             <span className="text-xs">{progressPercentage.toFixed(0)}%</span>
             {Icon ? (
               <Icon
-                className={`inline-block h-4 w-4 text-stone-500 ${
+                className={`text-description inline-block h-4 w-4 ${
                   status?.status === "indexing" ? "animate-spin-slow" : ""
                 }`}
               ></Icon>
             ) : null}
             {status?.status !== "indexing" ? (
               <TrashIcon
-                className="h-4 w-4 cursor-pointer text-stone-500"
+                className="text-description h-4 w-4 cursor-pointer"
                 onClick={onDelete}
               />
             ) : null}
@@ -133,10 +133,12 @@ function DocsIndexingStatus({ docConfig }: IndexingStatusViewerProps) {
         )}
       </div>
 
-      <div className="my-2 h-1.5 w-full rounded-md border border-solid border-gray-400">
+      <div className="border-border my-2 h-1.5 w-full rounded-md border border-solid">
         <div
           className={`h-full rounded-lg transition-all duration-200 ease-in-out ${
-            status?.status === "failed" ? "bg-red-600" : "bg-stone-500"
+            status?.status === "failed"
+              ? "bg-error"
+              : "bg-vsc-editor-background"
           }`}
           style={{
             width: `${progressPercentage}%`,
@@ -146,7 +148,7 @@ function DocsIndexingStatus({ docConfig }: IndexingStatusViewerProps) {
 
       <div className="flex flex-row items-center justify-between gap-4">
         <span
-          className={`cursor-pointer whitespace-nowrap text-xs text-stone-500 underline`}
+          className={`text-description cursor-pointer whitespace-nowrap text-xs underline`}
           onClick={
             {
               complete: reIndex,
@@ -170,7 +172,7 @@ function DocsIndexingStatus({ docConfig }: IndexingStatusViewerProps) {
           }
         </span>
 
-        <span className="lines lines-1 text-right text-xs text-stone-500">
+        <span className="lines lines-1 text-description text-right text-xs">
           {status?.description}
         </span>
       </div>
diff --git a/gui/src/components/indexing/DocsIndexingStatuses.tsx b/gui/src/components/indexing/DocsIndexingStatuses.tsx
index 445c4db932..60fa103dbd 100644
--- a/gui/src/components/indexing/DocsIndexingStatuses.tsx
+++ b/gui/src/components/indexing/DocsIndexingStatuses.tsx
@@ -26,7 +26,7 @@ function DocsIndexingStatuses() {
           </SecondaryButton>
         ) : null}
       </div>
-      <span className="text-xs text-stone-500">
+      <span className="text-description text-xs">
         {configDocs.length
           ? "Manage your documentation sources"
           : "No docs yet"}
diff --git a/gui/src/components/loaders/FreeTrialProgressBar.tsx b/gui/src/components/loaders/FreeTrialProgressBar.tsx
index dd8d2be394..ddc2060012 100644
--- a/gui/src/components/loaders/FreeTrialProgressBar.tsx
+++ b/gui/src/components/loaders/FreeTrialProgressBar.tsx
@@ -37,7 +37,11 @@ function FreeTrialProgressBar({ completed, total }: FreeTrialProgressBarProps) {
           className="flex flex-1 cursor-default select-none items-center justify-center gap-1"
           data-tooltip-id="usage_progress_bar"
         >
-          <ExclamationCircleIcon width="18px" height="18px" color="red" />
+          <ExclamationCircleIcon
+            width="18px"
+            height="18px"
+            className="text-error"
+          />
           Trial limit reached
         </div>
 
@@ -51,17 +55,17 @@ function FreeTrialProgressBar({ completed, total }: FreeTrialProgressBarProps) {
   return (
     <>
       <div
-        className="flex flex-1 cursor-pointer flex-row items-center gap-2 text-[10px] text-gray-400 sm:gap-3"
+        className="text-description flex flex-1 cursor-pointer flex-row items-center gap-2 text-[10px] sm:gap-3"
         data-tooltip-id="usage_progress_bar"
         onClick={onClick}
       >
         <span>
           Free trial <span className="hidden sm:inline">requests</span>
         </span>
-        <div className="flex h-1.5 flex-1 rounded-md border border-solid border-gray-400">
+        <div className="border-border flex h-1.5 flex-1 rounded-md border border-solid">
           <div
             className={`h-full rounded-lg transition-all duration-200 ease-in-out ${
-              completed / total > 0.75 ? "bg-amber-500" : "bg-stone-500"
+              completed / total > 0.75 ? "bg-error" : "bg-vsc-editor-background"
             }`}
             style={{
               width: `${fillPercentage}%`,
diff --git a/gui/src/components/mainInput/ContextItemsPeek.tsx b/gui/src/components/mainInput/ContextItemsPeek.tsx
index 0450d15af1..67067ad25e 100644
--- a/gui/src/components/mainInput/ContextItemsPeek.tsx
+++ b/gui/src/components/mainInput/ContextItemsPeek.tsx
@@ -7,7 +7,7 @@ import { ContextItemWithId } from "core";
 import { ctxItemToRifWithContents } from "core/commands/util";
 import { getUriPathBasename } from "core/util/uri";
 import { useContext, useMemo, useState } from "react";
-import { AnimatedEllipsis, lightGray, vscBackground } from "..";
+import { AnimatedEllipsis, vscBackground } from "..";
 import { IdeMessengerContext } from "../../context/IdeMessenger";
 import { useAppSelector } from "../../redux/hooks";
 import { selectIsGatheringContext } from "../../redux/slices/sessionSlice";
@@ -106,7 +106,7 @@ function ContextItemsPeekItem({ contextItem }: ContextItemsPeekItemProps) {
   return (
     <div
       onClick={openContextItem}
-      className="group mr-2 flex cursor-pointer items-center overflow-hidden text-ellipsis whitespace-nowrap rounded px-1.5 py-1 text-xs hover:bg-white/10"
+      className="hover:bg-hover/20 group mr-2 flex cursor-pointer items-center overflow-hidden text-ellipsis whitespace-nowrap rounded px-1.5 py-1 text-xs"
     >
       <div className="flex w-full items-center">
         {getContextItemIcon()}
@@ -117,7 +117,7 @@ function ContextItemsPeekItem({ contextItem }: ContextItemsPeekItemProps) {
             {contextItem.name}
           </div>
           <div
-            className={`min-w-0 flex-1 overflow-hidden truncate whitespace-nowrap text-xs text-gray-400 ${isUrl ? "hover:underline" : ""}`}
+            className={`text-description min-w-0 flex-1 overflow-hidden truncate whitespace-nowrap text-xs ${isUrl ? "hover:underline" : ""}`}
           >
             {contextItem.uri?.type === "file"
               ? getUriPathBasename(contextItem.description)
@@ -126,7 +126,7 @@ function ContextItemsPeekItem({ contextItem }: ContextItemsPeekItemProps) {
         </div>
 
         {isUrl && (
-          <ArrowTopRightOnSquareIcon className="mx-2 h-4 w-4 flex-shrink-0 text-gray-400 opacity-0 group-hover:opacity-100" />
+          <ArrowTopRightOnSquareIcon className="text-description mx-2 h-4 w-4 flex-shrink-0 opacity-0 group-hover:opacity-100" />
         )}
       </div>
     </div>
@@ -159,22 +159,22 @@ function ContextItemsPeek({
       }}
     >
       <div
-        className="flex cursor-pointer items-center justify-start text-xs text-gray-300"
+        className="text-description flex cursor-pointer items-center justify-start text-xs"
         onClick={() => setOpen((prev) => !prev)}
       >
         <div className="relative mr-1 h-4 w-4">
           <ChevronRightIcon
-            className={`absolute h-4 w-4 transition-all duration-200 ease-in-out text-[${lightGray}] ${
+            className={`text-description absolute h-4 w-4 transition-all duration-200 ease-in-out ${
               open ? "rotate-90 opacity-0" : "rotate-0 opacity-100"
             }`}
           />
           <ChevronDownIcon
-            className={`absolute h-4 w-4 transition-all duration-200 ease-in-out text-[${lightGray}] ${
+            className={`text-description absolute h-4 w-4 transition-all duration-200 ease-in-out ${
               open ? "rotate-0 opacity-100" : "-rotate-90 opacity-0"
             }`}
           />
         </div>
-        <span className="ml-1 text-xs text-gray-400 transition-colors duration-200">
+        <span className="text-description ml-1 text-xs transition-colors duration-200">
           {isGatheringContext ? (
             <>
               Gathering context
diff --git a/gui/src/components/mainInput/InputToolbar.tsx b/gui/src/components/mainInput/InputToolbar.tsx
index 93b437fdc6..c0840fed91 100644
--- a/gui/src/components/mainInput/InputToolbar.tsx
+++ b/gui/src/components/mainInput/InputToolbar.tsx
@@ -5,7 +5,7 @@ import { useRef } from "react";
 import styled from "styled-components";
 import {
   defaultBorderRadius,
-  lightGray,
+  vscBorder,
   vscForeground,
   vscInputBackground,
 } from "..";
@@ -51,7 +51,8 @@ const EnterButton = styled.button`
   padding: 2px 4px;
   display: flex;
   align-items: center;
-  background-color: ${lightGray}33;
+  background-color: ${vscBorder};
+  background-opacity: 0.33;
   border-radius: ${defaultBorderRadius};
   color: ${vscForeground};
   cursor: pointer;
@@ -115,7 +116,7 @@ function InputToolbar(props: InputToolbarProps) {
       >
         <div className="flex items-center justify-start gap-2 whitespace-nowrap">
           <ModelSelect />
-          <div className="xs:flex -mb-1 hidden items-center text-gray-400 transition-colors duration-200">
+          <div className="xs:flex text-description -mb-1 hidden items-center transition-colors duration-200">
             {props.toolbarOptions?.hideImageUpload ||
               (supportsImages && (
                 <>
@@ -162,7 +163,7 @@ function InputToolbar(props: InputToolbarProps) {
           </div>
         </div>
 
-        <div className="flex items-center gap-2 whitespace-nowrap text-gray-400">
+        <div className="text-description flex items-center gap-2 whitespace-nowrap">
           {!props.toolbarOptions?.hideUseCodebase && !isInEditMode && (
             <div
               className={`${shouldRenderToolsButton ? "md:flex" : "sm:flex"} hover:underline" hidden transition-colors duration-200`}
diff --git a/gui/src/components/mainInput/InputToolbar/ToggleToolsButton.tsx b/gui/src/components/mainInput/InputToolbar/ToggleToolsButton.tsx
index 9dae27363c..3b1d9040e3 100644
--- a/gui/src/components/mainInput/InputToolbar/ToggleToolsButton.tsx
+++ b/gui/src/components/mainInput/InputToolbar/ToggleToolsButton.tsx
@@ -6,10 +6,8 @@ import {
 import { WrenchScrewdriverIcon as WrenchScrewdriverIconSolid } from "@heroicons/react/24/solid";
 import { useEffect, useRef, useState } from "react";
 import { useDispatch } from "react-redux";
-import styled from "styled-components";
-import { defaultBorderRadius, lightGray, vscForeground } from "../..";
+import { vscBorder, vscForeground } from "../..";
 import { toggleUseTools } from "../../../redux/slices/uiSlice";
-import { getFontSize } from "../../../util";
 import InfoHover from "../../InfoHover";
 import HoverItem from "./HoverItem";
 import ToolDropdownItem from "./ToolDropdownItem";
@@ -50,11 +48,11 @@ export default function ToolDropdown() {
       <div
         data-tooltip-id="tools-tooltip"
         className={`-ml-1 -mt-1 flex flex-row items-center gap-1.5 rounded-md px-1 py-0.5 text-xs ${
-          useTools || isHovered ? "bg-lightgray/30" : ""
+          useTools || isHovered ? "bg-description/30" : ""
         }`}
       >
         <ToolsIcon
-          className="h-4 w-4 text-gray-400"
+          className="text-description h-4 w-4"
           onMouseEnter={() => setIsHovered(true)}
           onMouseLeave={() => setIsHovered(false)}
         />
@@ -83,7 +81,7 @@ export default function ToolDropdown() {
                         e.stopPropagation();
                         setDropdownOpen(!isDropdownOpen);
                       }}
-                      className="text-lightgray flex cursor-pointer items-center border-none bg-transparent px-0 outline-none"
+                      className="text-description flex cursor-pointer items-center border-none bg-transparent px-0 outline-none"
                     >
                       <EllipsisHorizontalIcon className="h-3 w-3 cursor-pointer hover:brightness-125" />
                     </Listbox.Button>
@@ -98,7 +96,7 @@ export default function ToolDropdown() {
                       afterLeave={() => setDropdownOpen(false)}
                     >
                       <Listbox.Options
-                        className={`bg-vsc-editor-background border-lightgray/50 absolute -left-32 z-50 mb-1 min-w-fit whitespace-nowrap rounded-md border border-solid px-1 py-0 shadow-lg ${showAbove ? "bottom-full" : ""}`}
+                        className={`bg-vsc-editor-background border-border/50 absolute -left-32 z-50 mb-1 min-w-fit whitespace-nowrap rounded-md border border-solid px-1 py-0 shadow-lg ${showAbove ? "bottom-full" : ""}`}
                         static
                       >
                         <div className="sticky">
@@ -106,7 +104,7 @@ export default function ToolDropdown() {
                             className="mb-1 flex items-center gap-2 px-2 py-1 text-xs"
                             style={{
                               color: vscForeground,
-                              borderBottom: `1px solid ${lightGray}`,
+                              borderBottom: `1px solid ${vscBorder}`,
                             }}
                           >
                             Tool policies{" "}
@@ -119,19 +117,19 @@ export default function ToolDropdown() {
                                   style={{ fontSize: "10px" }}
                                 >
                                   <p>
-                                    <span className="text-green-500">
+                                    <span className="text-success">
                                       Automatic:
                                     </span>{" "}
                                     Can be used without asking
                                   </p>
                                   <p>
-                                    <span className="text-yellow-500">
+                                    <span className="text-warning">
                                       Allowed:
                                     </span>{" "}
                                     Will ask before using
                                   </p>
                                   <p>
-                                    <span className="text-red-500">
+                                    <span className="text-error">
                                       Disabled:
                                     </span>{" "}
                                     Cannot be used
diff --git a/gui/src/components/mainInput/InputToolbar/ToolDropdownItem.tsx b/gui/src/components/mainInput/InputToolbar/ToolDropdownItem.tsx
index 4309b7a952..ab21b078c9 100644
--- a/gui/src/components/mainInput/InputToolbar/ToolDropdownItem.tsx
+++ b/gui/src/components/mainInput/InputToolbar/ToolDropdownItem.tsx
@@ -43,13 +43,13 @@ function ToolDropdownItem(props: ToolDropdownItemProps) {
       </span>
       <div className="flex cursor-pointer gap-2 pr-4">
         {(settings === "allowedWithPermission" || settings === undefined) && (
-          <span className="text-yellow-500">Allowed</span>
+          <span className="text-warning">Allowed</span>
         )}
         {settings === "allowedWithoutPermission" && (
-          <span className="text-green-500">Automatic</span>
+          <span className="text-success">Automatic</span>
         )}
         {settings === "disabled" && (
-          <span className="text-red-500">Disabled</span>
+          <span className="text-error">Disabled</span>
         )}
       </div>
     </div>
diff --git a/gui/src/components/mainInput/MentionList.tsx b/gui/src/components/mainInput/MentionList.tsx
index f0f328a8d3..fd19022046 100644
--- a/gui/src/components/mainInput/MentionList.tsx
+++ b/gui/src/components/mainInput/MentionList.tsx
@@ -30,7 +30,8 @@ import { useDispatch } from "react-redux";
 import styled from "styled-components";
 import {
   defaultBorderRadius,
-  lightGray,
+  vscBorder,
+  vscDescription,
   vscForeground,
   vscListActiveBackground,
   vscListActiveForeground,
@@ -146,7 +147,7 @@ const ItemDiv = styled.div`
 
 const QueryInput = styled.textarea`
   background-color: #fff1;
-  border: 1px solid ${lightGray};
+  border: 1px solid ${vscBorder};
   border-radius: ${defaultBorderRadius};
 
   padding: 0.2rem 0.4rem;
@@ -410,7 +411,7 @@ const MentionList = forwardRef((props: MentionListProps, ref) => {
                   </div>
                   <span
                     style={{
-                      color: lightGray,
+                      color: vscDescription,
                       float: "right",
                       textAlign: "right",
                       opacity: index !== selectedIndex ? 0 : 1,
diff --git a/gui/src/components/mainInput/NewSessionButton.tsx b/gui/src/components/mainInput/NewSessionButton.tsx
index 04193450ca..2bc9bcdf1c 100644
--- a/gui/src/components/mainInput/NewSessionButton.tsx
+++ b/gui/src/components/mainInput/NewSessionButton.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { defaultBorderRadius, lightGray, vscForeground } from "..";
+import { defaultBorderRadius, vscDescription, vscForeground } from "..";
 import { getFontSize } from "../../util";
 
 export const NewSessionButton = styled.div`
@@ -12,10 +12,11 @@ export const NewSessionButton = styled.div`
 
   border-radius: ${defaultBorderRadius};
   padding: 2px 6px;
-  color: ${lightGray};
+  color: ${vscDescription};
 
   &:hover {
-    background-color: ${lightGray}33;
+    background-color: ${vscDescription};
+    background-opacity: 0.33;
     color: ${vscForeground};
   }
 
diff --git a/gui/src/components/mainInput/TipTapEditor.css b/gui/src/components/mainInput/TipTapEditor.css
index ea5cd30bc0..fe0bdadf25 100644
--- a/gui/src/components/mainInput/TipTapEditor.css
+++ b/gui/src/components/mainInput/TipTapEditor.css
@@ -17,7 +17,7 @@
 }
 
 .tiptap p.is-editor-empty:first-child::before {
-  color: #646464; /* lightGray */
+  color: #646464;
   content: attr(data-placeholder);
   float: left;
   height: 0;
diff --git a/gui/src/components/mainInput/TipTapEditor.tsx b/gui/src/components/mainInput/TipTapEditor.tsx
index 29c6b108a1..f5f6254e5e 100644
--- a/gui/src/components/mainInput/TipTapEditor.tsx
+++ b/gui/src/components/mainInput/TipTapEditor.tsx
@@ -22,8 +22,8 @@ import {
 import styled from "styled-components";
 import {
   defaultBorderRadius,
-  lightGray,
   vscBadgeBackground,
+  vscBorder,
   vscForeground,
   vscInputBackground,
   vscInputBorder,
@@ -94,7 +94,8 @@ const InputBoxDiv = styled.div<{ border?: string }>`
   }
 
   &::placeholder {
-    color: ${lightGray}cc;
+    color: ${vscBorder};
+    opacity: 0.66;
   }
 
   display: flex;
diff --git a/gui/src/components/mainInput/TutorialCard.tsx b/gui/src/components/mainInput/TutorialCard.tsx
index 4e07ead6d7..8c614a87d0 100644
--- a/gui/src/components/mainInput/TutorialCard.tsx
+++ b/gui/src/components/mainInput/TutorialCard.tsx
@@ -7,7 +7,7 @@ import {
   XMarkIcon,
 } from "@heroicons/react/24/outline";
 import styled from "styled-components";
-import { defaultBorderRadius, lightGray, vscBackground } from "..";
+import { defaultBorderRadius, vscBorder, vscBackground } from "..";
 import { getMetaKeyLabel, isJetBrains } from "../../util";
 import { useContext } from "react";
 import { IdeMessengerContext } from "../../context/IdeMessenger";
@@ -17,7 +17,7 @@ interface TutorialCardProps {
 }
 
 const TutorialCardDiv = styled.div`
-  border: 1px solid ${lightGray};
+  border: 1px solid ${vscBorder};
   border-radius: ${defaultBorderRadius};
   background-color: ${vscBackground};
   padding: 1rem 2.5rem 1rem 2rem;
@@ -29,7 +29,7 @@ const TutorialCardDiv = styled.div`
 const CloseButton = styled.button`
   border: none;
   background-color: ${vscBackground};
-  color: ${lightGray};
+  color: ${vscBorder};
   position: absolute;
   top: 0.4rem;
   right: 0.5rem;
@@ -49,7 +49,7 @@ export function TutorialCard({ onClose }: TutorialCardProps) {
         <XMarkIcon className="h-5 w-5" />
       </CloseButton>
 
-      <ul className="space-y-4 pl-0" style={{ color: lightGray }}>
+      <ul className="space-y-4 pl-0" style={{ color: vscBorder }}>
         {!isJetBrains() && (
           <li className="flex items-start">
             <ArrowRightStartOnRectangleIcon className="h-4 w-4 pr-3 align-middle" />
@@ -57,10 +57,7 @@ export function TutorialCard({ onClose }: TutorialCardProps) {
               <span
                 className="cursor-pointer underline"
                 onClick={() =>
-                  ideMessenger.post(
-                    "vscode/openMoveRightMarkdown",
-                    undefined,
-                  )
+                  ideMessenger.post("vscode/openMoveRightMarkdown", undefined)
                 }
               >
                 Move Chat panel to the right
diff --git a/gui/src/components/markdown/CodeSnippetPreview.tsx b/gui/src/components/markdown/CodeSnippetPreview.tsx
index 62565e5ea6..e0f9b96f8c 100644
--- a/gui/src/components/markdown/CodeSnippetPreview.tsx
+++ b/gui/src/components/markdown/CodeSnippetPreview.tsx
@@ -7,7 +7,7 @@ import { ContextItemWithId } from "core";
 import { dedent, getMarkdownLanguageTagForFile } from "core/util";
 import React, { useContext, useMemo } from "react";
 import styled from "styled-components";
-import { defaultBorderRadius, lightGray, vscEditorBackground } from "..";
+import { defaultBorderRadius, vscBorder, vscEditorBackground } from "..";
 import { IdeMessengerContext } from "../../context/IdeMessenger";
 import { getFontSize } from "../../util";
 import FileIcon from "../FileIcon";
@@ -20,7 +20,7 @@ const PreviewMarkdownDiv = styled.div<{
 }>`
   background-color: ${vscEditorBackground};
   border-radius: ${defaultBorderRadius};
-  border: 0.5px solid ${(props) => props.borderColor || lightGray};
+  border: 0.5px solid ${(props) => props.borderColor || vscBorder};
   margin-top: 4px;
   margin-bottom: 4px;
   overflow: hidden;
@@ -34,7 +34,7 @@ const PreviewMarkdownDiv = styled.div<{
 const PreviewMarkdownHeader = styled.div`
   margin: 0;
   padding: 2px 6px;
-  border-bottom: 0.5px solid ${lightGray};
+  border-bottom: 0.5px solid ${vscBorder};
   word-break: break-all;
   font-size: ${getFontSize() - 3}px;
   display: flex;
diff --git a/gui/src/components/markdown/StepContainerPreActionButtons.tsx b/gui/src/components/markdown/StepContainerPreActionButtons.tsx
index 1afbe2a277..54431b0e3d 100644
--- a/gui/src/components/markdown/StepContainerPreActionButtons.tsx
+++ b/gui/src/components/markdown/StepContainerPreActionButtons.tsx
@@ -133,7 +133,7 @@ export default function StepContainerPreActionButtons({
               style={{ backgroundColor: vscEditorBackground }}
               onClick={onClickRunTerminal}
             >
-              <CommandLineIcon className="h-4 w-4 text-gray-400" />
+              <CommandLineIcon className="text-description h-4 w-4" />
             </HeaderButtonWithToolTip>
           )}
           <HeaderButtonWithToolTip
@@ -141,7 +141,7 @@ export default function StepContainerPreActionButtons({
             style={{ backgroundColor: vscEditorBackground }}
             onClick={onClickApply}
           >
-            <PlayIcon className="h-4 w-4 text-gray-400" />
+            <PlayIcon className="text-description h-4 w-4" />
           </HeaderButtonWithToolTip>
           <HeaderButtonWithToolTip
             text="Insert at cursor"
@@ -150,7 +150,7 @@ export default function StepContainerPreActionButtons({
               ideMessenger.post("insertAtCursor", { text: codeBlockContent })
             }
           >
-            <ArrowLeftEndOnRectangleIcon className="h-4 w-4 text-gray-400" />
+            <ArrowLeftEndOnRectangleIcon className="text-description h-4 w-4" />
           </HeaderButtonWithToolTip>
           <CopyIconButton text={codeBlockContent} />
         </InnerHoverDiv>
diff --git a/gui/src/components/markdown/StepContainerPreToolbar/ApplyActions.tsx b/gui/src/components/markdown/StepContainerPreToolbar/ApplyActions.tsx
index d71d258c55..0acc55b7ab 100644
--- a/gui/src/components/markdown/StepContainerPreToolbar/ApplyActions.tsx
+++ b/gui/src/components/markdown/StepContainerPreToolbar/ApplyActions.tsx
@@ -1,7 +1,7 @@
 import { CheckIcon, PlayIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { ApplyState } from "core";
 import { useEffect, useState } from "react";
-import { lightGray, vscForeground } from "../..";
+import { vscBorder } from "../..";
 import { getMetaKeyLabel } from "../../../util";
 import Spinner from "../../gui/Spinner";
 import { ToolbarButtonWithTooltip } from "./ToolbarButtonWithTooltip";
@@ -36,11 +36,11 @@ export default function ApplyActions(props: ApplyActionsProps) {
 
   const applyButton = (text: string) => (
     <button
-      className={`flex items-center border-none bg-transparent text-xs text-[${vscForeground}] cursor-pointer outline-none hover:brightness-125`}
+      className={`text-vsc-foreground flex cursor-pointer items-center border-none bg-transparent text-xs outline-none hover:brightness-125`}
       onClick={props.onClickApply}
-      style={{ color: lightGray }}
+      style={{ color: vscBorder }}
     >
-      <div className="flex items-center gap-1 text-gray-400">
+      <div className="text-description flex items-center gap-1">
         <PlayIcon className="h-3 w-3" />
         <span className="xs:inline hidden">{text}</span>
       </div>
@@ -50,8 +50,8 @@ export default function ApplyActions(props: ApplyActionsProps) {
   switch (props.applyState ? props.applyState.status : null) {
     case "streaming":
       return (
-        <div className="flex items-center rounded bg-zinc-700 pl-2 pr-1">
-          <span className="inline-flex items-center gap-2 text-xs text-gray-400">
+        <div className="bg-vsc-editor-background flex items-center rounded pl-2 pr-1">
+          <span className="text-description inline-flex items-center gap-2 text-xs">
             Applying changes
             <Spinner />
           </span>
@@ -60,7 +60,7 @@ export default function ApplyActions(props: ApplyActionsProps) {
     case "done":
       return (
         <div className="xs:pl-2 xs:pr-1 flex items-center rounded bg-zinc-700">
-          <span className="max-xs:hidden xs:mr-1 text-xs text-gray-400">
+          <span className="max-xs:hidden xs:mr-1 text-description text-xs">
             {`${props.applyState?.numDiffs === 1 ? "1 diff" : `${props.applyState?.numDiffs} diffs`}`}
             <span className="max-md:hidden">{` remaining`}</span>
           </span>
@@ -69,14 +69,14 @@ export default function ApplyActions(props: ApplyActionsProps) {
             onClick={onClickReject}
             tooltipContent={`Reject all (${getMetaKeyLabel()}⇧⌫)`}
           >
-            <XMarkIcon className="h-4 w-4 text-red-600 hover:brightness-125" />
+            <XMarkIcon className="text-error h-4 w-4 hover:brightness-125" />
           </ToolbarButtonWithTooltip>
 
           <ToolbarButtonWithTooltip
             onClick={props.onClickAccept}
             tooltipContent={`Accept all (${getMetaKeyLabel()}⇧⏎)`}
           >
-            <CheckIcon className="h-4 w-4 text-green-600 hover:brightness-125" />
+            <CheckIcon className="text-success h-4 w-4 hover:brightness-125" />
           </ToolbarButtonWithTooltip>
         </div>
       );
@@ -84,7 +84,7 @@ export default function ApplyActions(props: ApplyActionsProps) {
       if (!hasRejected && props.applyState?.numDiffs === 0) {
         if (showApplied) {
           return (
-            <span className="flex items-center rounded bg-zinc-700 text-slate-400 max-sm:px-0.5 sm:pl-2">
+            <span className="text-description bg-vsc-editor-background flex items-center rounded max-sm:px-0.5 sm:pl-2">
               <span className="max-sm:hidden">Applied</span>
               <CheckIcon className="h-4 w-4 hover:brightness-125 sm:px-1" />
             </span>
diff --git a/gui/src/components/markdown/StepContainerPreToolbar/CopyButton.tsx b/gui/src/components/markdown/StepContainerPreToolbar/CopyButton.tsx
index 1956153807..c61fb45335 100644
--- a/gui/src/components/markdown/StepContainerPreToolbar/CopyButton.tsx
+++ b/gui/src/components/markdown/StepContainerPreToolbar/CopyButton.tsx
@@ -1,6 +1,5 @@
 import { CheckIcon, ClipboardIcon } from "@heroicons/react/24/outline";
 import useCopy from "../../../hooks/useCopy";
-import { lightGray, vscForeground } from "../..";
 
 interface CopyButtonProps {
   text: string;
@@ -11,22 +10,19 @@ export default function CopyButton({ text }: CopyButtonProps) {
 
   return (
     <div
-      className={`flex items-center border-none bg-transparent text-xs text-gray-400 text-[${vscForeground}] cursor-pointer outline-none hover:brightness-125`}
+      className={`text-vsc-foreground text-description flex cursor-pointer items-center border-none bg-transparent text-xs outline-none hover:brightness-125`}
       onClick={copyText}
     >
-      <div
-        className="max-2xs:hidden flex items-center gap-1 transition-colors duration-200 hover:brightness-125"
-        style={{ color: lightGray }}
-      >
+      <div className="text-description max-2xs:hidden flex items-center gap-1 transition-colors duration-200 hover:brightness-125">
         {copied ? (
           <>
-            <CheckIcon className="h-3 w-3 text-green-500 hover:brightness-125" />
+            <CheckIcon className="text-success h-3 w-3 hover:brightness-125" />
             <span className="max-sm:hidden">Copied</span>
           </>
         ) : (
           <>
             <ClipboardIcon className="h-3 w-3 hover:brightness-125" />
-            <span className="text-gray-400 max-sm:hidden">Copy</span>
+            <span className="text-description max-sm:hidden">Copy</span>
           </>
         )}
       </div>
diff --git a/gui/src/components/markdown/StepContainerPreToolbar/GeneratingCodeLoader.tsx b/gui/src/components/markdown/StepContainerPreToolbar/GeneratingCodeLoader.tsx
index c430c8d62e..19f2c33b94 100644
--- a/gui/src/components/markdown/StepContainerPreToolbar/GeneratingCodeLoader.tsx
+++ b/gui/src/components/markdown/StepContainerPreToolbar/GeneratingCodeLoader.tsx
@@ -16,7 +16,7 @@ export default function GeneratingCodeLoader({
       : `${numLinesCodeBlock} lines generated`;
 
   return (
-    <span className="inline-flex items-center gap-2 text-gray-400">
+    <span className="text-description inline-flex items-center gap-2">
       {showLineCount ? linesGeneratedText : "Generating"}
       <Spinner />
     </span>
diff --git a/gui/src/components/markdown/StepContainerPreToolbar/RunInTerminalButton.tsx b/gui/src/components/markdown/StepContainerPreToolbar/RunInTerminalButton.tsx
index 35bc543497..4e2e106c80 100644
--- a/gui/src/components/markdown/StepContainerPreToolbar/RunInTerminalButton.tsx
+++ b/gui/src/components/markdown/StepContainerPreToolbar/RunInTerminalButton.tsx
@@ -1,6 +1,6 @@
 import { CommandLineIcon } from "@heroicons/react/24/outline";
 import { useContext } from "react";
-import { lightGray, vscForeground } from "../..";
+import { vscBorder } from "../..";
 import { IdeMessengerContext } from "../../../context/IdeMessenger";
 
 interface RunInTerminalButtonProps {
@@ -18,16 +18,16 @@ export default function RunInTerminalButton({
 
   return (
     <div
-      className={`flex items-center border-none bg-transparent text-xs text-gray-400 text-[${vscForeground}] cursor-pointer outline-none hover:brightness-125`}
+      className={`text-vsc-foreground text-description flex cursor-pointer items-center border-none bg-transparent text-xs outline-none hover:brightness-125`}
       onClick={runInTerminal}
     >
       <div
         className="max-2xs:hidden flex items-center gap-1 transition-colors duration-200 hover:brightness-125"
-        style={{ color: lightGray }}
+        style={{ color: vscBorder }}
       >
         <>
           <CommandLineIcon className="h-3 w-3 hover:brightness-125" />
-          <span className="text-gray-400 max-sm:hidden">Run</span>
+          <span className="text-description max-sm:hidden">Run</span>
         </>
       </div>
     </div>
diff --git a/gui/src/components/markdown/StepContainerPreToolbar/StepContainerPreToolbar.tsx b/gui/src/components/markdown/StepContainerPreToolbar/StepContainerPreToolbar.tsx
index d0bd7caa66..3d3ed3e08d 100644
--- a/gui/src/components/markdown/StepContainerPreToolbar/StepContainerPreToolbar.tsx
+++ b/gui/src/components/markdown/StepContainerPreToolbar/StepContainerPreToolbar.tsx
@@ -3,7 +3,7 @@ import { debounce } from "lodash";
 import { useContext, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import { v4 as uuidv4 } from "uuid";
-import { defaultBorderRadius, lightGray, vscEditorBackground } from "../..";
+import { defaultBorderRadius, vscBorder, vscEditorBackground } from "../..";
 import { IdeMessengerContext } from "../../../context/IdeMessenger";
 import { useWebviewListener } from "../../../hooks/useWebviewListener";
 import { getFontSize } from "../../../util";
@@ -39,7 +39,7 @@ const ToolbarDiv = styled.div<{ isExpanded: boolean }>`
   padding: 4px 6px;
   margin: 0;
   border-bottom: ${({ isExpanded }) =>
-    isExpanded ? `0.5px solid ${lightGray}80` : "inherit"};
+    isExpanded ? `0.5px solid ${vscBorder}` : "inherit"};
 `;
 
 export interface StepContainerPreToolbarProps {
@@ -182,7 +182,7 @@ export default function StepContainerPreToolbar(
         <div className="flex min-w-0 max-w-[45%] items-center">
           <ChevronDownIcon
             onClick={onClickExpand}
-            className={`h-3.5 w-3.5 shrink-0 cursor-pointer text-gray-400 hover:brightness-125 ${
+            className={`text-description h-3.5 w-3.5 shrink-0 cursor-pointer hover:brightness-125 ${
               isExpanded ? "rotate-0" : "-rotate-90"
             }`}
           />
diff --git a/gui/src/components/markdown/StepContainerPreToolbar/ToolbarButtonWithTooltip.tsx b/gui/src/components/markdown/StepContainerPreToolbar/ToolbarButtonWithTooltip.tsx
index bafdf8011f..e672a49a10 100644
--- a/gui/src/components/markdown/StepContainerPreToolbar/ToolbarButtonWithTooltip.tsx
+++ b/gui/src/components/markdown/StepContainerPreToolbar/ToolbarButtonWithTooltip.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { Tooltip } from "react-tooltip";
-import { lightGray, vscForeground } from "../..";
+import { vscDescription, vscForeground } from "../..";
 import styled from "styled-components";
 import { getFontSize } from "../../../util";
 
@@ -33,7 +33,7 @@ export function ToolbarButtonWithTooltip({
     <>
       <ToolbarButton
         onClick={onClick}
-        style={{ color: lightGray }}
+        style={{ color: vscDescription }}
         data-tooltip-id={tooltipId}
         className="px-0.5"
       >
diff --git a/gui/src/components/modelSelection/ModelCard.tsx b/gui/src/components/modelSelection/ModelCard.tsx
index 2c34bdc51b..bb1ad7f6a9 100644
--- a/gui/src/components/modelSelection/ModelCard.tsx
+++ b/gui/src/components/modelSelection/ModelCard.tsx
@@ -1,12 +1,7 @@
 import { BookOpenIcon } from "@heroicons/react/24/outline";
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
-import {
-  defaultBorderRadius,
-  greenButtonColor,
-  lightGray,
-  vscFocusBorder,
-} from "..";
+import { defaultBorderRadius, vscBorder, vscFocusBorder, vscSuccess } from "..";
 import { PackageDimension } from "../../pages/AddNewModel/configs/models";
 import { providers } from "../../pages/AddNewModel/configs/providers";
 import HeaderButtonWithToolTip from "../gui/HeaderButtonWithToolTip";
@@ -31,7 +26,7 @@ interface ModelCardProps {
 }
 
 const Div = styled.div<{ color: string; disabled: boolean; hovered: boolean }>`
-  border: 1px solid ${lightGray};
+  border: 1px solid ${vscBorder};
   border-radius: ${defaultBorderRadius};
   position: relative;
   width: 100%;
@@ -60,7 +55,7 @@ const DimensionsDiv = styled.div`
   flex-wrap: wrap;
   row-gap: 12px;
 
-  border-top: 1px solid ${lightGray};
+  border-top: 1px solid ${vscBorder};
 `;
 
 const DimensionOptionDiv = styled.div<{ selected: boolean }>`
@@ -68,15 +63,15 @@ const DimensionOptionDiv = styled.div<{ selected: boolean }>`
   flex-direction: column;
   align-items: center;
   margin-right: 8px;
-  background-color: ${lightGray};
+  background-color: ${vscBorder};
   padding: 4px;
   border-radius: ${defaultBorderRadius};
-  outline: 0.5px solid ${lightGray};
+  outline: 0.5px solid ${vscBorder};
 
   ${(props) =>
     props.selected &&
     `
-    background-color: ${greenButtonColor};
+    background-color: ${vscSuccess};
     color: white;
   `}
 
@@ -106,7 +101,7 @@ function ModelCard(props: ModelCardProps) {
   return (
     <Div
       disabled={props.disabled || false}
-      color={greenButtonColor}
+      color={vscSuccess}
       hovered={hovered}
     >
       <div
@@ -228,7 +223,7 @@ function ModelCard(props: ModelCardProps) {
                           (i === 0 &&
                             typeof selectedProvider === "undefined") ||
                           selectedProvider === option
-                            ? greenButtonColor + "aa"
+                            ? vscSuccess + "aa"
                             : undefined,
                       }}
                       onClick={() => {
diff --git a/gui/src/components/modelSelection/ModelSelect.tsx b/gui/src/components/modelSelection/ModelSelect.tsx
index c5edb5d7b8..e3cb510dfa 100644
--- a/gui/src/components/modelSelection/ModelSelect.tsx
+++ b/gui/src/components/modelSelection/ModelSelect.tsx
@@ -7,12 +7,12 @@ import {
   TrashIcon,
 } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useRef, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import styled from "styled-components";
 import {
   defaultBorderRadius,
   Divider,
-  lightGray,
+  vscBorder,
   vscInputBackground,
 } from "..";
 import { IdeMessengerContext } from "../../context/IdeMessenger";
@@ -54,7 +54,7 @@ const StyledListboxButton = styled(Listbox.Button)`
   cursor: pointer;
   font-size: ${getFontSize() - 2}px;
   background: transparent;
-  color: ${lightGray};
+  color: ${vscBorder};
   &:focus {
     outline: none;
   }
@@ -72,7 +72,7 @@ const StyledListboxOptions = styled(Listbox.Options)<{ $showabove: boolean }>`
   flex-direction: column;
 
   border-radius: ${defaultBorderRadius};
-  border: 0.5px solid ${lightGray};
+  border: 0.5px solid ${vscBorder};
   background-color: ${vscInputBackground};
 
   max-height: ${MAX_HEIGHT_PX}px;
@@ -93,7 +93,8 @@ const StyledListboxOption = styled(Listbox.Option)<{ isDisabled?: boolean }>`
     cursor: pointer;
 
     &:hover {
-      background: ${lightGray}33;
+      background: ${vscBorder};
+      background-opacity: 0.33;
     }
   `}
 
@@ -115,7 +116,8 @@ const IconBase = styled.div<{ $hovered: boolean }>`
 
   &:hover {
     opacity: 1;
-    background-color: ${lightGray}33;
+    background-color: ${vscBorder};
+    background-opacity: 0.3;
   }
 `;
 
@@ -322,7 +324,7 @@ function ModelSelect() {
           style={{ padding: 0 }}
           onClick={calculatePosition}
         >
-          <div className="flex max-w-[33vw] items-center gap-0.5 text-gray-400 transition-colors duration-200">
+          <div className="text-description flex max-w-[33vw] items-center gap-0.5 transition-colors duration-200">
             <span className="truncate">
               {modelSelectTitle(defaultModel) || "Select model"}{" "}
             </span>
@@ -366,7 +368,7 @@ function ModelSelect() {
 
             <Divider className="!my-0" />
 
-            <span className="block px-3 py-3" style={{ color: lightGray }}>
+            <span className="block px-3 py-3" style={{ color: vscBorder }}>
               <code>{getMetaKeyLabel()} + '</code> to toggle
             </span>
           </div>
diff --git a/gui/src/components/modelSelection/ModelSelectionListbox.tsx b/gui/src/components/modelSelection/ModelSelectionListbox.tsx
index d043632b98..c7d8146558 100644
--- a/gui/src/components/modelSelection/ModelSelectionListbox.tsx
+++ b/gui/src/components/modelSelection/ModelSelectionListbox.tsx
@@ -9,7 +9,7 @@ import { Listbox } from "@headlessui/react";
 import styled from "styled-components";
 import {
   defaultBorderRadius,
-  lightGray,
+  vscBorder,
   vscBackground,
   vscButtonBackground,
   vscForeground,
@@ -34,7 +34,7 @@ export const StyledListboxButton = styled(Listbox.Button)`
   padding-bottom: 0.5rem;
 
   border-radius: 0.5em;
-  border: 1px solid ${lightGray};
+  border: 1px solid ${vscBorder};
 
   margin: 0;
   height: 100%;
@@ -131,7 +131,7 @@ function ModelSelectionListbox({
           </span>
           <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
             <ChevronUpDownIcon
-              className="h-5 w-5 text-gray-400"
+              className="text-description h-5 w-5"
               aria-hidden="true"
             />
           </span>
@@ -149,13 +149,13 @@ function ModelSelectionListbox({
                   <StyledListboxOption
                     selected={selectedProvider.title === option.title}
                     key={index}
-                    className="relative cursor-default select-none py-2 pr-4 text-gray-400"
+                    className="text-description relative cursor-default select-none py-2 pr-4"
                     value={option}
                   >
                     {({ selected }) => (
                       <>
                         {option.title === "Autodetect" ? (
-                          <CubeIcon className="mr-2 h-4 w-4 text-gray-400" />
+                          <CubeIcon className="text-description mr-2 h-4 w-4" />
                         ) : (
                           window.vscMediaUrl &&
                           option.icon && (
@@ -180,7 +180,7 @@ function ModelSelectionListbox({
             )}
 
             {topOptions.length > 0 && otherOptions.length > 0 && (
-              <div className="my-1 h-px bg-zinc-500" />
+              <div className="bg-vsc-input-border my-1 h-px" />
             )}
 
             {otherOptions.length > 0 && (
@@ -189,13 +189,13 @@ function ModelSelectionListbox({
                   <StyledListboxOption
                     selected={selectedProvider.title === option.title}
                     key={index}
-                    className="relative cursor-default select-none py-2 pr-4 text-gray-400"
+                    className="text-description relative cursor-default select-none py-2 pr-4"
                     value={option}
                   >
                     {({ selected }) => (
                       <>
                         {option.title === "Autodetect" ? (
-                          <CubeIcon className="mr-2 h-4 w-4 text-gray-400" />
+                          <CubeIcon className="text-description mr-2 h-4 w-4" />
                         ) : (
                           window.vscMediaUrl &&
                           option.icon && (
diff --git a/gui/src/components/modelSelection/ModelSettings.tsx b/gui/src/components/modelSelection/ModelSettings.tsx
index 4198ffba18..3e35ca78a3 100644
--- a/gui/src/components/modelSelection/ModelSettings.tsx
+++ b/gui/src/components/modelSelection/ModelSettings.tsx
@@ -1,11 +1,11 @@
 import { useState } from "react";
 import { useFormContext } from "react-hook-form";
 import styled from "styled-components";
-import { Input, Label, Select, defaultBorderRadius, lightGray } from "..";
+import { Input, Label, Select, defaultBorderRadius, vscBorder } from "..";
 import { getFontSize } from "../../util";
 
 const Div = styled.div<{ dashed: boolean }>`
-  border: 1px ${(props) => (props.dashed ? "dashed" : "solid")} ${lightGray};
+  border: 1px ${(props) => (props.dashed ? "dashed" : "solid")} ${vscBorder};
   border-radius: ${defaultBorderRadius};
   padding: 8px;
   margin-bottom: 16px;
diff --git a/gui/src/components/modelSelection/Toggle.tsx b/gui/src/components/modelSelection/Toggle.tsx
index 02f99e974c..256411a213 100644
--- a/gui/src/components/modelSelection/Toggle.tsx
+++ b/gui/src/components/modelSelection/Toggle.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import {
   defaultBorderRadius,
-  lightGray,
+  vscBorder,
   vscInputBackground,
   vscListActiveBackground,
   vscListActiveForeground,
@@ -15,13 +15,14 @@ const TopDiv = styled.div`
   width: fit-content;
   cursor: pointer;
 
-  border: 1px solid ${lightGray};
+  border: 1px solid ${vscBorder};
 
   background-color: ${vscInputBackground};
   border-radius: ${defaultBorderRadius};
 
   &:hover {
-    background-color: ${lightGray}55;
+    background-color: ${vscBorder};
+    background-opacity: 0.55;
   }
 `;
 
diff --git a/gui/src/forms/AddModelForm.tsx b/gui/src/forms/AddModelForm.tsx
index 8753b4010e..39a8769bce 100644
--- a/gui/src/forms/AddModelForm.tsx
+++ b/gui/src/forms/AddModelForm.tsx
@@ -128,7 +128,7 @@ function AddModelForm({
         <div className="mx-auto max-w-md p-6">
           <h1 className="mb-0 text-center text-2xl">Add Chat model</h1>
           {!hideFreeTrialLimitMessage && hasPassedFTL() && (
-            <p className="text-sm text-gray-400">
+            <p className="text-description text-sm">
               You've reached the free trial limit of {FREE_TRIAL_LIMIT_REQUESTS}{" "}
               free inputs. To keep using Continue, you can either use your own
               API key, or use a local LLM. To read more about the options, see
diff --git a/gui/src/index.css b/gui/src/index.css
index ba8454b7b6..bd33e94cce 100644
--- a/gui/src/index.css
+++ b/gui/src/index.css
@@ -3,15 +3,6 @@
 @tailwind utilities;
 
 :root {
-  --secondary-dark: rgb(37, 37, 38);
-  --vsc-background: rgb(30, 30, 30);
-  --button-color: rgb(113, 28, 59);
-  --button-color-hover: rgba(113, 28, 59, 0.667);
-  --def-border-radius: 5px;
-
-  --vscode-editor-background: rgb(30, 30, 30);
-  --vscode-editor-foreground: rgb(197, 200, 198);
-  --vscode-textBlockQuote-background: rgba(255, 255, 255, 1);
 }
 
 html,
diff --git a/gui/src/pages/AddNewModel/AddNewModel.tsx b/gui/src/pages/AddNewModel/AddNewModel.tsx
index 89212e9e39..1fb96a350d 100644
--- a/gui/src/pages/AddNewModel/AddNewModel.tsx
+++ b/gui/src/pages/AddNewModel/AddNewModel.tsx
@@ -6,8 +6,8 @@ import { Link, useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import {
   defaultBorderRadius,
-  lightGray,
   vscBackground,
+  vscBorder,
 } from "../../components";
 import ModelCard from "../../components/modelSelection/ModelCard";
 import Toggle from "../../components/modelSelection/Toggle";
@@ -21,7 +21,7 @@ import { setDefaultModel } from "../../redux/slices/configSlice";
 const IntroDiv = styled.div`
   padding: 8px 12px;
   border-radius: ${defaultBorderRadius};
-  border: 1px solid ${lightGray};
+  border: 1px solid ${vscBorder};
   margin-top: 1rem;
   margin-bottom: 1rem;
 `;
@@ -67,7 +67,7 @@ function AddNewModel() {
       <div
         className="sticky top-0 m-0 flex items-center p-0"
         style={{
-          borderBottom: `0.5px solid ${lightGray}`,
+          borderBottom: `0.5px solid ${vscBorder}`,
           backgroundColor: vscBackground,
           zIndex: 2,
         }}
@@ -159,8 +159,8 @@ function AddNewModel() {
                       style={{
                         height: "0px",
                         width: "100%",
-                        color: lightGray,
-                        border: `1px solid ${lightGray}`,
+                        color: vscBorder,
+                        border: `1px solid ${vscBorder}`,
                         borderRadius: "2px",
                       }}
                     />
diff --git a/gui/src/pages/AddNewModel/ConfigureProvider.tsx b/gui/src/pages/AddNewModel/ConfigureProvider.tsx
index 33a3366d6e..39f2160179 100644
--- a/gui/src/pages/AddNewModel/ConfigureProvider.tsx
+++ b/gui/src/pages/AddNewModel/ConfigureProvider.tsx
@@ -8,7 +8,7 @@ import styled from "styled-components";
 import {
   Input,
   defaultBorderRadius,
-  lightGray,
+  vscBorder,
   vscBackground,
 } from "../../components";
 import StyledMarkdownPreview from "../../components/markdown/StyledMarkdownPreview";
@@ -31,7 +31,7 @@ const GridDiv = styled.div`
 `;
 
 export const CustomModelButton = styled.div<{ disabled: boolean }>`
-  border: 1px solid ${lightGray};
+  border: 1px solid ${vscBorder};
   border-radius: ${defaultBorderRadius};
   padding: 4px 8px;
   display: flex;
@@ -88,7 +88,7 @@ function ConfigureProvider() {
         <div
           className="sticky top-0 m-0 flex items-center p-0"
           style={{
-            borderBottom: `0.5px solid ${lightGray}`,
+            borderBottom: `0.5px solid ${vscBorder}`,
             backgroundColor: vscBackground,
             zIndex: 2,
           }}
@@ -139,7 +139,7 @@ function ConfigureProvider() {
                     <Input
                       type={d.inputType}
                       id={d.key}
-                      className="m-2 rounded-md border-2 border-gray-200 p-2"
+                      className="border-border m-2 rounded-md border-2 p-2"
                       placeholder={d.placeholder ?? d.label}
                       defaultValue={d.defaultValue}
                       min={d.min}
@@ -169,7 +169,7 @@ function ConfigureProvider() {
                     <Input
                       type={d.inputType}
                       id={d.key}
-                      className="m-2 rounded-md border-2 border-gray-200 p-2"
+                      className="border-border m-2 rounded-md border-2 p-2"
                       placeholder={d.placeholder ?? d.label}
                       defaultValue={d.defaultValue}
                       min={d.min}
diff --git a/gui/src/pages/More/IndexingProgress/IndexingProgressBar.tsx b/gui/src/pages/More/IndexingProgress/IndexingProgressBar.tsx
index 5de74fb3f4..a129eb4f8f 100644
--- a/gui/src/pages/More/IndexingProgress/IndexingProgressBar.tsx
+++ b/gui/src/pages/More/IndexingProgress/IndexingProgressBar.tsx
@@ -9,10 +9,10 @@ function IndexingProgressBar({ update }: IndexingProgressBarProps) {
   const progressPercentage = getProgressPercentage(update.progress);
 
   return (
-    <div className="my-2 h-1.5 w-full rounded-md border border-solid border-gray-400">
+    <div className="border-border my-2 h-1.5 w-full rounded-md border border-solid">
       <div
         className={`h-full rounded-lg transition-all duration-200 ease-in-out ${
-          update.status === "failed" ? "bg-red-600" : "bg-stone-500"
+          update.status === "failed" ? "bg-error" : "bg-vsc-editor-background"
         }`}
         style={{
           width: `${progressPercentage}%`,
diff --git a/gui/src/pages/More/IndexingProgress/IndexingProgressIndicator.tsx b/gui/src/pages/More/IndexingProgress/IndexingProgressIndicator.tsx
index 83abeed110..a87b3d4776 100644
--- a/gui/src/pages/More/IndexingProgress/IndexingProgressIndicator.tsx
+++ b/gui/src/pages/More/IndexingProgress/IndexingProgressIndicator.tsx
@@ -27,7 +27,7 @@ function IndexingProgressIndicator({ update }: IndexingProgressIndicatorProps) {
   const showProgress = update.status !== "disabled";
 
   return (
-    <div className="flex items-center justify-between gap-1 text-stone-500">
+    <div className="text-description flex items-center justify-between gap-1">
       {showProgress && (
         <span className="text-xs">{progressPercentage.toFixed(0)}%</span>
       )}
@@ -35,7 +35,7 @@ function IndexingProgressIndicator({ update }: IndexingProgressIndicatorProps) {
       {Icon && (
         <div className="flex items-center">
           <Icon
-            className={`inline-block h-4 w-4 align-top text-stone-500 ${
+            className={`text-description inline-block h-4 w-4 align-top ${
               animateIcon ? "animate-spin-slow" : ""
             }`}
           ></Icon>
diff --git a/gui/src/pages/More/IndexingProgress/IndexingProgressSubtext.tsx b/gui/src/pages/More/IndexingProgress/IndexingProgressSubtext.tsx
index a731480099..ea93e9796a 100644
--- a/gui/src/pages/More/IndexingProgress/IndexingProgressSubtext.tsx
+++ b/gui/src/pages/More/IndexingProgress/IndexingProgressSubtext.tsx
@@ -27,7 +27,7 @@ function IndexingProgressSubtext({
   return (
     <div className="flex justify-between">
       <span
-        className={`cursor-pointer text-xs text-stone-500 underline ${
+        className={`text-description cursor-pointer text-xs underline ${
           showIndexingDesc ? "w-1/3" : "w-full"
         }`}
         onClick={onClick}
@@ -36,7 +36,7 @@ function IndexingProgressSubtext({
       </span>
 
       {showIndexingDesc && (
-        <span className="w-2/3 truncate text-right text-xs text-stone-500">
+        <span className="text-description w-2/3 truncate text-right text-xs">
           {update.desc}
         </span>
       )}
diff --git a/gui/src/pages/More/KeyboardShortcuts.tsx b/gui/src/pages/More/KeyboardShortcuts.tsx
index 2c8159ff27..7acf75d7fc 100644
--- a/gui/src/pages/More/KeyboardShortcuts.tsx
+++ b/gui/src/pages/More/KeyboardShortcuts.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import {
   defaultBorderRadius,
-  lightGray,
+  vscBorder,
   vscForeground,
 } from "../../components";
 import { getPlatform, isJetBrains } from "../../util";
@@ -17,7 +17,7 @@ const GridDiv = styled.div`
 `;
 
 const StyledKeyDiv = styled.div`
-  border: 0.5px solid ${lightGray};
+  border: 0.5px solid ${vscBorder};
   border-radius: ${defaultBorderRadius};
   padding: 2px;
   color: ${vscForeground};
diff --git a/gui/src/pages/More/More.tsx b/gui/src/pages/More/More.tsx
index cc399a3fdc..bbe988cef7 100644
--- a/gui/src/pages/More/More.tsx
+++ b/gui/src/pages/More/More.tsx
@@ -26,11 +26,11 @@ function MorePage() {
     <div className="overflow-y-scroll">
       <PageHeader onClick={() => navigate("/")} title="Chat" />
 
-      <div className="gap-2 divide-x-0 divide-y-2 divide-solid divide-zinc-700 px-4">
+      <div className="divide-border gap-2 divide-x-0 divide-y-2 divide-solid px-4">
         <div className="py-5">
           <div>
             <h3 className="mx-auto mb-1 mt-0 text-xl">@codebase index</h3>
-            <span className="w-3/4 text-xs text-stone-500">
+            <span className="text-description w-3/4 text-xs">
               Local embeddings of your codebase
             </span>
           </div>
@@ -103,6 +103,16 @@ function MorePage() {
           <h3 className="mx-auto mb-1 text-lg">Keyboard shortcuts</h3>
           <KeyboardShortcuts />
         </div>
+        {process.env.NODE_ENV === "development" && (
+          <div className="flex flex-col gap-1 px-3 py-2">
+            <span
+              className="cursor-pointer underline"
+              onClick={() => navigate("/theme")}
+            >
+              Themes
+            </span>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/gui/src/pages/More/MoreHelpRow.tsx b/gui/src/pages/More/MoreHelpRow.tsx
index 81489bd481..6d60562f51 100644
--- a/gui/src/pages/More/MoreHelpRow.tsx
+++ b/gui/src/pages/More/MoreHelpRow.tsx
@@ -9,15 +9,15 @@ interface MoreHelpRowProps {
 function MoreHelpRow({ title, description, onClick, Icon }: MoreHelpRowProps) {
   return (
     <div
-      className="hover:bg-lightgray/30 flex cursor-pointer items-center justify-between gap-2 rounded px-4 py-2"
+      className="hover:bg-description/30 flex cursor-pointer items-center justify-between gap-2 rounded px-4 py-2"
       onClick={onClick}
     >
       <div className="flex w-4/5 flex-col justify-center">
         <h3 className="my-0 text-sm">{title}</h3>
-        <span className="py-1 text-xs text-stone-500">{description}</span>
+        <span className="text-description py-1 text-xs">{description}</span>
       </div>
 
-      <div className="flex h-5 w-1/5 w-5 cursor-pointer justify-end text-stone-500">
+      <div className="text-description flex h-5 w-5 cursor-pointer justify-end">
         <Icon />
       </div>
     </div>
diff --git a/gui/src/pages/config-error/index.tsx b/gui/src/pages/config-error/index.tsx
index 2f1ee934d1..3cf11efbcc 100644
--- a/gui/src/pages/config-error/index.tsx
+++ b/gui/src/pages/config-error/index.tsx
@@ -20,7 +20,7 @@ export default function ConfigErrorPage() {
     <div className="overflow-y-scroll">
       <div
         onClick={() => navigate(ROUTES.HOME)}
-        className="sticky top-0 m-0 flex cursor-pointer items-center border-0 border-b border-solid border-b-zinc-700 bg-inherit p-0"
+        className="border-b-border sticky top-0 m-0 flex cursor-pointer items-center border-0 border-b border-solid bg-inherit p-0"
         style={{
           backgroundColor: vscBackground,
         }}
@@ -29,10 +29,10 @@ export default function ConfigErrorPage() {
         <span className="m-2 inline-block text-sm font-bold">Chat</span>
       </div>
 
-      <div className="gap-2 divide-x-0 divide-y-2 divide-solid divide-zinc-700 px-4">
+      <div className="divide-border gap-2 divide-x-0 divide-y-2 divide-solid px-4">
         <div className="py-5">
           <h3 className="mb-2 mt-0 text-xl">Config Errors</h3>
-          <p className="text-md mb-4">
+          <p className="mb-4 text-base">
             Please resolve the following errors in your config.json file.
           </p>
           <div className="flex flex-col gap-5">
@@ -43,8 +43,8 @@ export default function ConfigErrorPage() {
                     key={index}
                     className={`flex items-start rounded-md p-2 text-sm shadow-md ${
                       error.fatal
-                        ? "bg-red-100 text-red-800"
-                        : "bg-yellow-100 text-yellow-800"
+                        ? "text-error-foreground bg-error"
+                        : "text-error-foreground bg-warning"
                     }`}
                   >
                     {error.fatal ? (
@@ -62,7 +62,7 @@ export default function ConfigErrorPage() {
                 ))}
               </ul>
             ) : (
-              <p className="rounded-md bg-green-100 p-4 text-sm text-green-700">
+              <p className="text-success rounded-md p-4 text-sm">
                 No configuration errors found.
               </p>
             )}
diff --git a/gui/src/pages/error.tsx b/gui/src/pages/error.tsx
index 92c0640193..62c4a0801f 100644
--- a/gui/src/pages/error.tsx
+++ b/gui/src/pages/error.tsx
@@ -34,7 +34,7 @@ const ErrorPage: React.FC = () => {
     <div className="flex flex-col items-center justify-center px-2 py-4 text-center sm:px-8">
       <h1 className="mb-4 text-3xl font-bold">Oops! Something went wrong</h1>
 
-      <code className="whitespace-wrap mx-2 mb-4 max-w-full break-words py-2">
+      <code className="whitespace-wrap mx-2 mb-4 max-w-full break-words px-2 py-2">
         {error.statusText || error.message}
       </code>
 
@@ -50,27 +50,27 @@ const ErrorPage: React.FC = () => {
         }}
       >
         {initialLoad ? (
-          <FlagIcon className="h-5 w-5 text-red-600" />
+          <FlagIcon className="text-error h-5 w-5" />
         ) : (
           <ArrowPathIcon className="h-5 w-5" />
         )}
         Continue
       </Button>
 
-      <p className="mb-0 mt-6 text-lg">
+      <p className="mb-0 mt-6 text-base">
         Report the issue on GitHub or Discord:
       </p>
 
-      <div className="flex space-x-4">
+      <div className="mt-2 flex flex-wrap items-center justify-center gap-x-4">
         <SecondaryButton
           onClick={() => openUrl(GITHUB_LINK)}
-          className="flex w-full items-center justify-center space-x-2 rounded-lg px-4 py-2 text-base text-white"
+          className="flex items-center justify-center"
         >
           <GithubIcon size={20} /> <span className="ml-2">GitHub</span>
         </SecondaryButton>
         <SecondaryButton
           onClick={() => openUrl(DISCORD_LINK)}
-          className="flex w-full items-center justify-center rounded-lg text-base"
+          className="flex items-center justify-center"
         >
           <DiscordIcon size={20} /> <span className="ml-2">Discord</span>
         </SecondaryButton>
diff --git a/gui/src/pages/gui/Chat.tsx b/gui/src/pages/gui/Chat.tsx
index b7748bf22e..1ef96928f6 100644
--- a/gui/src/pages/gui/Chat.tsx
+++ b/gui/src/pages/gui/Chat.tsx
@@ -16,8 +16,9 @@ import styled from "styled-components";
 import {
   Button,
   defaultBorderRadius,
-  lightGray,
   vscBackground,
+  vscBorder,
+  vscError,
 } from "../../components";
 import { ChatScrollAnchor } from "../../components/ChatScrollAnchor";
 import CodeToEditCard from "../../components/CodeToEditCard";
@@ -71,10 +72,7 @@ import ConfigErrorIndicator from "./ConfigError";
 import { ToolCallDiv } from "./ToolCallDiv";
 import { ToolCallButtons } from "./ToolCallDiv/ToolCallButtonsDiv";
 import ToolOutput from "./ToolCallDiv/ToolOutput";
-import {
-  loadLastSession,
-  saveCurrentSession,
-} from "../../redux/thunks/session";
+import { loadLastSession } from "../../redux/thunks/session";
 
 const StopButton = styled.div`
   background-color: ${vscBackground};
@@ -82,10 +80,10 @@ const StopButton = styled.div`
   margin-right: auto;
   margin-left: auto;
   font-size: ${getFontSize() - 2}px;
-  border: 0.5px solid ${lightGray};
+  border: 0.5px solid ${vscBorder};
   border-radius: ${defaultBorderRadius};
   padding: 4px 8px;
-  color: ${lightGray};
+  color: ${vscBorder};
   cursor: pointer;
   box-shadow:
     0 4px 6px rgba(0, 0, 0, 0.1),
@@ -122,8 +120,8 @@ function fallbackRender({ error, resetErrorBoundary }: any) {
       style={{ backgroundColor: vscBackground }}
     >
       <p>Something went wrong:</p>
-      <pre style={{ color: "red" }}>{error.message}</pre>
-      <pre style={{ color: lightGray }}>{error.stack}</pre>
+      <pre style={{ color: vscError }}>{error.message}</pre>
+      <pre style={{ color: vscBorder }}>{error.stack}</pre>
 
       <div className="text-center">
         <Button onClick={resetErrorBoundary}>Restart</Button>
@@ -418,7 +416,7 @@ export function Chat() {
                         <ExclamationTriangleIcon
                           width="16px"
                           height="16px"
-                          color="red"
+                          className="text-error"
                         />
                       ) : (
                         <ChatBubbleOvalLeftIcon width="16px" height="16px" />
diff --git a/gui/src/pages/gui/ConfigError.tsx b/gui/src/pages/gui/ConfigError.tsx
index 8bab2c3c92..15ff93342a 100644
--- a/gui/src/pages/gui/ConfigError.tsx
+++ b/gui/src/pages/gui/ConfigError.tsx
@@ -25,7 +25,7 @@ const ConfigErrorIndicator = () => {
       text="Config error"
       onClick={onClickError}
     >
-      <ExclamationTriangleIcon className="h-4 w-4 text-red-600" />
+      <ExclamationTriangleIcon className="text-error h-4 w-4" />
     </HeaderButtonWithToolTip>
   );
 };
diff --git a/gui/src/pages/gui/StreamError.tsx b/gui/src/pages/gui/StreamError.tsx
index 1694fe4109..7085db5ba7 100644
--- a/gui/src/pages/gui/StreamError.tsx
+++ b/gui/src/pages/gui/StreamError.tsx
@@ -177,7 +177,7 @@ const StreamErrorDialog = ({ error }: StreamErrorProps) => {
 
   return (
     <div className={`flex flex-col gap-1 px-3 pb-2 pt-2`}>
-      <p className="m-0 p-0 text-lg text-red-500">{`${statusCode ? statusCode + " " : ""}Error`}</p>
+      <p className="text-error m-0 p-0 text-lg">{`${statusCode ? statusCode + " " : ""}Error`}</p>
 
       {message ? (
         <div className="mt-2 flex flex-col gap-0 rounded-sm border border-solid">
diff --git a/gui/src/pages/gui/ToolCallDiv/ToolCallButtonsDiv.tsx b/gui/src/pages/gui/ToolCallDiv/ToolCallButtonsDiv.tsx
index 9d4528f33c..9cece16c57 100644
--- a/gui/src/pages/gui/ToolCallDiv/ToolCallButtonsDiv.tsx
+++ b/gui/src/pages/gui/ToolCallDiv/ToolCallButtonsDiv.tsx
@@ -2,7 +2,7 @@ import { useSelector } from "react-redux";
 import styled from "styled-components";
 import {
   defaultBorderRadius,
-  lightGray,
+  vscBorder,
   vscButtonBackground,
   vscButtonForeground,
 } from "../../../components";
@@ -42,8 +42,8 @@ const AcceptButton = styled(Button)`
 `;
 
 const RejectButton = styled(Button)`
-  color: ${lightGray};
-  border: 1px solid ${lightGray};
+  color: ${vscBorder};
+  border: 1px solid ${vscBorder};
   background-color: transparent;
 `;
 
@@ -64,7 +64,7 @@ export function ToolCallButtons(props: ToolCallButtonsProps) {
           <div
             className="flex w-full items-center justify-center gap-4"
             style={{
-              color: lightGray,
+              color: vscBorder,
               minHeight: "40px",
             }}
           >
diff --git a/gui/src/pages/gui/ToolCallDiv/index.tsx b/gui/src/pages/gui/ToolCallDiv/index.tsx
index 6ca16bf87e..99512e19af 100644
--- a/gui/src/pages/gui/ToolCallDiv/index.tsx
+++ b/gui/src/pages/gui/ToolCallDiv/index.tsx
@@ -24,9 +24,9 @@ export function ToolCallDiv(props: ToolCallDivProps) {
       case "generated":
         return <ArrowRightIcon color={vscButtonBackground} />;
       case "done":
-        return <CheckIcon className="text-green-500" />;
+        return <CheckIcon className="text-success" />;
       case "canceled":
-        return <XMarkIcon className="text-red-500" />;
+        return <XMarkIcon className="text-error" />;
     }
   }
 
diff --git a/gui/src/pages/stats.tsx b/gui/src/pages/stats.tsx
index 21c2481b68..087f232b46 100644
--- a/gui/src/pages/stats.tsx
+++ b/gui/src/pages/stats.tsx
@@ -3,7 +3,7 @@ import { useContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { table } from "table";
-import { lightGray, vscBackground, vscInputBackground } from "../components";
+import { vscBorder, vscBackground, vscInputBackground } from "../components";
 import { CopyIconButton } from "../components/gui/CopyIconButton";
 import { IdeMessengerContext } from "../context/IdeMessenger";
 import { useNavigationListener } from "../hooks/useNavigationListener";
@@ -11,7 +11,7 @@ import { useNavigationListener } from "../hooks/useNavigationListener";
 const Th = styled.th`
   padding: 0.5rem;
   text-align: left;
-  border: 1px solid ${lightGray};
+  border: 1px solid ${vscBorder};
 `;
 
 const Tr = styled.tr`
@@ -21,12 +21,12 @@ const Tr = styled.tr`
 
   overflow-wrap: anywhere;
 
-  border: 1px solid ${lightGray};
+  border: 1px solid ${vscBorder};
 `;
 
 const Td = styled.td`
   padding: 0.5rem;
-  border: 1px solid ${lightGray};
+  border: 1px solid ${vscBorder};
 `;
 
 function generateTable(data: unknown[][]) {
@@ -69,7 +69,7 @@ function Stats() {
         onClick={() => navigate(-1)}
         className="sticky top-0 m-0 flex cursor-pointer items-center p-0"
         style={{
-          borderBottom: `0.5px solid ${lightGray}`,
+          borderBottom: `0.5px solid ${vscBorder}`,
           backgroundColor: vscBackground,
         }}
       >
diff --git a/gui/src/pages/theme/index.tsx b/gui/src/pages/theme/index.tsx
new file mode 100644
index 0000000000..3e7aa5d74f
--- /dev/null
+++ b/gui/src/pages/theme/index.tsx
@@ -0,0 +1,59 @@
+import { useNavigate } from "react-router-dom";
+import { CheckIcon, XIcon } from "@heroicons/react/solid";
+import { vscodeCssClasses } from "./vscode-classes";
+import { VSC_THEME_COLOR_VARS } from "../../components";
+
+interface ThemeExampleProps {
+  className: string;
+}
+
+const TAILWIND_CLASSES = [
+  // TODO
+  "error",
+];
+
+const ThemeVariableExample = ({ varName }: { varName: string }) => {
+  return (
+    <div className="flex flex-row items-center justify-end gap-2">
+      <span className="lines lines-1">{varName}</span>
+      <div
+        className={`h-6 w-12`}
+        style={{
+          backgroundColor: `var(${varName})`,
+        }}
+      ></div>
+    </div>
+  );
+};
+
+const ThemeTailwindClassExample = ({ className }: { className: string }) => {
+  return (
+    <div className="flex flex-row items-center justify-end gap-2">
+      <span className="lines lines-1">{className}</span>
+      <div className={`h-6 w-12 bg-${className}`}></div>
+    </div>
+  );
+};
+
+export default function ThemePage() {
+  const navigate = useNavigate();
+  return (
+    <div className="flex flex-1 flex-col px-2 py-2">
+      <span
+        className="cursor-pointer underline"
+        onClick={() => navigate("/more")}
+      >
+        Back to more page
+      </span>
+      <p className="">More pretty than this</p>
+      <div className="flex flex-col">
+        {VSC_THEME_COLOR_VARS.map((c) => (
+          <ThemeVariableExample key={c} varName={c} />
+        ))}
+        {TAILWIND_CLASSES.map((c) => (
+          <ThemeTailwindClassExample key={c} className={c} />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/gui/src/pages/theme/vscode-classes.ts b/gui/src/pages/theme/vscode-classes.ts
new file mode 100644
index 0000000000..e2ece42638
--- /dev/null
+++ b/gui/src/pages/theme/vscode-classes.ts
@@ -0,0 +1,516 @@
+export const vscodeCssClasses = [
+  "vscode-font-weight",
+  "vscode-font-size",
+  "vscode-editor-font-family",
+  "vscode-editor-font-weight",
+  "vscode-editor-font-size",
+  "vscode-foreground",
+  "vscode-errorForeground",
+  "vscode-descriptionForeground",
+  "vscode-icon-foreground",
+  "vscode-focusBorder",
+  "vscode-selection-background",
+  "vscode-textSeparator-foreground",
+  "vscode-textLink-foreground",
+  "vscode-textLink-activeForeground",
+  "vscode-textPreformat-foreground",
+  "vscode-textBlockQuote-background",
+  "vscode-textBlockQuote-border",
+  "vscode-textCodeBlock-background",
+  "vscode-widget-shadow",
+  "vscode-input-background",
+  "vscode-input-foreground",
+  "vscode-inputOption-activeBorder",
+  "vscode-inputOption-hoverBackground",
+  "vscode-inputOption-activeBackground",
+  "vscode-inputOption-activeForeground",
+  "vscode-input-placeholderForeground",
+  "vscode-inputValidation-infoBackground",
+  "vscode-inputValidation-infoBorder",
+  "vscode-inputValidation-warningBackground",
+  "vscode-inputValidation-warningBorder",
+  "vscode-inputValidation-errorBackground",
+  "vscode-inputValidation-errorBorder",
+  "vscode-dropdown-background",
+  "vscode-dropdown-foreground",
+  "vscode-dropdown-border",
+  "vscode-checkbox-background",
+  "vscode-checkbox-foreground",
+  "vscode-checkbox-border",
+  "vscode-button-foreground",
+  "vscode-button-background",
+  "vscode-button-hoverBackground",
+  "vscode-button-secondaryForeground",
+  "vscode-button-secondaryBackground",
+  "vscode-button-secondaryHoverBackground",
+  "vscode-badge-background",
+  "vscode-badge-foreground",
+  "vscode-scrollbar-shadow",
+  "vscode-scrollbarSlider-background",
+  "vscode-scrollbarSlider-hoverBackground",
+  "vscode-scrollbarSlider-activeBackground",
+  "vscode-progressBar-background",
+  "vscode-editorError-foreground",
+  "vscode-editorWarning-foreground",
+  "vscode-editorInfo-foreground",
+  "vscode-editorHint-foreground",
+  "vscode-sash-hoverBorder",
+  "vscode-editor-background",
+  "vscode-editor-foreground",
+  "vscode-editorWidget-background",
+  "vscode-editorWidget-foreground",
+  "vscode-editorWidget-border",
+  "vscode-quickInput-background",
+  "vscode-quickInput-foreground",
+  "vscode-quickInputTitle-background",
+  "vscode-pickerGroup-foreground",
+  "vscode-pickerGroup-border",
+  "vscode-keybindingLabel-background",
+  "vscode-keybindingLabel-foreground",
+  "vscode-keybindingLabel-border",
+  "vscode-keybindingLabel-bottomBorder",
+  "vscode-editor-selectionBackground",
+  "vscode-editor-selectionForeground",
+  "vscode-editor-inactiveSelectionBackground",
+  "vscode-editor-selectionHighlightBackground",
+  "vscode-editor-findMatchBackground",
+  "vscode-editor-findMatchHighlightBackground",
+  "vscode-editor-findRangeHighlightBackground",
+  "vscode-editor-findMatchBorder",
+  "vscode-searchEditor-findMatchBackground",
+  "vscode-editor-hoverHighlightBackground",
+  "vscode-editorHoverWidget-background",
+  "vscode-editorHoverWidget-foreground",
+  "vscode-editorHoverWidget-border",
+  "vscode-editorHoverWidget-statusBarBackground",
+  "vscode-editorLink-activeForeground",
+  "vscode-editorInlayHint-foreground",
+  "vscode-editorInlayHint-background",
+  "vscode-editorInlayHint-typeForeground",
+  "vscode-editorInlayHint-typeBackground",
+  "vscode-editorInlayHint-parameterForeground",
+  "vscode-editorInlayHint-parameterBackground",
+  "vscode-editorLightBulb-foreground",
+  "vscode-editorLightBulbAutoFix-foreground",
+  "vscode-diffEditor-insertedTextBackground",
+  "vscode-diffEditor-removedTextBackground",
+  "vscode-diffEditor-diagonalFill",
+  "vscode-list-focusOutline",
+  "vscode-list-activeSelectionBackground",
+  "vscode-list-activeSelectionForeground",
+  "vscode-list-inactiveSelectionBackground",
+  "vscode-list-inactiveSelectionForeground",
+  "vscode-list-inactiveFocusOutline",
+  "vscode-list-hoverBackground",
+  "vscode-list-dropBackground",
+  "vscode-list-highlightForeground",
+  "vscode-list-focusHighlightForeground",
+  "vscode-list-invalidItemForeground",
+  "vscode-list-errorForeground",
+  "vscode-list-warningForeground",
+  "vscode-listFilterWidget-background",
+  "vscode-listFilterWidget-outline",
+  "vscode-listFilterWidget-noMatchesOutline",
+  "vscode-list-filterMatchBackground",
+  "vscode-tree-indentGuidesStroke",
+  "vscode-tree-tableColumnsBorder",
+  "vscode-tree-tableOddRowsBackground",
+  "vscode-list-deemphasizedForeground",
+  "vscode-quickInputList-focusForeground",
+  "vscode-quickInputList-focusBackground",
+  "vscode-menu-border",
+  "vscode-menu-foreground",
+  "vscode-menu-background",
+  "vscode-menu-selectionForeground",
+  "vscode-menu-selectionBackground",
+  "vscode-menu-separatorBackground",
+  "vscode-toolbar-hoverBackground",
+  "vscode-toolbar-activeBackground",
+  "vscode-editor-snippetTabstopHighlightBackground",
+  "vscode-editor-snippetFinalTabstopHighlightBorder",
+  "vscode-breadcrumb-foreground",
+  "vscode-breadcrumb-background",
+  "vscode-breadcrumb-focusForeground",
+  "vscode-breadcrumb-activeSelectionForeground",
+  "vscode-breadcrumbPicker-background",
+  "vscode-merge-currentHeaderBackground",
+  "vscode-merge-currentContentBackground",
+  "vscode-merge-incomingHeaderBackground",
+  "vscode-merge-incomingContentBackground",
+  "vscode-merge-commonHeaderBackground",
+  "vscode-merge-commonContentBackground",
+  "vscode-editorOverviewRuler-currentContentForeground",
+  "vscode-editorOverviewRuler-incomingContentForeground",
+  "vscode-editorOverviewRuler-commonContentForeground",
+  "vscode-editorOverviewRuler-findMatchForeground",
+  "vscode-editorOverviewRuler-selectionHighlightForeground",
+  "vscode-editorOverviewRuler-unicodeForeground",
+  "vscode-minimap-findMatchHighlight",
+  "vscode-minimap-selectionOccurrenceHighlight",
+  "vscode-minimap-selectionHighlight",
+  "vscode-minimap-errorHighlight",
+  "vscode-minimap-warningHighlight",
+  "vscode-minimap-foregroundOpacity",
+  "vscode-minimap-unicodeHighlight",
+  "vscode-minimapSlider-background",
+  "vscode-minimapSlider-hoverBackground",
+  "vscode-minimapSlider-activeBackground",
+  "vscode-problemsErrorIcon-foreground",
+  "vscode-problemsWarningIcon-foreground",
+  "vscode-problemsInfoIcon-foreground",
+  "vscode-charts-foreground",
+  "vscode-charts-lines",
+  "vscode-charts-red",
+  "vscode-charts-blue",
+  "vscode-charts-yellow",
+  "vscode-charts-orange",
+  "vscode-charts-green",
+  "vscode-charts-purple",
+  "vscode-editor-lineHighlightBackground",
+  "vscode-editor-lineHighlightBorder",
+  "vscode-editor-rangeHighlightBackground",
+  "vscode-editor-symbolHighlightBackground",
+  "vscode-editorCursor-foreground",
+  "vscode-editorWhitespace-foreground",
+  "vscode-editorIndentGuide-background",
+  "vscode-editorIndentGuide-activeBackground",
+  "vscode-editorLineNumber-foreground",
+  "vscode-editorActiveLineNumber-foreground",
+  "vscode-editorLineNumber-activeForeground",
+  "vscode-editorRuler-foreground",
+  "vscode-editorCodeLens-foreground",
+  "vscode-editorBracketMatch-background",
+  "vscode-editorBracketMatch-border",
+  "vscode-editorOverviewRuler-border",
+  "vscode-editorGutter-background",
+  "vscode-editorUnnecessaryCode-opacity",
+  "vscode-editorGhostText-foreground",
+  "vscode-editorOverviewRuler-rangeHighlightForeground",
+  "vscode-editorOverviewRuler-errorForeground",
+  "vscode-editorOverviewRuler-warningForeground",
+  "vscode-editorOverviewRuler-infoForeground",
+  "vscode-editorBracketHighlight-foreground1",
+  "vscode-editorBracketHighlight-foreground2",
+  "vscode-editorBracketHighlight-foreground3",
+  "vscode-editorBracketHighlight-foreground4",
+  "vscode-editorBracketHighlight-foreground5",
+  "vscode-editorBracketHighlight-foreground6",
+  "vscode-editorBracketHighlight-unexpectedBracket.foreground",
+  "vscode-editorBracketPairGuide-background1",
+  "vscode-editorBracketPairGuide-background2",
+  "vscode-editorBracketPairGuide-background3",
+  "vscode-editorBracketPairGuide-background4",
+  "vscode-editorBracketPairGuide-background5",
+  "vscode-editorBracketPairGuide-background6",
+  "vscode-editorBracketPairGuide-activeBackground1",
+  "vscode-editorBracketPairGuide-activeBackground2",
+  "vscode-editorBracketPairGuide-activeBackground3",
+  "vscode-editorBracketPairGuide-activeBackground4",
+  "vscode-editorBracketPairGuide-activeBackground5",
+  "vscode-editorBracketPairGuide-activeBackground6",
+  "vscode-editorUnicodeHighlight-border",
+  "vscode-symbolIcon-arrayForeground",
+  "vscode-symbolIcon-booleanForeground",
+  "vscode-symbolIcon-classForeground",
+  "vscode-symbolIcon-colorForeground",
+  "vscode-symbolIcon-constantForeground",
+  "vscode-symbolIcon-constructorForeground",
+  "vscode-symbolIcon-enumeratorForeground",
+  "vscode-symbolIcon-enumeratorMemberForeground",
+  "vscode-symbolIcon-eventForeground",
+  "vscode-symbolIcon-fieldForeground",
+  "vscode-symbolIcon-fileForeground",
+  "vscode-symbolIcon-folderForeground",
+  "vscode-symbolIcon-functionForeground",
+  "vscode-symbolIcon-interfaceForeground",
+  "vscode-symbolIcon-keyForeground",
+  "vscode-symbolIcon-keywordForeground",
+  "vscode-symbolIcon-methodForeground",
+  "vscode-symbolIcon-moduleForeground",
+  "vscode-symbolIcon-namespaceForeground",
+  "vscode-symbolIcon-nullForeground",
+  "vscode-symbolIcon-numberForeground",
+  "vscode-symbolIcon-objectForeground",
+  "vscode-symbolIcon-operatorForeground",
+  "vscode-symbolIcon-packageForeground",
+  "vscode-symbolIcon-propertyForeground",
+  "vscode-symbolIcon-referenceForeground",
+  "vscode-symbolIcon-snippetForeground",
+  "vscode-symbolIcon-stringForeground",
+  "vscode-symbolIcon-structForeground",
+  "vscode-symbolIcon-textForeground",
+  "vscode-symbolIcon-typeParameterForeground",
+  "vscode-symbolIcon-unitForeground",
+  "vscode-symbolIcon-variableForeground",
+  "vscode-editorHoverWidget-highlightForeground",
+  "vscode-editorOverviewRuler-bracketMatchForeground",
+  "vscode-editor-foldBackground",
+  "vscode-editorGutter-foldingControlForeground",
+  "vscode-editor-linkedEditingBackground",
+  "vscode-editorSuggestWidget-background",
+  "vscode-editorSuggestWidget-border",
+  "vscode-editorSuggestWidget-foreground",
+  "vscode-editorSuggestWidget-selectedForeground",
+  "vscode-editorSuggestWidget-selectedBackground",
+  "vscode-editorSuggestWidget-highlightForeground",
+  "vscode-editorSuggestWidget-focusHighlightForeground",
+  "vscode-editorSuggestWidgetStatus-foreground",
+  "vscode-editor-wordHighlightBackground",
+  "vscode-editor-wordHighlightStrongBackground",
+  "vscode-editorOverviewRuler-wordHighlightForeground",
+  "vscode-editorOverviewRuler-wordHighlightStrongForeground",
+  "vscode-peekViewTitle-background",
+  "vscode-peekViewTitleLabel-foreground",
+  "vscode-peekViewTitleDescription-foreground",
+  "vscode-peekView-border",
+  "vscode-peekViewResult-background",
+  "vscode-peekViewResult-lineForeground",
+  "vscode-peekViewResult-fileForeground",
+  "vscode-peekViewResult-selectionBackground",
+  "vscode-peekViewResult-selectionForeground",
+  "vscode-peekViewEditor-background",
+  "vscode-peekViewEditorGutter-background",
+  "vscode-peekViewResult-matchHighlightBackground",
+  "vscode-peekViewEditor-matchHighlightBackground",
+  "vscode-editorMarkerNavigationError-background",
+  "vscode-editorMarkerNavigationError-headerBackground",
+  "vscode-editorMarkerNavigationWarning-background",
+  "vscode-editorMarkerNavigationWarning-headerBackground",
+  "vscode-editorMarkerNavigationInfo-background",
+  "vscode-editorMarkerNavigationInfo-headerBackground",
+  "vscode-editorMarkerNavigation-background",
+  "vscode-tab-activeBackground",
+  "vscode-tab-unfocusedActiveBackground",
+  "vscode-tab-inactiveBackground",
+  "vscode-tab-unfocusedInactiveBackground",
+  "vscode-tab-activeForeground",
+  "vscode-tab-inactiveForeground",
+  "vscode-tab-unfocusedActiveForeground",
+  "vscode-tab-unfocusedInactiveForeground",
+  "vscode-tab-border",
+  "vscode-tab-lastPinnedBorder",
+  "vscode-tab-activeModifiedBorder",
+  "vscode-tab-inactiveModifiedBorder",
+  "vscode-tab-unfocusedActiveModifiedBorder",
+  "vscode-tab-unfocusedInactiveModifiedBorder",
+  "vscode-editorPane-background",
+  "vscode-editorGroupHeader-tabsBackground",
+  "vscode-editorGroupHeader-tabsBorder",
+  "vscode-editorGroupHeader-noTabsBackground",
+  "vscode-editorGroup-border",
+  "vscode-editorGroup-dropBackground",
+  "vscode-sideBySideEditor-horizontalBorder",
+  "vscode-sideBySideEditor-verticalBorder",
+  "vscode-panel-background",
+  "vscode-panel-border",
+  "vscode-panelTitle-activeForeground",
+  "vscode-panelTitle-inactiveForeground",
+  "vscode-panelTitle-activeBorder",
+  "vscode-panel-dropBorder",
+  "vscode-panelSection-dropBackground",
+  "vscode-panelSectionHeader-background",
+  "vscode-panelSection-border",
+  "vscode-banner-background",
+  "vscode-banner-foreground",
+  "vscode-banner-iconForeground",
+  "vscode-statusBar-foreground",
+  "vscode-statusBar-noFolderForeground",
+  "vscode-statusBar-background",
+  "vscode-statusBar-noFolderBackground",
+  "vscode-statusBar-border",
+  "vscode-statusBar-noFolderBorder",
+  "vscode-statusBarItem-activeBackground",
+  "vscode-statusBarItem-hoverBackground",
+  "vscode-statusBarItem-prominentForeground",
+  "vscode-statusBarItem-prominentBackground",
+  "vscode-statusBarItem-prominentHoverBackground",
+  "vscode-statusBarItem-errorBackground",
+  "vscode-statusBarItem-errorForeground",
+  "vscode-statusBarItem-warningBackground",
+  "vscode-statusBarItem-warningForeground",
+  "vscode-activityBar-background",
+  "vscode-activityBar-foreground",
+  "vscode-activityBar-inactiveForeground",
+  "vscode-activityBar-border",
+  "vscode-activityBar-activeBorder",
+  "vscode-activityBar-activeFocusBorder",
+  "vscode-activityBar-activeBackground",
+  "vscode-activityBar-dropBorder",
+  "vscode-activityBarBadge-background",
+  "vscode-activityBarBadge-foreground",
+  "vscode-statusBarItem-remoteBackground",
+  "vscode-statusBarItem-remoteForeground",
+  "vscode-extensionBadge-remoteBackground",
+  "vscode-extensionBadge-remoteForeground",
+  "vscode-sideBar-background",
+  "vscode-sideBar-foreground",
+  "vscode-sideBar-border",
+  "vscode-sideBarTitle-foreground",
+  "vscode-sideBar-dropBackground",
+  "vscode-sideBarSectionHeader-background",
+  "vscode-sideBarSectionHeader-foreground",
+  "vscode-sideBarSectionHeader-border",
+  "vscode-titleBar-activeForeground",
+  "vscode-titleBar-inactiveForeground",
+  "vscode-titleBar-activeBackground",
+  "vscode-titleBar-inactiveBackground",
+  "vscode-menubar-selectionForeground",
+  "vscode-menubar-selectionBackground",
+  "vscode-notificationCenter-border",
+  "vscode-notificationToast-border",
+  "vscode-notifications-foreground",
+  "vscode-notifications-background",
+  "vscode-notificationLink-foreground",
+  "vscode-notificationCenterHeader-foreground",
+  "vscode-notificationCenterHeader-background",
+  "vscode-notifications-border",
+  "vscode-notificationsErrorIcon-foreground",
+  "vscode-notificationsWarningIcon-foreground",
+  "vscode-notificationsInfoIcon-foreground",
+  "vscode-editorGutter-commentRangeForeground",
+  "vscode-debugToolBar-background",
+  "vscode-debugToolBar-border",
+  "vscode-debugIcon-startForeground",
+  "vscode-editor-stackFrameHighlightBackground",
+  "vscode-editor-focusedStackFrameHighlightBackground",
+  "vscode-settings-headerForeground",
+  "vscode-settings-modifiedItemIndicator",
+  "vscode-settings-dropdownBackground",
+  "vscode-settings-dropdownForeground",
+  "vscode-settings-dropdownBorder",
+  "vscode-settings-dropdownListBorder",
+  "vscode-settings-checkboxBackground",
+  "vscode-settings-checkboxForeground",
+  "vscode-settings-checkboxBorder",
+  "vscode-settings-textInputBackground",
+  "vscode-settings-textInputForeground",
+  "vscode-settings-numberInputBackground",
+  "vscode-settings-numberInputForeground",
+  "vscode-settings-focusedRowBackground",
+  "vscode-settings-rowHoverBackground",
+  "vscode-settings-focusedRowBorder",
+  "vscode-terminal-background",
+  "vscode-terminal-foreground",
+  "vscode-terminal-selectionBackground",
+  "vscode-terminal-border",
+  "vscode-terminal-dropBackground",
+  "vscode-testing-iconFailed",
+  "vscode-testing-iconErrored",
+  "vscode-testing-iconPassed",
+  "vscode-testing-runAction",
+  "vscode-testing-iconQueued",
+  "vscode-testing-iconUnset",
+  "vscode-testing-iconSkipped",
+  "vscode-testing-peekBorder",
+  "vscode-testing-peekHeaderBackground",
+  "vscode-testing-message.error.decorationForeground",
+  "vscode-testing-message.error.lineBackground",
+  "vscode-testing-message.info.decorationForeground",
+  "vscode-welcomePage-tileBackground",
+  "vscode-welcomePage-tileHoverBackground",
+  "vscode-welcomePage-tileShadow",
+  "vscode-welcomePage-progress.background",
+  "vscode-welcomePage-progress.foreground",
+  "vscode-statusBar-debuggingBackground",
+  "vscode-statusBar-debuggingForeground",
+  "vscode-statusBar-debuggingBorder",
+  "vscode-debugExceptionWidget-border",
+  "vscode-debugExceptionWidget-background",
+  "vscode-ports-iconRunningProcessForeground",
+  "vscode-editor-inlineValuesForeground",
+  "vscode-editor-inlineValuesBackground",
+  "vscode-editorGutter-modifiedBackground",
+  "vscode-editorGutter-addedBackground",
+  "vscode-editorGutter-deletedBackground",
+  "vscode-minimapGutter-modifiedBackground",
+  "vscode-minimapGutter-addedBackground",
+  "vscode-minimapGutter-deletedBackground",
+  "vscode-editorOverviewRuler-modifiedForeground",
+  "vscode-editorOverviewRuler-addedForeground",
+  "vscode-editorOverviewRuler-deletedForeground",
+  "vscode-debugIcon-breakpointForeground",
+  "vscode-debugIcon-breakpointDisabledForeground",
+  "vscode-debugIcon-breakpointUnverifiedForeground",
+  "vscode-debugIcon-breakpointCurrentStackframeForeground",
+  "vscode-debugIcon-breakpointStackframeForeground",
+  "vscode-keybindingTable-headerBackground",
+  "vscode-keybindingTable-rowsBackground",
+  "vscode-notebook-cellBorderColor",
+  "vscode-notebook-focusedEditorBorder",
+  "vscode-notebookStatusSuccessIcon-foreground",
+  "vscode-notebookStatusErrorIcon-foreground",
+  "vscode-notebookStatusRunningIcon-foreground",
+  "vscode-notebook-cellToolbarSeparator",
+  "vscode-notebook-selectedCellBackground",
+  "vscode-notebook-selectedCellBorder",
+  "vscode-notebook-focusedCellBorder",
+  "vscode-notebook-inactiveFocusedCellBorder",
+  "vscode-notebook-cellStatusBarItemHoverBackground",
+  "vscode-notebook-cellInsertionIndicator",
+  "vscode-notebookScrollbarSlider-background",
+  "vscode-notebookScrollbarSlider-hoverBackground",
+  "vscode-notebookScrollbarSlider-activeBackground",
+  "vscode-notebook-symbolHighlightBackground",
+  "vscode-notebook-cellEditorBackground",
+  "vscode-scm-providerBorder",
+  "vscode-debugTokenExpression-name",
+  "vscode-debugTokenExpression-value",
+  "vscode-debugTokenExpression-string",
+  "vscode-debugTokenExpression-boolean",
+  "vscode-debugTokenExpression-number",
+  "vscode-debugTokenExpression-error",
+  "vscode-debugView-exceptionLabelForeground",
+  "vscode-debugView-exceptionLabelBackground",
+  "vscode-debugView-stateLabelForeground",
+  "vscode-debugView-stateLabelBackground",
+  "vscode-debugView-valueChangedHighlight",
+  "vscode-debugConsole-infoForeground",
+  "vscode-debugConsole-warningForeground",
+  "vscode-debugConsole-errorForeground",
+  "vscode-debugConsole-sourceForeground",
+  "vscode-debugConsoleInputIcon-foreground",
+  "vscode-debugIcon-pauseForeground",
+  "vscode-debugIcon-stopForeground",
+  "vscode-debugIcon-disconnectForeground",
+  "vscode-debugIcon-restartForeground",
+  "vscode-debugIcon-stepOverForeground",
+  "vscode-debugIcon-stepIntoForeground",
+  "vscode-debugIcon-stepOutForeground",
+  "vscode-debugIcon-continueForeground",
+  "vscode-debugIcon-stepBackForeground",
+  "vscode-extensionButton-prominentBackground",
+  "vscode-extensionButton-prominentForeground",
+  "vscode-extensionButton-prominentHoverBackground",
+  "vscode-extensionIcon-starForeground",
+  "vscode-extensionIcon-verifiedForeground",
+  "vscode-extensionIcon-preReleaseForeground",
+  "vscode-terminal-ansiBlack",
+  "vscode-terminal-ansiRed",
+  "vscode-terminal-ansiGreen",
+  "vscode-terminal-ansiYellow",
+  "vscode-terminal-ansiBlue",
+  "vscode-terminal-ansiMagenta",
+  "vscode-terminal-ansiCyan",
+  "vscode-terminal-ansiWhite",
+  "vscode-terminal-ansiBrightBlack",
+  "vscode-terminal-ansiBrightRed",
+  "vscode-terminal-ansiBrightGreen",
+  "vscode-terminal-ansiBrightYellow",
+  "vscode-terminal-ansiBrightBlue",
+  "vscode-terminal-ansiBrightMagenta",
+  "vscode-terminal-ansiBrightCyan",
+  "vscode-terminal-ansiBrightWhite",
+  "vscode-interactive-activeCodeBorder",
+  "vscode-interactive-inactiveCodeBorder",
+  "vscode-gitDecoration-addedResourceForeground",
+  "vscode-gitDecoration-modifiedResourceForeground",
+  "vscode-gitDecoration-deletedResourceForeground",
+  "vscode-gitDecoration-renamedResourceForeground",
+  "vscode-gitDecoration-untrackedResourceForeground",
+  "vscode-gitDecoration-ignoredResourceForeground",
+  "vscode-gitDecoration-stageModifiedResourceForeground",
+  "vscode-gitDecoration-stageDeletedResourceForeground",
+  "vscode-gitDecoration-conflictingResourceForeground",
+  "vscode-gitDecoration-submoduleResourceForeground",
+  "vscode-testExplorer-errorDecorationBackground",
+];
diff --git a/gui/src/util/navigation.ts b/gui/src/util/navigation.ts
index 2416226d8a..1884c6fb72 100644
--- a/gui/src/util/navigation.ts
+++ b/gui/src/util/navigation.ts
@@ -3,5 +3,6 @@ export const ROUTES = {
   HOME: "/",
   CONFIG_ERROR: "/config-error",
   MORE: "/more",
+  THEME: "/theme",
   // EXAMPLE_ROUTE_WITH_PARAMS: (params: ParamsType) => `/route/${params}`,
 };
diff --git a/gui/tailwind.config.cjs b/gui/tailwind.config.cjs
index c837eea756..5d58e7220a 100644
--- a/gui/tailwind.config.cjs
+++ b/gui/tailwind.config.cjs
@@ -25,37 +25,46 @@ module.exports = {
         "spin-slow": "spin 6s linear infinite",
       },
       colors: {
-        lightgray: "#999998",
-        "vsc-background": "rgb(var(--vsc-background) / <alpha-value>)",
-        "secondary-dark": "rgb(var(--secondary-dark) / <alpha-value>)",
+        // All vscode variables https://gist.github.com/estruyf/ba49203e1a7d6868e9320a4ea480c27a
+        // Examples for vscode https://github.com/githubocto/tailwind-vscode/blob/main/index.js
         "vsc-input-background": "var(--vscode-input-background, rgb(45 45 45))",
-        "vsc-quick-input-background":
-          "var(--vscode-quickInput-background, var(--vscode-input-background, rgb(45 45 45)))",
         "vsc-background": "var(--vscode-sideBar-background, rgb(30 30 30))",
         "vsc-foreground": "var(--vscode-editor-foreground, #fff)",
-        "vsc-button-background": "var(--vscode-button-background, #1bbe84)",
         "vsc-button-foreground": "var(--vscode-button-foreground, #ffffff)",
         "vsc-editor-background":
           "var(--vscode-editor-background, var(--vscode-sideBar-background, rgb(30 30 30)))",
         "vsc-list-active-background":
           "var(--vscode-list-activeSelectionBackground, #1bbe84)",
-        "vsc-focus-border": "var(--vscode-focus-border, #1bbe84)",
         "vsc-list-active-foreground":
           "var(--vscode-quickInputList-focusForeground, var(--vscode-editor-foreground))",
         "vsc-input-border": "var(--vscode-input-border, #999998)",
-        "vsc-input-border-focus": "var(--vscode-focusBorder, #999998)",
-        "vsc-badge-background": "var(--vscode-badge-background, #1bbe84)",
-        "vsc-badge-foreground": "var(--vscode-badge-foreground, #fff)",
-        "vsc-sidebar-border": "var(--vscode-sideBar-border, transparent)",
         "vsc-find-match":
           "var(--vscode-editor-findMatchBackground, rgba(255, 255, 0, 0.6))",
         "vsc-find-match-selected":
           "var(--vscode-editor-findMatchHighlightBackground, rgba(255, 223, 0, 0.8))",
-        "vsc-foreground-muted": "var(--vscode-foreground-muted, #999)",
-        "vsc-description-foreground":
-          "var(--vscode-descriptionForeground, #999)",
-        "vsc-input-placeholder-foreground":
-          "var(--vscode-input-placeholderForeground, #999)",
+        description: "var(--vscode-foreground-muted, #999)",
+
+        error: "var(--vscode-errorBackground, #f00)",
+        "error-foreground": "var(--vscode-errorForeground, #fff)",
+        border: "var(--vscode-sideBar-border, #999998)",
+        description: "var(--vscode-descriptionForeground, #999)",
+        success: "var(--vscode-testing-iconPassed, #1bbe84)",
+        warning: "var(--vscode-list-warningForeground, #ffab00)",
+        hover: "var(vscode-list-hoverBackground, #ffffff)",
+
+        // Removed these because unused for now and theming is sensitive
+
+        // "vsc-input-placeholder-foreground":
+        // "var(--vscode-input-placeholderForeground, #999)",
+        // "vsc-description-foreground": "var(--vscode-descriptionForeground, #999)",
+        // "vsc-focus-border": "var(--vscode-focus-border, #1bbe84)",
+        // "vsc-sidebar-border": "var(--vscode-sideBar-border, transparent)",
+        // "vsc-quick-input-background":
+        // "var(--vscode-quickInput-background, var(--vscode-input-background, rgb(45 45 45)))",
+        // "vsc-input-border-focus": "var(--vscode-focusBorder, #999998)",
+        // "vsc-button-background": "var(--vscode-button-background, #1bbe84)",
+        // "vsc-badge-background": "var(--vscode-badge-background, #1bbe84)",
+        // "vsc-badge-foreground": "var(--vscode-badge-foreground, #fff)",
       },
     },
   },
diff --git a/gui/vite.config.ts.timestamp-1736117228991-d8b5a5bce8bef.mjs b/gui/vite.config.ts.timestamp-1736117228991-d8b5a5bce8bef.mjs
new file mode 100644
index 0000000000..30c661fa74
--- /dev/null
+++ b/gui/vite.config.ts.timestamp-1736117228991-d8b5a5bce8bef.mjs
@@ -0,0 +1,27 @@
+// vite.config.ts
+import react from "file:///Users/dallin/Documents/code/continue/gui/node_modules/@vitejs/plugin-react-swc/index.mjs";
+import tailwindcss from "file:///Users/dallin/Documents/code/continue/gui/node_modules/tailwindcss/lib/index.js";
+import { defineConfig } from "file:///Users/dallin/Documents/code/continue/gui/node_modules/vitest/dist/config.js";
+var vite_config_default = defineConfig({
+  plugins: [react(), tailwindcss()],
+  build: {
+    // Change the output .js filename to not include a hash
+    rollupOptions: {
+      // external: ["vscode-webview"],
+      output: {
+        entryFileNames: `assets/[name].js`,
+        chunkFileNames: `assets/[name].js`,
+        assetFileNames: `assets/[name].[ext]`
+      }
+    }
+  },
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: "./src/util/test/setupTests.ts"
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvZGFsbGluL0RvY3VtZW50cy9jb2RlL2NvbnRpbnVlL2d1aVwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2RhbGxpbi9Eb2N1bWVudHMvY29kZS9jb250aW51ZS9ndWkvdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL1VzZXJzL2RhbGxpbi9Eb2N1bWVudHMvY29kZS9jb250aW51ZS9ndWkvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgcmVhY3QgZnJvbSBcIkB2aXRlanMvcGx1Z2luLXJlYWN0LXN3Y1wiO1xuaW1wb3J0IHRhaWx3aW5kY3NzIGZyb20gXCJ0YWlsd2luZGNzc1wiO1xuaW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSBcInZpdGVzdC9jb25maWdcIjtcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpLCB0YWlsd2luZGNzcygpXSxcbiAgYnVpbGQ6IHtcbiAgICAvLyBDaGFuZ2UgdGhlIG91dHB1dCAuanMgZmlsZW5hbWUgdG8gbm90IGluY2x1ZGUgYSBoYXNoXG4gICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgLy8gZXh0ZXJuYWw6IFtcInZzY29kZS13ZWJ2aWV3XCJdLFxuICAgICAgb3V0cHV0OiB7XG4gICAgICAgIGVudHJ5RmlsZU5hbWVzOiBgYXNzZXRzL1tuYW1lXS5qc2AsXG4gICAgICAgIGNodW5rRmlsZU5hbWVzOiBgYXNzZXRzL1tuYW1lXS5qc2AsXG4gICAgICAgIGFzc2V0RmlsZU5hbWVzOiBgYXNzZXRzL1tuYW1lXS5bZXh0XWAsXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG4gIHRlc3Q6IHtcbiAgICBnbG9iYWxzOiB0cnVlLFxuICAgIGVudmlyb25tZW50OiBcImpzZG9tXCIsXG4gICAgc2V0dXBGaWxlczogXCIuL3NyYy91dGlsL3Rlc3Qvc2V0dXBUZXN0cy50c1wiLFxuICB9LFxufSk7XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQTZTLE9BQU8sV0FBVztBQUMvVCxPQUFPLGlCQUFpQjtBQUN4QixTQUFTLG9CQUFvQjtBQUc3QixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxHQUFHLFlBQVksQ0FBQztBQUFBLEVBQ2hDLE9BQU87QUFBQTtBQUFBLElBRUwsZUFBZTtBQUFBO0FBQUEsTUFFYixRQUFRO0FBQUEsUUFDTixnQkFBZ0I7QUFBQSxRQUNoQixnQkFBZ0I7QUFBQSxRQUNoQixnQkFBZ0I7QUFBQSxNQUNsQjtBQUFBLElBQ0Y7QUFBQSxFQUNGO0FBQUEsRUFDQSxNQUFNO0FBQUEsSUFDSixTQUFTO0FBQUEsSUFDVCxhQUFhO0FBQUEsSUFDYixZQUFZO0FBQUEsRUFDZDtBQUNGLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==