diff --git a/packages/main/src/plugin/color-registry.ts b/packages/main/src/plugin/color-registry.ts
index af001361f637f..80578d17b271a 100644
--- a/packages/main/src/plugin/color-registry.ts
+++ b/packages/main/src/plugin/color-registry.ts
@@ -202,6 +202,7 @@ export class ColorRegistry {
     this.initSecondaryNav();
     this.initTitlebar();
     this.initInvertContent();
+    this.initInputBox();
   }
 
   protected initGlobalNav(): void {
@@ -365,4 +366,75 @@ export class ColorRegistry {
       light: colorPalette.purple[600],
     });
   }
+
+  // input boxes
+  protected initInputBox(): void {
+    const sNav = 'input-field-';
+
+    this.registerColor(`${sNav}focused-bg`, {
+      dark: colorPalette.charcoal[900],
+      light: colorPalette.gray[100],
+    });
+
+    this.registerColor(`${sNav}disabled-bg`, {
+      dark: colorPalette.charcoal[900],
+      light: colorPalette.charcoal[900],
+    });
+    this.registerColor(`${sNav}hover-bg`, {
+      dark: colorPalette.charcoal[900],
+      light: colorPalette.gray[100],
+    });
+    this.registerColor(`${sNav}focused-text`, {
+      dark: colorPalette.white,
+      light: colorPalette.gray[900],
+    });
+    this.registerColor(`${sNav}error-text`, {
+      dark: colorPalette.red[500],
+      light: colorPalette.red[500],
+    });
+    this.registerColor(`${sNav}disabled-text`, {
+      dark: colorPalette.gray[900],
+      light: colorPalette.gray[900],
+    });
+    this.registerColor(`${sNav}hover-text`, {
+      dark: colorPalette.gray[900],
+      light: colorPalette.gray[900],
+    });
+    this.registerColor(`${sNav}placeholder-text`, {
+      dark: colorPalette.gray[900],
+      light: colorPalette.gray[900],
+    });
+    this.registerColor(`${sNav}stroke`, {
+      dark: colorPalette.purple[500],
+      light: colorPalette.purple[600],
+    });
+    this.registerColor(`${sNav}hover-stroke`, {
+      dark: colorPalette.purple[400],
+      light: colorPalette.purple[400],
+    });
+    this.registerColor(`${sNav}stroke-error`, {
+      dark: colorPalette.red[500],
+      light: colorPalette.red[500],
+    });
+    this.registerColor(`${sNav}stroke-readonly`, {
+      dark: colorPalette.charcoal[100],
+      light: colorPalette.charcoal[100],
+    });
+    this.registerColor(`${sNav}icon`, {
+      dark: colorPalette.gray[500],
+      light: colorPalette.gray[500],
+    });
+    this.registerColor(`${sNav}focused-icon`, {
+      dark: colorPalette.gray[500],
+      light: colorPalette.gray[500],
+    });
+    this.registerColor(`${sNav}disabled-icon`, {
+      dark: colorPalette.gray[500],
+      light: colorPalette.gray[500],
+    });
+    this.registerColor(`${sNav}hover-icon`, {
+      dark: colorPalette.gray[500],
+      light: colorPalette.gray[500],
+    });
+  }
 }
diff --git a/packages/renderer/src/lib/ui/Input.spec.ts b/packages/renderer/src/lib/ui/Input.spec.ts
index c54d32eb7e850..c2fc3fff28779 100644
--- a/packages/renderer/src/lib/ui/Input.spec.ts
+++ b/packages/renderer/src/lib/ui/Input.spec.ts
@@ -53,20 +53,20 @@ test('Expect basic styling', async () => {
   expect(element).toHaveClass('outline-0');
   expect(element).toHaveClass('bg-transparent');
   expect(element).toHaveClass('text-sm');
-  expect(element).toHaveClass('text-white');
+  expect(element).toHaveClass('text-[color:var(--pd-input-field-focused-text)]');
 
-  expect(element).toHaveClass('group-hover:bg-charcoal-900');
-  expect(element).toHaveClass('group-focus-within:bg-charcoal-900');
-  expect(element).toHaveClass('group-hover-placeholder:text-gray-900');
+  expect(element).toHaveClass('group-hover:bg-[var(--pd-input-field-hover-bg)]');
+  expect(element).toHaveClass('group-focus-within:bg-[var(--pd-input-field-hover-bg)]');
+  expect(element).toHaveClass('group-hover-placeholder:text-[color:var(--pd-input-field-placeholder-text)]');
 
   expect(element.parentElement).toBeInTheDocument();
   expect(element.parentElement).toHaveClass('bg-transparent');
   expect(element.parentElement).toHaveClass('border-[1px]');
   expect(element.parentElement).toHaveClass('border-transparent');
 
-  expect(element.parentElement).toHaveClass('hover:bg-charcoal-900');
+  expect(element.parentElement).toHaveClass('hover:bg-[var(--pd-input-field-hover-bg)]');
   expect(element.parentElement).toHaveClass('hover:rounded-md');
-  expect(element.parentElement).toHaveClass('hover:border-purple-400');
+  expect(element.parentElement).toHaveClass('hover:border-[var(--pd-input-field-stroke)]');
 });
 
 test('Expect basic readonly styling', async () => {
@@ -79,21 +79,21 @@ test('Expect basic readonly styling', async () => {
   expect(element).toHaveClass('outline-0');
   expect(element).toHaveClass('bg-transparent');
   expect(element).toHaveClass('text-sm');
-  expect(element).toHaveClass('text-white');
+  expect(element).toHaveClass('text-[color:var(--pd-input-field-focused-text)]');
 
-  expect(element).not.toHaveClass('group-hover:bg-charcoal-900');
-  expect(element).not.toHaveClass('group-focus-within:bg-charcoal-900');
-  expect(element).not.toHaveClass('group-hover-placeholder:text-gray-900');
+  expect(element).not.toHaveClass('group-hover:bg-[var(--pd-input-field-hover-bg)]');
+  expect(element).not.toHaveClass('group-focus-within:bg-[var(--pd-input-field-hover-bg)]');
+  expect(element).not.toHaveClass('group-hover-placeholder:text-[color:var(--pd-input-field-placeholder-text)]');
 
   expect(element.parentElement).toBeInTheDocument();
   expect(element.parentElement).toHaveClass('bg-transparent');
   expect(element.parentElement).toHaveClass('border-[1px]');
   expect(element.parentElement).toHaveClass('border-transparent');
-  expect(element.parentElement).toHaveClass('border-b-charcoal-100');
+  expect(element.parentElement).toHaveClass('border-b-[var(--pd-input-field-stroke-readonly)]');
 
-  expect(element.parentElement).not.toHaveClass('hover:bg-charcoal-900');
+  expect(element.parentElement).not.toHaveClass('hover:bg-[var(--pd-input-field-hover-bg)]');
   expect(element.parentElement).not.toHaveClass('hover:rounded-md');
-  expect(element.parentElement).not.toHaveClass('hover:border-purple-400');
+  expect(element.parentElement).not.toHaveClass('hover:border-[var(--pd-input-field-stroke)]');
 });
 
 test('Expect basic disabled styling', async () => {
@@ -106,21 +106,21 @@ test('Expect basic disabled styling', async () => {
   expect(element).toHaveClass('outline-0');
   expect(element).toHaveClass('bg-transparent');
   expect(element).toHaveClass('text-sm');
-  expect(element).toHaveClass('text-gray-700');
+  expect(element).toHaveClass('text-[color:var(--pd-input-field-disabled-text)]');
 
-  expect(element).not.toHaveClass('group-hover:bg-charcoal-900');
-  expect(element).not.toHaveClass('group-focus-within:bg-charcoal-900');
-  expect(element).not.toHaveClass('group-hover-placeholder:text-gray-900');
+  expect(element).not.toHaveClass('group-hover:bg-[var(--pd-input-field-hover-bg)]');
+  expect(element).not.toHaveClass('group-focus-within:bg-[var(--pd-input-field-hover-bg)]');
+  expect(element).not.toHaveClass('group-hover-placeholder:text-[color:var(--pd-input-field-placeholder-text)]');
 
   expect(element.parentElement).toBeInTheDocument();
   expect(element.parentElement).toHaveClass('bg-transparent');
   expect(element.parentElement).toHaveClass('border-[1px]');
   expect(element.parentElement).toHaveClass('border-transparent');
-  expect(element.parentElement).toHaveClass('border-b-charcoal-100');
+  expect(element.parentElement).toHaveClass('border-b-[var(--pd-input-field-stroke-readonly)]');
 
-  expect(element.parentElement).not.toHaveClass('hover:bg-charcoal-900');
+  expect(element.parentElement).not.toHaveClass('hover:bg-[var(--pd-input-field-hover-bg)]');
   expect(element.parentElement).not.toHaveClass('hover:rounded-md');
-  expect(element.parentElement).not.toHaveClass('hover:border-purple-400');
+  expect(element.parentElement).not.toHaveClass('hover:border-[var(--pd-input-field-stroke)]');
 });
 
 test('Expect clear styling', async () => {
@@ -143,9 +143,9 @@ test('Expect basic error styling', async () => {
 
   expect(element.parentElement).toBeInTheDocument();
   expect(element.parentElement).toHaveClass('border-[1px]');
-  expect(element.parentElement).toHaveClass('border-b-red-500');
+  expect(element.parentElement).toHaveClass('border-b-[var(--pd-input-field-stroke-error)]');
 
-  expect(element.parentElement).not.toHaveClass('hover:border-red-500');
+  expect(element.parentElement).not.toHaveClass('hover:border-[var(--pd-input-field-stroke)]');
 
   const err = screen.getByText(error);
   expect(err).toBeInTheDocument();
diff --git a/packages/renderer/src/lib/ui/Input.svelte b/packages/renderer/src/lib/ui/Input.svelte
index 7b5252aaf986a..0f40a564b4648 100644
--- a/packages/renderer/src/lib/ui/Input.svelte
+++ b/packages/renderer/src/lib/ui/Input.svelte
@@ -37,27 +37,27 @@ async function onClear() {
   <div
     class="flex flex-row w-full items-center px-1 py-1 group bg-transparent border-[1px] border-transparent {$$props.class ||
       ''}"
-    class:hover:bg-charcoal-900="{enabled}"
-    class:focus-within:bg-charcoal-900="{enabled}"
+    class:hover:bg-[var(--pd-input-field-hover-bg)]="{enabled}"
+    class:focus-within:bg-[var(--pd-input-field-focused-bg)]="{enabled}"
     class:hover:rounded-md="{enabled}"
     class:focus-within:rounded-md="{enabled}"
-    class:border-b-purple-500="{enabled && !error}"
-    class:border-b-red-500="{enabled && error}"
-    class:hover:border-purple-400="{enabled && !error}"
-    class:hover:border-red-400="{enabled && error}"
-    class:focus-within:border-purple-500="{enabled && !error}"
-    class:focus-within:border-red-500="{enabled && error}"
-    class:border-b-charcoal-100="{readonly || disabled}">
+    class:border-b-[var(--pd-input-field-stroke)]="{enabled && !error}"
+    class:border-b-[var(--pd-input-field-stroke-error)]="{enabled && error}"
+    class:hover:border-[var(--pd-input-field-stroke)]="{enabled && !error}"
+    class:hover:border-[var(--pd-input-field-stroke-error)]="{enabled && error}"
+    class:focus-within:border-[var(--pd-input-field-stroke)]="{enabled && !error}"
+    class:focus-within:border-[var(--pd-input-field-stroke-error)]="{enabled && error}"
+    class:border-b-[var(--pd-input-field-stroke-readonly)]="{readonly || disabled}">
     <slot name="left" />
     <input
       bind:this="{element}"
       on:input
-      class="grow px-1 outline-0 text-sm bg-transparent placeholder:text-gray-700 overflow-hidden"
-      class:text-white="{!disabled}"
-      class:text-gray-700="{disabled}"
-      class:group-hover:bg-charcoal-900="{enabled}"
-      class:group-focus-within:bg-charcoal-900="{enabled}"
-      class:group-hover-placeholder:text-gray-900="{enabled}"
+      class="grow px-1 outline-0 text-sm bg-transparent placeholder:text-[color:var(--pd-input-field-placeholder-text)] overflow-hidden"
+      class:text-[color:var(--pd-input-field-focused-text)]="{!disabled}"
+      class:text-[color:var(--pd-input-field-disabled-text)]="{disabled}"
+      class:group-hover:bg-[var(--pd-input-field-hover-bg)]="{enabled}"
+      class:group-focus-within:bg-[var(--pd-input-field-hover-bg)]="{enabled}"
+      class:group-hover-placeholder:text-[color:var(--pd-input-field-placeholder-text)]="{enabled}"
       name="{name}"
       type="text"
       disabled="{disabled}"
@@ -69,13 +69,13 @@ async function onClear() {
       aria-invalid="{$$props['aria-invalid']}"
       bind:value="{value}" />
     {#if error}
-      <span class="px-1 text-red-500" aria-label="error">
+      <span class="px-1 text-[color:var(--pd-input-field-error-text)]" aria-label="error">
         <Fa icon="{faCircleExclamation}" />
       </span>
     {/if}
     {#if clearable}
       <button
-        class="px-1 cursor-pointer text-gray-700 group-hover:text-gray-900 group-focus-within:text-gray-900"
+        class="px-1 cursor-pointer text-[color:var(--pd-input-field-icon)] group-hover:text-[color:var(--pd-input-field-hover-icon)] group-focus-within:text-[color:var(--pd-input-field-focused-icon)]"
         class:hidden="{!value || readonly || disabled}"
         aria-label="clear"
         on:click="{onClear}">
@@ -85,6 +85,6 @@ async function onClear() {
     <slot name="right" />
   </div>
   {#if error && error.length > 0}
-    <span class="text-sm text-red-500">{error}</span>
+    <span class="text-sm text-[color:var(--pd-input-field-error-text)]">{error}</span>
   {/if}
 </div>