feat: apply theme colors for the titlebar

related to podman-desktop#5914 Signed-off-by: Florent Benoit <[email protected]>
feloy · Feb 25, 2024 · 990281d · 990281d
1 parent f5b5d5d
commit 990281d
Showing 1 changed file with 4 additions and 5 deletions.
diff --git a/packages/renderer/src/lib/ui/TitleBar.svelte b/packages/renderer/src/lib/ui/TitleBar.svelte
@@ -14,9 +14,8 @@ onMount(async () => {
 
 <header
   id="navbar"
-  class="text-gray-700 {platform === 'win32'
-    ? 'bg-[#202020]'
-    : 'bg-charcoal-900'} body-font shadow-titlebar z-[999] relative {platform === 'win32'
+  class="{platform === 'win32' ? 'bg-[#202020]' : 'bg-[var(--pd-titlebar-bg)]'} body-font z-[999] relative {platform ===
+  'win32'
     ? 'min-h-[32px]'
     : 'min-h-[38px]'}"
   style="-webkit-app-region: drag;">
@@ -27,15 +26,15 @@ onMount(async () => {
         <div class="absolute left-[10px] top-[10px]">
           <DesktopIcon size="18" />
         </div>
-        <div class="flex flex-1 justify-center text-base select-none text-gray-400">{title}</div>
+        <div class="flex flex-1 justify-center text-base select-none text-[color:var(--pd-titlebar-text)]">{title}</div>
         <WindowControlButtons platform="{platform}" />
       </div>
     {:else if platform === 'win32'}
       <div class="flex flex-row pt-[10px] pb-[10px] items-center">
         <div class="absolute left-[7px] top-[7px]">
           <DesktopIcon size="18" />
         </div>
-        <div class="ml-[35px] text-left text-xs leading-3 text-gray-400">{title}</div>
+        <div class="ml-[35px] text-left text-xs leading-3 text-[color:var(--pd-titlebar-text)]">{title}</div>
         <WindowControlButtons platform="{platform}" />
       </div>
     {/if}