diff --git a/packages/renderer/src/lib/dialogs/QuickPickInput.svelte b/packages/renderer/src/lib/dialogs/QuickPickInput.svelte
index 8f408c3c6..6b25badbf 100644
--- a/packages/renderer/src/lib/dialogs/QuickPickInput.svelte
+++ b/packages/renderer/src/lib/dialogs/QuickPickInput.svelte
@@ -292,7 +292,7 @@ function handleKeydown(e: KeyboardEvent) {
         {#if title}
           <div
             aria-label="title"
-            class="w-full bg-charcoal-600 rounded-sm text-center max-w-[700px] truncate cursor-default">
+            class="w-full bg-[var(--pd-input-field-focused-bg)] rounded-sm text-[var(--pd-input-select-hover-text)] text-center max-w-[700px] truncate cursor-default">
             {title}
           </div>
         {/if}
@@ -302,9 +302,9 @@ function handleKeydown(e: KeyboardEvent) {
               bind:this={inputElement}
               on:input={event => onInputChange(event)}
               bind:value={inputValue}
-              class="px-1 w-full h-20 text-gray-400 bg-zinc-700 border {validationError
+              class="px-1 w-full h-20 text-[var(--pd-input-select-hover-text)] border {validationError
                 ? 'border-red-700'
-                : 'border-charcoal-600'} focus:outline-none"
+                : 'bg-[var(--pd-input-field-focused-bg)] border-[var(--pd-input-field-focused-bg)]'} focus:outline-none"
               placeholder={placeHolder}></textarea>
           {:else}
             <input
@@ -312,9 +312,9 @@ function handleKeydown(e: KeyboardEvent) {
               on:input={event => onInputChange(event)}
               type="text"
               bind:value={inputValue}
-              class="px-1 w-full text-gray-400 bg-zinc-700 border {validationError
+              class="px-1 w-full text-[var(--pd-input-select-hover-text)] border {validationError
                 ? 'border-red-700'
-                : 'border-charcoal-600'} focus:outline-none"
+                : 'bg-[var(--pd-input-field-focused-bg)] border-[var(--pd-input-field-focused-bg)]'} focus:outline-none"
               placeholder={placeHolder} />
           {/if}
           {#if quickPickCanPickMany}
@@ -324,40 +324,41 @@ function handleKeydown(e: KeyboardEvent) {
 
         {#if mode === 'InputBox'}
           {#if validationError}
-            <div class="text-gray-400 border border-red-700 relative w-full bg-red-700 px-1">{validationError}</div>
+            <div class="text-[var(--pd-modal-dropdown-text)] border border-red-700 relative w-full bg-red-700 px-1">
+              {validationError}
+            </div>
           {:else}
-            <div class="relative text-gray-400 pt-2 px-1 h-7 overflow-y-auto">{prompt}</div>
+            <div class="relative text-[var(--pd-modal-dropdown-text)] pt-2 px-1 h-7 overflow-y-auto">
+              {prompt}
+            </div>
             {#if markdownDescription && markdownDescription.length > 0}
-              <div class="relative text-gray-400 pt-2 px-1 h-fit overflow-y-auto">
+              <div class="relative text-[var(--pd-modal-dropdown-text)] pt-2 px-1 h-fit overflow-y-auto">
                 <Markdown markdown={markdownDescription} />
               </div>
             {/if}
           {/if}
         {:else if mode === 'QuickPick'}
           {#each quickPickFilteredItems as item, i}
-            <div
-              class="flex w-full flex-row {i === quickPickSelectedFilteredIndex
-                ? 'bg-purple-500'
-                : 'hover:bg-charcoal-600'} ">
+            <div class="flex w-full flex-row hover:bg-[var(--pd-modal-dropdown-highlight)]">
               {#if quickPickCanPickMany}
                 <Checkbox class="mx-1 my-auto" bind:checked={item.checkbox} />
               {/if}
               <button
                 on:click={() => clickQuickPickItem(item, i)}
-                class="text-gray-400 text-left relative my-1 w-full {i === quickPickSelectedFilteredIndex
-                  ? 'bg-purple-500'
-                  : ''} px-1">
+                class="text-[var(--pd-modal-dropdown-text)] text-left relative my-1 w-full px-1">
                 <div class="flex flex-col w-full">
                   <!-- first row is Value + optional description-->
                   <div class="flex flex-row w-full max-w-[700px] truncate">
                     <div class="font-bold">{item.value}</div>
                     {#if item.description}
-                      <div class="text-gray-400 text-xs ml-2">{item.description}</div>
+                      <div class="text-[var(--pd-modal-dropdown-text)] text-xs ml-2">{item.description}</div>
                     {/if}
                   </div>
                   <!-- second row is optional detail -->
                   {#if item.detail}
-                    <div class="w-full max-w-[700px] truncate text-gray-400 text-xs">{item.detail}</div>
+                    <div class="w-full max-w-[700px] truncate text-[var(--pd-modal-dropdown-text)] text-xs">
+                      {item.detail}
+                    </div>
                   {/if}
                 </div>
               </button>