refactor: text-primary (#22141)

web/src/lib/components/admin-settings/StorageTemplateSettings.svelte

@@ -163,7 +163,7 @@
       {#if config.storageTemplate.enabled}
         <hr />
 
-        <h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">{$t('variables')}</h3>
+        <h3 class="text-base font-medium text-primary">{$t('variables')}</h3>
 
         <section class="support-date">
           {#await getSupportDateTimeFormat()}
@@ -180,7 +180,7 @@
         </section>
 
         <div class="flex flex-col mt-4">
-          <h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">{$t('template')}</h3>
+          <h3 class="text-base font-medium text-primary">{$t('template')}</h3>
 
           <div class="my-2 text-sm">
             <h4 class="uppercase">{$t('preview')}</h4>
@@ -192,7 +192,7 @@
               values={{ length: parsedTemplate().length + $user.id.length + 'UPLOAD_LOCATION'.length, limit: 260 }}
             >
               {#snippet children({ message })}
-                <span class="font-semibold text-immich-primary dark:text-immich-dark-primary">{message}</span>
+                <span class="font-semibold text-primary">{message}</span>
               {/snippet}
             </FormatMessage>
           </p>
@@ -200,7 +200,7 @@
           <p class="text-sm">
             <FormatMessage key="admin.storage_template_user_label" values={{ label: $user.storageLabel || $user.id }}>
               {#snippet children({ message })}
-                <code class="text-immich-primary dark:text-immich-dark-primary">{message}</code>
+                <code class="text-primary">{message}</code>
               {/snippet}
             </FormatMessage>
           </p>
@@ -214,10 +214,7 @@
           <form autocomplete="off" class="flex flex-col" onsubmit={preventDefault(bubble('submit'))}>
             <div class="flex flex-col my-2">
               {#if templateOptions}
-                <label
-                  class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm"
-                  for="preset-select"
-                >
+                <label class="font-medium text-primary text-sm" for="preset-select">
                   {$t('preset')}
                 </label>
                 <select
@@ -257,7 +254,7 @@
 
             {#if !minified}
               <div id="migration-info" class="mt-2 text-sm">
-                <h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">{$t('notes')}</h3>
+                <h3 class="text-base font-medium text-primary">{$t('notes')}</h3>
                 <section class="flex flex-col gap-2">
                   <p>
                     <FormatMessage
@@ -265,7 +262,7 @@
                       values={{ job: $t('admin.storage_template_migration_job') }}
                     >
                       {#snippet children({ message })}
-                        <a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary">
+                        <a href={AppRoute.ADMIN_JOBS} class="text-primary">
                           {message}
                         </a>
                       {/snippet}

web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte

@@ -27,7 +27,7 @@
   </div>
   <div class="flex gap-[40px]">
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('year')}</p>
+      <p class="uppercase font-medium text-primary">{$t('year')}</p>
       <ul>
         {#each options.yearOptions as yearFormat, index (index)}
           <li>{'{{'}{yearFormat}{'}}'} - {getLuxonExample(yearFormat)}</li>
@@ -36,7 +36,7 @@
     </div>
 
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('month')}</p>
+      <p class="uppercase font-medium text-primary">{$t('month')}</p>
       <ul>
         {#each options.monthOptions as monthFormat, index (index)}
           <li>{'{{'}{monthFormat}{'}}'} - {getLuxonExample(monthFormat)}</li>
@@ -45,7 +45,7 @@
     </div>
 
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('week')}</p>
+      <p class="uppercase font-medium text-primary">{$t('week')}</p>
       <ul>
         {#each options.weekOptions as weekFormat, index (index)}
           <li>{'{{'}{weekFormat}{'}}'} - {getLuxonExample(weekFormat)}</li>
@@ -54,7 +54,7 @@
     </div>
 
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('day')}</p>
+      <p class="uppercase font-medium text-primary">{$t('day')}</p>
       <ul>
         {#each options.dayOptions as dayFormat, index (index)}
           <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
@@ -63,7 +63,7 @@
     </div>
 
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('hour')}</p>
+      <p class="uppercase font-medium text-primary">{$t('hour')}</p>
       <ul>
         {#each options.hourOptions as dayFormat, index (index)}
           <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
@@ -72,7 +72,7 @@
     </div>
 
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('minute')}</p>
+      <p class="uppercase font-medium text-primary">{$t('minute')}</p>
       <ul>
         {#each options.minuteOptions as dayFormat, index (index)}
           <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
@@ -81,7 +81,7 @@
     </div>
 
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('second')}</p>
+      <p class="uppercase font-medium text-primary">{$t('second')}</p>
       <ul>
         {#each options.secondOptions as dayFormat, index (index)}
           <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>

web/src/lib/components/admin-settings/SupportedVariablesPanel.svelte

@@ -9,7 +9,7 @@
 <div class="p-4 mt-2 text-xs bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-immich-dark-fg">
   <div class="flex gap-[50px]">
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('filename')}</p>
+      <p class="uppercase font-medium text-primary">{$t('filename')}</p>
       <ul>
         <li>{`{{filename}}`} - IMG_123</li>
         <li>{`{{ext}}`} - jpg</li>
@@ -17,14 +17,14 @@
     </div>
 
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('filetype')}</p>
+      <p class="uppercase font-medium text-primary">{$t('filetype')}</p>
       <ul>
         <li>{`{{filetype}}`} - VID or IMG</li>
         <li>{`{{filetypefull}}`} - VIDEO or IMAGE</li>
       </ul>
     </div>
     <div>
-      <p class="uppercase font-medium text-immich-primary dark:text-immich-dark-primary">{$t('other')}</p>
+      <p class="uppercase font-medium text-primary">{$t('other')}</p>
       <ul>
         <li>{`{{assetId}}`} - Asset ID</li>
         <li>{`{{assetIdShort}}`} - Asset ID (last 12 characters)</li>

web/src/lib/components/album-page/album-card-group.svelte

@@ -48,7 +48,7 @@
     <button
       type="button"
       onclick={() => toggleAlbumGroupCollapsing(group.id)}
-      class="w-full text-start mt-2 pt-2 pe-2 pb-2 rounded-md transition-colors cursor-pointer dark:text-immich-dark-fg hover:text-immich-primary dark:hover:text-immich-dark-primary hover:bg-subtle dark:hover:bg-immich-dark-gray"
+      class="w-full text-start mt-2 pt-2 pe-2 pb-2 rounded-md transition-colors cursor-pointer dark:text-immich-dark-fg hover:text-primary hover:bg-subtle dark:hover:bg-immich-dark-gray"
       aria-expanded={!isCollapsed}
     >
       <Icon icon={mdiChevronRight} size="24" class="inline-block -mt-2.5 transition-all duration-250 {iconRotation}" />

web/src/lib/components/album-page/album-card.svelte

@@ -60,7 +60,7 @@
 
   <div class="mt-4">
     <p
-      class="w-full leading-6 text-lg line-clamp-2 font-semibold text-black dark:text-white group-hover:text-immich-primary dark:group-hover:text-immich-dark-primary"
+      class="w-full leading-6 text-lg line-clamp-2 font-semibold text-black dark:text-white group-hover:text-primary"
       data-testid="album-name"
       title={album.albumName}
     >

web/src/lib/components/album-page/album-title.svelte

@@ -38,7 +38,7 @@
 <input
   use:shortcut={{ shortcut: { key: 'Enter' }, onShortcut: (e) => e.currentTarget.blur() }}
   onblur={handleUpdateName}
-  class="w-[99%] mb-2 border-b-2 border-transparent text-2xl md:text-4xl lg:text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary {isOwned
+  class="w-[99%] mb-2 border-b-2 border-transparent text-2xl md:text-4xl lg:text-6xl text-primary outline-none transition-all {isOwned
     ? 'hover:border-gray-400'
     : 'hover:border-transparent'} focus:border-b-2 focus:border-immich-primary focus:outline-none bg-light dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray placeholder:text-primary/90"
   type="text"

web/src/lib/components/album-page/album-viewer.svelte

@@ -64,9 +64,7 @@
   <Timeline enableRouting={true} {album} {timelineManager} {assetInteraction}>
     <section class="pt-8 md:pt-24 px-2 md:px-0">
       <!-- ALBUM TITLE -->
-      <h1
-        class="text-2xl md:text-4xl lg:text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary"
-      >
+      <h1 class="text-2xl md:text-4xl lg:text-6xl text-primary outline-none transition-all">
         {album.albumName}
       </h1>
 

web/src/lib/components/album-page/albums-table.svelte

@@ -26,7 +26,7 @@
 
 <table class="mt-2 w-full text-start">
   <thead
-    class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
+    class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
   >
     <tr class="flex w-full place-items-center p-2 md:p-5">
       {#each sortOptionsMetadata as option, index (index)}

web/src/lib/components/asset-viewer/detail-panel-location.svelte

@@ -40,8 +40,7 @@
     class="flex w-full text-start justify-between place-items-start gap-4 py-4"
     onclick={() => (isOwner ? (isShowChangeLocation = true) : null)}
     title={isOwner ? $t('edit_location') : ''}
-    class:hover:dark:text-immich-dark-primary={isOwner}
-    class:hover:text-immich-primary={isOwner}
+    class:hover:text-primary={isOwner}
   >
     <div class="flex gap-4">
       <div><Icon icon={mdiMapMarkerOutline} size="24" /></div>
@@ -72,7 +71,7 @@
 {:else if !asset.exifInfo?.city && isOwner}
   <button
     type="button"
-    class="flex w-full text-start justify-between place-items-start gap-4 py-4 rounded-lg hover:dark:text-immich-dark-primary hover:text-immich-primary"
+    class="flex w-full text-start justify-between place-items-start gap-4 py-4 rounded-lg hover:text-primary"
     onclick={() => (isShowChangeLocation = true)}
     title={$t('add_location')}
   >

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -279,8 +279,7 @@
         class="flex w-full text-start justify-between place-items-start gap-4 py-4"
         onclick={() => (isOwner ? (isShowChangeDate = true) : null)}
         title={isOwner ? $t('edit_date') : ''}
-        class:hover:dark:text-immich-dark-primary={isOwner}
-        class:hover:text-immich-primary={isOwner}
+        class:hover:text-primary={isOwner}
       >
         <div class="flex gap-4">
           <div>
@@ -362,10 +361,7 @@
           {/if}
         </p>
         {#if showAssetPath}
-          <p
-            class="text-xs opacity-50 break-all pb-2 hover:dark:text-immich-dark-primary hover:text-immich-primary"
-            transition:slide={{ duration: 250 }}
-          >
+          <p class="text-xs opacity-50 break-all pb-2 hover:text-primary" transition:slide={{ duration: 250 }}>
             <a href={getAssetFolderHref(asset)} title={$t('go_to_folder')} class="whitespace-pre-wrap">
               {asset.originalPath}
             </a>
@@ -403,7 +399,7 @@
                   ...(asset.exifInfo?.model ? { model: asset.exifInfo.model } : {}),
                 })}"
                 title="{$t('search_for')} {asset.exifInfo.make || ''} {asset.exifInfo.model || ''}"
-                class="hover:dark:text-immich-dark-primary hover:text-immich-primary"
+                class="hover:text-primary"
               >
                 {asset.exifInfo.make || ''}
                 {asset.exifInfo.model || ''}
@@ -417,7 +413,7 @@
                 <a
                   href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ lensModel: asset.exifInfo.lensModel })}"
                   title="{$t('search_for')} {asset.exifInfo.lensModel}"
-                  class="hover:dark:text-immich-dark-primary hover:text-immich-primary line-clamp-1"
+                  class="hover:text-primary line-clamp-1"
                 >
                   {asset.exifInfo.lensModel}
                 </a>

web/src/lib/components/jobs/JobTile.svelte

@@ -63,7 +63,7 @@
       <JobTileStatus color="success">{$t('active')}</JobTileStatus>
     {/if}
     <div class="flex flex-col gap-2 p-5 sm:p-7 md:p-9">
-      <div class="flex items-center gap-4 text-xl font-semibold text-immich-primary dark:text-immich-dark-primary">
+      <div class="flex items-center gap-4 text-xl font-semibold text-primary">
         <span class="flex items-center gap-2">
           <Icon {icon} size="1.25em" class="hidden shrink-0 sm:block" />
           <span class="uppercase">{title}</span>

web/src/lib/components/jobs/StorageMigrationDescription.svelte

@@ -11,7 +11,7 @@
   {#snippet children({ message })}
     <a
       href="{AppRoute.ADMIN_SETTINGS}?{QueryParameter.IS_OPEN}={OpenSettingQueryParameterValue.STORAGE_TEMPLATE}"
-      class="text-immich-primary dark:text-immich-dark-primary"
+      class="text-primary"
     >
       {message}
     </a>

web/src/lib/components/layouts/ErrorLayout.svelte

@@ -36,7 +36,7 @@
       >
         <div>
           <div class="flex items-center justify-between gap-4 px-4 py-4">
-            <h1 class="font-medium text-immich-primary dark:text-immich-dark-primary">
+            <h1 class="font-medium text-primary">
               🚨 {$t('error_title')}
             </h1>
             <div class="flex justify-end">

web/src/lib/components/onboarding-page/onboarding-card.svelte

@@ -36,10 +36,10 @@
   {#if title || icon}
     <div class="flex gap-2 items-center justify-center w-fit">
       {#if icon}
-        <Icon {icon} size="30" class="text-immich-primary dark:text-immich-dark-primary" />
+        <Icon {icon} size="30" class="text-primary" />
       {/if}
       {#if title}
-        <p class="uppercase text-xl text-immich-primary dark:text-immich-dark-primary">
+        <p class="uppercase text-xl text-primary">
           {title}
         </p>
       {/if}

web/src/lib/components/onboarding-page/onboarding-hello.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
   import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
-  import { user } from '$lib/stores/user.store';
-  import { t } from 'svelte-i18n';
   import { OnboardingRole } from '$lib/models/onboarding-role';
   import { serverConfig } from '$lib/stores/server-config.store';
+  import { user } from '$lib/stores/user.store';
+  import { t } from 'svelte-i18n';
 
   let userRole = $derived($user.isAdmin && !$serverConfig.isOnboarded ? OnboardingRole.SERVER : OnboardingRole.USER);
 </script>
 
 <div class="gap-4">
   <ImmichLogo noText class="h-[100px] mb-2" />
-  <p class="font-medium mb-6 text-6xl text-immich-primary dark:text-immich-dark-primary">
+  <p class="font-medium mb-6 text-6xl text-primary">
     {$t('onboarding_welcome_user', { values: { user: $user.name } })}
   </p>
   <p class="text-3xl pb-6 font-light">

web/src/lib/components/pages/SharedLinkErrorPage.svelte

@@ -7,7 +7,7 @@
 </svelte:head>
 
 <section class="flex flex-col px-4 h-dvh w-dvw place-content-center place-items-center">
-  <h1 class="py-10 text-4xl text-immich-primary dark:text-immich-dark-primary">Page not found :/</h1>
+  <h1 class="py-10 text-4xl text-primary">Page not found :/</h1>
   {#if page.error?.message}
     <h2 class="text-xl text-immich-fg dark:text-immich-dark-fg">{page.error.message}</h2>
   {/if}

web/src/lib/components/pages/SharedLinkPage.svelte

@@ -72,8 +72,8 @@
     class="relative h-dvh overflow-hidden px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height) sm:px-12 md:px-24 lg:px-40"
   >
     <div class="flex flex-col items-center justify-center mt-20">
-      <div class="text-2xl font-bold text-immich-primary dark:text-immich-dark-primary">{$t('password_required')}</div>
-      <div class="mt-4 text-lg text-immich-primary dark:text-immich-dark-primary">
+      <div class="text-2xl font-bold text-primary">{$t('password_required')}</div>
+      <div class="mt-4 text-lg text-primary">
         {$t('sharing_enter_password')}
       </div>
       <div class="mt-4">

web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte

@@ -46,38 +46,38 @@
     <div class="mt-5 flex lg:hidden">
       <div class="flex flex-col justify-between rounded-3xl bg-subtle p-5 dark:bg-immich-dark-gray">
         <div class="flex flex-wrap gap-x-12">
-          <div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
+          <div class="flex place-items-center gap-4 text-primary">
             <Icon icon={mdiCameraIris} size="25" />
             <p class="uppercase">{$t('photos')}</p>
           </div>
 
           <div class="relative text-center font-mono text-2xl font-semibold">
-            <span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.photos)}</span><span
-              class="text-immich-primary dark:text-immich-dark-primary">{stats.photos}</span
+            <span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.photos)}</span><span class="text-primary"
+              >{stats.photos}</span
             >
           </div>
         </div>
         <div class="flex flex-wrap gap-x-12">
-          <div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
+          <div class="flex place-items-center gap-4 text-primary">
             <Icon icon={mdiPlayCircle} size="25" />
             <p class="uppercase">{$t('videos')}</p>
           </div>
 
           <div class="relative text-center font-mono text-2xl font-semibold">
-            <span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.videos)}</span><span
-              class="text-immich-primary dark:text-immich-dark-primary">{stats.videos}</span
+            <span class="text-[#DCDADA] dark:text-[#525252]">{zeros(stats.videos)}</span><span class="text-primary"
+              >{stats.videos}</span
             >
           </div>
         </div>
         <div class="flex flex-wrap gap-x-7">
-          <div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
+          <div class="flex place-items-center gap-4 text-primary">
             <Icon icon={mdiChartPie} size="25" />
             <p class="uppercase">{$t('storage')}</p>
           </div>
 
           <div class="relative flex text-center font-mono text-2xl font-semibold">
-            <span class="text-[#DCDADA] dark:text-[#525252]">{zeros(statsUsage)}</span><span
-              class="text-immich-primary dark:text-immich-dark-primary">{statsUsage}</span
+            <span class="text-[#DCDADA] dark:text-[#525252]">{zeros(statsUsage)}</span><span class="text-primary"
+              >{statsUsage}</span
             >
             <span class="my-auto ms-2 text-center text-base font-light text-gray-400">{statsUsageUnit}</span>
           </div>
@@ -90,7 +90,7 @@
     <p class="text-sm dark:text-immich-dark-fg uppercase">{$t('user_usage_detail')}</p>
     <table class="mt-5 w-full text-start">
       <thead
-        class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
+        class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
       >
         <tr class="flex w-full place-items-center">
           <th class="w-1/4 text-center text-sm font-medium">{$t('user')}</th>
@@ -116,7 +116,7 @@
               {#if user.quotaSizeInBytes !== null}
                 / {getByteUnitString(user.quotaSizeInBytes, $locale, 0)}
               {/if}
-              <span class="text-immich-primary dark:text-immich-dark-primary">
+              <span class="text-primary">
                 {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
                   ({(user.quotaSizeInBytes === 0 ? 1 : user.usage / user.quotaSizeInBytes).toLocaleString($locale, {
                     style: 'percent',

web/src/lib/components/shared-components/map/map.svelte

@@ -367,11 +367,7 @@
       >
         {#snippet children({ feature }: { feature: Feature<Geometry, GeoJsonProperties> })}
           {#if useLocationPin}
-            <Icon
-              icon={mdiMapMarker}
-              size="50px"
-              class="dark:text-immich-dark-primary text-immich-primary -translate-y-[50%]"
-            />
+            <Icon icon={mdiMapMarker} size="50px" class="text-primary -translate-y-[50%]" />
           {:else}
             <img
               src={getAssetThumbnailUrl(feature.properties?.id)}

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -55,7 +55,7 @@
       </div>
     </div>
     <div>
-      <p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
+      <p class="text-center text-lg font-medium text-primary">
         {$user.name}
       </p>
       <p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p>
@@ -107,7 +107,7 @@
 
     <button
       type="button"
-      class="text-center mt-4 underline text-xs text-immich-primary dark:text-immich-dark-primary"
+      class="text-center mt-4 underline text-xs text-primary"
       onclick={async () => {
         onClose();
         if (info) {

web/src/lib/components/shared-components/purchasing/individual-purchase-option-card.svelte

@@ -10,7 +10,7 @@
 <div
   class="border border-gray-300 dark:border-gray-800 w-[min(375px,100%)] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900"
 >
-  <div class="text-immich-primary dark:text-immich-dark-primary">
+  <div class="text-primary">
     <Icon icon={mdiAccount} size="56" />
     <p class="font-semibold text-lg mt-1">{$t('purchase_individual_title')}</p>
   </div>

web/src/lib/components/shared-components/purchasing/purchase-activation-success.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <div class="m-auto w-3/4 text-center flex flex-col place-content-center place-items-center my-6">
-  <Icon icon={mdiPartyPopper} class="text-immich-primary dark:text-immich-dark-primary" size="96" />
+  <Icon icon={mdiPartyPopper} class="text-primary" size="96" />
   <p class="text-4xl mt-8 font-bold">{$t('purchase_activated_title')}</p>
   <p class="text-lg mt-6">{$t('purchase_activated_subtitle')}</p>
 

web/src/lib/components/shared-components/purchasing/server-purchase-option-card.svelte

@@ -10,7 +10,7 @@
 <div
   class="border border-gray-300 dark:border-gray-800 w-[min(375px,100%)] p-8 rounded-3xl bg-gray-100 dark:bg-gray-900"
 >
-  <div class="text-immich-primary dark:text-immich-dark-primary">
+  <div class="text-primary">
     <Icon icon={mdiServer} size="56" />
     <p class="font-semibold text-lg mt-1">{$t('purchase_server_title')}</p>
   </div>

web/src/lib/components/shared-components/search-bar/search-history-box.svelte

@@ -102,7 +102,7 @@
           <button
             id={getId(0)}
             type="button"
-            class="rounded-lg p-2 font-semibold text-immich-primary aria-selected:bg-immich-primary/25 hover:bg-immich-primary/25 dark:text-immich-dark-primary"
+            class="rounded-lg p-2 font-semibold text-primary aria-selected:bg-immich-primary/25 hover:bg-immich-primary/25"
             role="option"
             onclick={() => handleClearAll()}
             tabindex="-1"

web/src/lib/components/shared-components/settings/setting-accordion.svelte

@@ -78,9 +78,9 @@
     <div>
       <div class="flex gap-2 place-items-center">
         {#if icon}
-          <Icon {icon} class="text-immich-primary dark:text-immich-dark-primary" size="24" aria-hidden />
+          <Icon {icon} class="text-primary" size="24" aria-hidden />
         {/if}
-        <h2 class="font-medium text-immich-primary dark:text-immich-dark-primary">
+        <h2 class="font-medium text-primary">
           {title}
         </h2>
       </div>

web/src/lib/components/shared-components/settings/setting-buttons-row.svelte

@@ -16,13 +16,9 @@
 <div class="mt-8 flex justify-between gap-2">
   <div class="left">
     {#if showResetToDefault}
-      <button
-        type="button"
-        onclick={() => onReset({ default: true })}
-        class="bg-none text-sm font-medium text-immich-primary hover:text-immich-primary/75 dark:text-immich-dark-primary hover:dark:text-immich-dark-primary/75"
+      <Button variant="ghost" shape="round" size="small" onclick={() => onReset({ default: true })}
+        >{$t('reset_to_default')}</Button
       >
-        {$t('reset_to_default')}
-      </button>
     {/if}
   </div>
 

web/src/lib/components/shared-components/settings/setting-checkboxes.svelte

@@ -31,7 +31,7 @@
 
 <div class="mb-4 w-full">
   <div class="flex h-[26px] place-items-center gap-1">
-    <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="{name}-select">
+    <label class="font-medium text-primary text-sm" for="{name}-select">
       {label}
     </label>
 

web/src/lib/components/shared-components/settings/setting-combobox.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { quintOut } from 'svelte/easing';
-  import { fly } from 'svelte/transition';
   import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
-  import { t } from 'svelte-i18n';
   import type { Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import { quintOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
 
   interface Props {
     title: string;
@@ -31,7 +31,7 @@
 <div class="grid grid-cols-2">
   <div>
     <div class="flex h-[26px] place-items-center gap-1">
-      <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={title}>
+      <label class="font-medium text-primary text-sm" for={title}>
         {title}
       </label>
       {#if isEdited}

web/src/lib/components/shared-components/settings/setting-dropdown.svelte

@@ -29,7 +29,7 @@
 <div class="flex place-items-center justify-between">
   <div>
     <div class="flex h-[26px] place-items-center gap-1">
-      <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={title}>
+      <label class="font-medium text-primary text-sm" for={title}>
         {title}
       </label>
       {#if isEdited}

web/src/lib/components/shared-components/settings/setting-input-field.svelte

@@ -81,9 +81,7 @@
 
 <div class="mb-4 w-full">
   <div class="flex place-items-center gap-1">
-    <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm min-h-6 uppercase" for={label}
-      >{label}</label
-    >
+    <label class="font-medium text-primary text-sm min-h-6 uppercase" for={label}>{label}</label>
     {#if required}
       <div class="text-red-400">*</div>
     {/if}

web/src/lib/components/shared-components/settings/setting-select.svelte

@@ -40,9 +40,7 @@
 
 <div class="mb-4 w-full">
   <div class="flex h-[26px] place-items-center gap-1">
-    <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="{name}-select"
-      >{label}</label
-    >
+    <label class="font-medium text-primary text-sm" for="{name}-select">{label}</label>
 
     {#if isEdited}
       <div

web/src/lib/components/shared-components/settings/setting-switch.svelte

@@ -35,7 +35,7 @@
 <div class="flex place-items-center justify-between">
   <div class="me-2">
     <div class="flex h-[26px] place-items-center gap-1">
-      <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={sliderId}>
+      <label class="font-medium text-primary text-sm" for={sliderId}>
         {title}
       </label>
       {#if isEdited}

web/src/lib/components/shared-components/settings/setting-textarea.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import { t } from 'svelte-i18n';
-  import type { Snippet } from 'svelte';
 
   interface Props {
     value: string;
@@ -31,7 +31,7 @@
 
 <div class="mb-4 w-full">
   <div class="flex h-[26px] place-items-center gap-1">
-    <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={label}>{label}</label>
+    <label class="font-medium text-primary text-sm" for={label}>{label}</label>
     {#if required}
       <div class="text-red-400">*</div>
     {/if}

web/src/lib/components/shared-components/settings/settings-language-selector.svelte

@@ -38,7 +38,7 @@
   {#if showSettingDescription}
     <div>
       <div class="flex h-[26px] place-items-center gap-1">
-        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={$t('language')}>
+        <label class="font-medium text-primary text-sm" for={$t('language')}>
           {$t('language')}
         </label>
       </div>

web/src/lib/components/shared-components/side-bar/purchase-info.svelte

@@ -96,17 +96,13 @@
           <div class="h-6 w-6">
             <ImmichLogo noText class="h-[24px]" />
           </div>
-          <p class="flex text-immich-primary dark:text-immich-dark-primary font-medium">
+          <p class="flex text-primary font-medium">
             {$t('purchase_button_buy_immich')}
           </p>
         </div>
 
         <div>
-          <Icon
-            icon={mdiInformationOutline}
-            class="hidden sidebar:flex text-immich-primary dark:text-immich-dark-primary font-medium"
-            size="18"
-          />
+          <Icon icon={mdiInformationOutline} class="hidden sidebar:flex text-primary font-medium" size="18" />
         </div>
       </div>
     </button>
@@ -142,7 +138,7 @@
         />
       </div>
 
-      <h1 class="text-lg font-medium my-3 dark:text-immich-dark-primary text-immich-primary">
+      <h1 class="text-lg font-medium my-3 text-primary">
         {$t('purchase_panel_title')}
       </h1>
 

web/src/lib/components/shared-components/side-bar/side-bar-link.svelte

@@ -57,9 +57,7 @@
     draggable="false"
     aria-current={isSelected ? 'page' : undefined}
     class="flex w-full place-items-center gap-4 rounded-e-full py-3 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-subtle hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary
-    {isSelected
-      ? 'bg-immich-primary/10 text-immich-primary hover:bg-immich-primary/10 dark:bg-immich-dark-primary/10 dark:text-immich-dark-primary'
-      : ''}"
+    {isSelected ? 'bg-immich-primary/10 text-primary hover:bg-immich-primary/10 dark:bg-immich-dark-primary/10' : ''}"
   >
     <div class="flex w-full place-items-center gap-4 ps-5 overflow-hidden truncate">
       <Icon {icon} size="1.5em" class="shrink-0" flipped={flippedLogo} aria-hidden />

web/src/lib/components/shared-components/tree/breadcrumbs.svelte

@@ -51,9 +51,7 @@
         />
       </li>
       {#each parents as parent (parent)}
-        <li
-          class="flex gap-2 items-center font-mono text-sm text-nowrap text-immich-primary dark:text-immich-dark-primary"
-        >
+        <li class="flex gap-2 items-center font-mono text-sm text-nowrap text-primary">
           <Icon icon={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size="16" aria-hidden />
           <a class="underline hover:font-semibold whitespace-pre-wrap" href={getLink(parent.path)}>
             {parent.value}
@@ -61,9 +59,7 @@
         </li>
       {/each}
 
-      <li
-        class="flex gap-2 items-center font-mono text-sm text-nowrap text-immich-primary dark:text-immich-dark-primary"
-      >
+      <li class="flex gap-2 items-center font-mono text-sm text-nowrap text-primary">
         <Icon icon={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size="16" aria-hidden />
         <p class="cursor-default whitespace-pre-wrap">{node.value}</p>
       </li>

web/src/lib/components/shared-components/tree/tree-item-thumbnails.svelte

@@ -23,7 +23,7 @@
         title={item.value}
         type="button"
       >
-        <Icon {icon} class="text-immich-primary dark:text-immich-dark-primary" size="64" />
+        <Icon {icon} class="text-primary" size="64" />
         <p class="text-sm dark:text-gray-200 text-nowrap text-ellipsis overflow-clip w-full whitespace-pre-wrap">
           {item.value}
         </p>

web/src/lib/components/shared-components/tree/tree.svelte

@@ -26,7 +26,7 @@
 <a
   href={getLink(node.path)}
   title={node.value}
-  class={`flex grow place-items-center ps-2 py-1 text-sm rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 hover:font-semibold ${isTarget ? 'bg-slate-100 dark:bg-slate-700 font-semibold text-immich-primary dark:text-immich-dark-primary' : 'dark:text-gray-200'}`}
+  class={`flex grow place-items-center ps-2 py-1 text-sm rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 hover:font-semibold ${isTarget ? 'bg-slate-100 dark:bg-slate-700 font-semibold text-primary' : 'dark:text-gray-200'}`}
   data-sveltekit-keepfocus
 >
   {#if node.size > 0}
@@ -37,7 +37,7 @@
   <div class={node.size === 0 ? 'ml-[1.5em] ' : ''}>
     <Icon
       icon={isActive ? icons.active : icons.default}
-      class={isActive ? 'text-immich-primary dark:text-immich-dark-primary' : 'text-gray-400'}
+      class={isActive ? 'text-primary' : 'text-gray-400'}
       color={node.color}
       size="20"
     />

web/src/lib/components/sharedlinks-page/shared-link-card.svelte

@@ -61,9 +61,7 @@
         </div>
 
         <div class="text-sm pb-2">
-          <p
-            class="flex place-items-center gap-2 text-immich-primary dark:text-immich-dark-primary break-all uppercase"
-          >
+          <p class="flex place-items-center gap-2 text-primary break-all uppercase">
             {#if link.type === SharedLinkType.Album}
               {link.album?.albumName}
             {:else if link.type === SharedLinkType.Individual}

web/src/lib/components/timeline/AssetSelectControlBar.svelte

@@ -38,9 +38,7 @@
 
 <ControlAppBar onClose={clearSelect} {forceDark} backIcon={mdiClose} tailwindClasses="bg-white shadow-md">
   {#snippet leading()}
-    <div
-      class="font-medium {forceDark ? 'text-immich-dark-primary' : 'text-immich-primary dark:text-immich-dark-primary'}"
-    >
+    <div class="font-medium {forceDark ? 'text-immich-dark-primary' : 'text-primary'}">
       <p class="block sm:hidden">{assets.length}</p>
       <p class="hidden sm:block">{$t('selected_count', { values: { count: assets.length } })}</p>
     </div>

web/src/lib/components/user-settings-page/device-card.svelte

@@ -31,7 +31,7 @@
 </script>
 
 <div class="flex w-full flex-row">
-  <div class="hidden items-center justify-center pe-2 text-immich-primary dark:text-immich-dark-primary sm:flex">
+  <div class="hidden items-center justify-center pe-2 text-primary sm:flex">
     {#if device.deviceOS === 'Android'}
       <Icon icon={mdiAndroid} size="40" />
     {:else if device.deviceOS === 'iOS' || device.deviceOS === 'macOS'}

web/src/lib/components/user-settings-page/device-list.svelte

@@ -56,7 +56,7 @@
 <section class="my-4">
   {#if currentDevice}
     <div class="mb-6">
-      <h3 class="uppercase mb-2 text-xs font-medium text-immich-primary dark:text-immich-dark-primary">
+      <h3 class="uppercase mb-2 text-xs font-medium text-primary">
         {$t('current_device')}
       </h3>
       <DeviceCard device={currentDevice} />
@@ -64,7 +64,7 @@
   {/if}
   {#if otherDevices.length > 0}
     <div class="mb-6">
-      <h3 class="uppercase mb-2 text-xs font-medium text-immich-primary dark:text-immich-dark-primary">
+      <h3 class="uppercase mb-2 text-xs font-medium text-primary">
         {$t('other_devices')}
       </h3>
       {#each otherDevices as device, index (device.id)}
@@ -74,7 +74,7 @@
         {/if}
       {/each}
     </div>
-    <h3 class="uppercase mb-2 text-xs font-medium text-immich-primary dark:text-immich-dark-primary">
+    <h3 class="uppercase mb-2 text-xs font-medium text-primary">
       {$t('log_out_all_devices')}
     </h3>
     <div class="flex justify-end">

web/src/lib/components/user-settings-page/user-api-key-list.svelte

@@ -101,7 +101,7 @@
     {#if keys.length > 0}
       <table class="w-full text-start">
         <thead
-          class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
+          class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
         >
           <tr class="flex w-full place-items-center">
             <th class="w-1/4 text-center text-sm font-medium">{$t('name')}</th>

web/src/lib/components/user-settings-page/user-purchase-settings.svelte

@@ -122,10 +122,10 @@
         <div
           class="bg-gray-50 border border-immich-dark-primary/20 dark:bg-immich-dark-primary/15 p-6 pe-12 rounded-xl flex place-content-center gap-4"
         >
-          <Icon icon={mdiKey} size="56" class="text-immich-primary dark:text-immich-dark-primary" />
+          <Icon icon={mdiKey} size="56" class="text-primary" />
 
           <div>
-            <p class="text-immich-primary dark:text-immich-dark-primary font-semibold text-lg">
+            <p class="text-primary font-semibold text-lg">
               {$t('purchase_server_title')}
             </p>
 
@@ -154,10 +154,10 @@
         <div
           class="bg-gray-50 border border-immich-dark-primary/20 dark:bg-immich-dark-primary/15 p-6 pe-12 rounded-xl flex place-content-center gap-4"
         >
-          <Icon icon={mdiKey} size="56" class="text-immich-primary dark:text-immich-dark-primary" />
+          <Icon icon={mdiKey} size="56" class="text-primary" />
 
           <div>
-            <p class="text-immich-primary dark:text-immich-dark-primary font-semibold text-lg">
+            <p class="text-primary font-semibold text-lg">
               {$t('purchase_individual_title')}
             </p>
             {#if $user.license?.activatedAt}

web/src/lib/components/user-settings-page/user-usage-statistic.svelte

@@ -71,7 +71,7 @@
   <div class="overflow-x-auto">
     <table class="w-full text-start mt-4">
       <thead
-        class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
+        class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
       >
         <tr class="flex w-full place-items-center text-sm font-medium text-center">
           <th class="w-1/4">{$t('view_name')}</th>
@@ -94,9 +94,7 @@
   </div>
   <div class="overflow-x-auto">
     <table class="w-full text-start mt-4">
-      <thead
-        class="mb-4 flex h-12 w-full rounded-md border text-immich-primary dark:border-immich-dark-gray bg-subtle dark:text-immich-dark-primary"
-      >
+      <thead class="mb-4 flex h-12 w-full rounded-md border text-primary dark:border-immich-dark-gray bg-subtle">
         <tr class="flex w-full place-items-center text-sm font-medium text-center">
           <th class="w-1/2">{$t('owned')}</th>
           <th class="w-1/2">{$t('shared')}</th>

web/src/lib/components/utilities-page/utilities-menu.svelte

@@ -16,7 +16,7 @@
 
   {#each links as link (link.href)}
     <a href={link.href} class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4">
-      <span><Icon icon={link.icon} class="text-immich-primary dark:text-immich-dark-primary" size="24" /> </span>
+      <span><Icon icon={link.icon} class="text-primary" size="24" /> </span>
       {link.label}
     </a>
   {/each}

web/src/lib/elements/Dropdown.svelte

@@ -121,10 +121,10 @@
           onclick={() => !renderedOption.disabled && handleSelectOption(option)}
         >
           {#if isEqual(selectedOption, option)}
-            <div class="text-immich-primary dark:text-immich-dark-primary">
+            <div class="text-primary">
               <Icon icon={mdiCheck} />
             </div>
-            <p class="justify-self-start text-immich-primary dark:text-immich-dark-primary">
+            <p class="justify-self-start text-primary">
               {renderedOption.title}
             </p>
           {:else}

web/src/lib/elements/StarRating.svelte

@@ -57,7 +57,7 @@
 
 <!-- svelte-ignore a11y_mouse_events_have_key_events -->
 <fieldset
-  class="text-immich-primary dark:text-immich-dark-primary w-fit cursor-default"
+  class="text-primary w-fit cursor-default"
   onmouseleave={() => setHoverRating(0)}
   use:focusOutside={{ onFocusOut: reset }}
   use:shortcuts={[
@@ -114,7 +114,7 @@
       ratingSelection = 0;
       handleSelect(ratingSelection);
     }}
-    class="cursor-pointer text-xs text-immich-primary dark:text-immich-dark-primary"
+    class="cursor-pointer text-xs text-primary"
   >
     {$t('rating_clear')}
   </button>

web/src/lib/modals/AlbumUsersModal.svelte

@@ -140,7 +140,7 @@
               <button
                 type="button"
                 onclick={() => handleRemoveUser(user)}
-                class="text-sm font-medium text-immich-primary transition-colors hover:text-immich-primary/75 dark:text-immich-dark-primary"
+                class="text-sm font-medium text-primary transition-colors hover:text-immich-primary/75"
                 >{$t('leave')}</button
               >
             {/if}

web/src/lib/modals/ApiKeySecretModal.svelte

@@ -14,7 +14,7 @@
 
 <Modal title={$t('api_key')} icon={mdiKeyVariant} {onClose} size="small">
   <ModalBody>
-    <div class="text-immich-primary dark:text-immich-dark-primary">
+    <div class="text-primary">
       <p class="text-sm dark:text-immich-dark-fg">
         {$t('api_key_description')}
       </p>

web/src/lib/modals/HelpAndFeedbackModal.svelte

@@ -20,10 +20,7 @@
       <div>
         <a href="https://{info.version}.archive.immich.app/docs/overview/introduction" target="_blank" rel="noreferrer">
           <Icon icon={mdiInformationOutline} size="1.5em" class="inline-block" />
-          <p
-            class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
-            id="documentation-label"
-          >
+          <p class="font-medium text-primary text-sm underline inline-block" id="documentation-label">
             {$t('documentation')}
           </p>
         </a>
@@ -32,10 +29,7 @@
       <div>
         <a href="https://github.com/immich-app/immich/" target="_blank" rel="noreferrer">
           <Icon icon={mdiGithub} size="1.5em" class="inline-block" />
-          <p
-            class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
-            id="github-label"
-          >
+          <p class="font-medium text-primary text-sm underline inline-block" id="github-label">
             {$t('source')}
           </p>
         </a>
@@ -44,10 +38,7 @@
       <div>
         <a href="https://discord.immich.app" target="_blank" rel="noreferrer">
           <Icon icon={siDiscord} class="inline-block" size="1.5em" />
-          <p
-            class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
-            id="github-label"
-          >
+          <p class="font-medium text-primary text-sm underline inline-block" id="github-label">
             {$t('discord')}
           </p>
         </a>
@@ -56,10 +47,7 @@
       <div>
         <a href="https://github.com/immich-app/immich/issues/new/choose" target="_blank" rel="noreferrer">
           <Icon icon={mdiBugOutline} size="1.5em" class="inline-block" />
-          <p
-            class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
-            id="github-label"
-          >
+          <p class="font-medium text-primary text-sm underline inline-block" id="github-label">
             {$t('bugs_and_feature_requests')}
           </p>
         </a>
@@ -75,10 +63,7 @@
           <div>
             <a href={info.thirdPartyDocumentationUrl} target="_blank" rel="noreferrer">
               <Icon icon={mdiInformationOutline} size="1.5em" class="inline-block" />
-              <p
-                class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
-                id="documentation-label"
-              >
+              <p class="font-medium text-primary text-sm underline inline-block" id="documentation-label">
                 {$t('documentation')}
               </p>
             </a>
@@ -89,10 +74,7 @@
           <div>
             <a href={info.thirdPartySourceUrl} target="_blank" rel="noreferrer">
               <Icon icon={mdiGit} size="1.5em" class="inline-block" />
-              <p
-                class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
-                id="github-label"
-              >
+              <p class="font-medium text-primary text-sm underline inline-block" id="github-label">
                 {$t('source')}
               </p>
             </a>
@@ -103,10 +85,7 @@
           <div>
             <a href={info.thirdPartySupportUrl} target="_blank" rel="noreferrer">
               <Icon icon={mdiFaceAgent} class="inline-block" size="1.5em" />
-              <p
-                class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
-                id="github-label"
-              >
+              <p class="font-medium text-primary text-sm underline inline-block" id="github-label">
                 {$t('support')}
               </p>
             </a>
@@ -117,10 +96,7 @@
           <div>
             <a href={info.thirdPartyBugFeatureUrl} target="_blank" rel="noreferrer">
               <Icon icon={mdiBugOutline} size="1.5em" class="inline-block" />
-              <p
-                class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm underline inline-block"
-                id="github-label"
-              >
+              <p class="font-medium text-primary text-sm underline inline-block" id="github-label">
                 {$t('bugs_and_feature_requests')}
               </p>
             </a>

web/src/lib/modals/PersonEditBirthDateModal.svelte

@@ -37,7 +37,7 @@
 
 <Modal title={$t('set_date_of_birth')} icon={mdiCake} {onClose} size="small">
   <ModalBody>
-    <div class="text-immich-primary dark:text-immich-dark-primary">
+    <div class="text-primary">
       <p class="text-sm dark:text-immich-dark-fg">
         {$t('birthdate_set_description')}
       </p>

web/src/lib/modals/ServerAboutModal.svelte

@@ -17,11 +17,9 @@
 
 <Modal title={$t('about')} {onClose}>
   <ModalBody>
-    <div class="flex flex-col sm:grid sm:grid-cols-2 gap-1 text-immich-primary dark:text-immich-dark-primary">
+    <div class="flex flex-col sm:grid sm:grid-cols-2 gap-1 text-primary">
       <div>
-        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="version-desc"
-          >Immich</label
-        >
+        <label class="font-medium text-primary text-sm" for="version-desc">Immich</label>
         <div>
           <a
             href={info.versionUrl}
@@ -36,45 +34,35 @@
       </div>
 
       <div>
-        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="ffmpeg-desc"
-          >ExifTool</label
-        >
+        <label class="font-medium text-primary text-sm" for="ffmpeg-desc">ExifTool</label>
         <p class="immich-form-label pb-2 text-sm" id="ffmpeg-desc">
           {info.exiftool}
         </p>
       </div>
 
       <div>
-        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="nodejs-desc"
-          >Node.js</label
-        >
+        <label class="font-medium text-primary text-sm" for="nodejs-desc">Node.js</label>
         <p class="immich-form-label pb-2 text-sm" id="nodejs-desc">
           {info.nodejs}
         </p>
       </div>
 
       <div>
-        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="vips-desc"
-          >Libvips</label
-        >
+        <label class="font-medium text-primary text-sm" for="vips-desc">Libvips</label>
         <p class="immich-form-label pb-2 text-sm" id="vips-desc">
           {info.libvips}
         </p>
       </div>
 
       <div class={(info.imagemagick?.length || 0) > 10 ? 'col-span-2' : ''}>
-        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="imagemagick-desc"
-          >ImageMagick</label
-        >
+        <label class="font-medium text-primary text-sm" for="imagemagick-desc">ImageMagick</label>
         <p class="immich-form-label pb-2 text-sm" id="imagemagick-desc">
           {info.imagemagick}
         </p>
       </div>
 
       <div class={(info.ffmpeg?.length || 0) > 10 ? 'col-span-2' : ''}>
-        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="ffmpeg-desc"
-          >FFmpeg</label
-        >
+        <label class="font-medium text-primary text-sm" for="ffmpeg-desc">FFmpeg</label>
         <p class="immich-form-label pb-2 text-sm" id="ffmpeg-desc">
           {info.ffmpeg}
         </p>
@@ -82,9 +70,7 @@
 
       {#if info.repository && info.repositoryUrl}
         <div>
-          <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="version-desc"
-            >{$t('repository')}</label
-          >
+          <label class="font-medium text-primary text-sm" for="version-desc">{$t('repository')}</label>
           <div>
             <a
               href={info.repositoryUrl}
@@ -101,9 +87,7 @@
 
       {#if info.sourceRef && info.sourceCommit && info.sourceUrl}
         <div>
-          <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="git-desc"
-            >{$t('source')}</label
-          >
+          <label class="font-medium text-primary text-sm" for="git-desc">{$t('source')}</label>
           <div>
             <a
               href={info.sourceUrl}
@@ -120,9 +104,7 @@
 
       {#if info.build && info.buildUrl}
         <div>
-          <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="build-desc"
-            >{$t('build')}</label
-          >
+          <label class="font-medium text-primary text-sm" for="build-desc">{$t('build')}</label>
           <div>
             <a
               href={info.buildUrl}
@@ -139,9 +121,7 @@
 
       {#if info.buildImage && info.buildImage}
         <div>
-          <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="build-image-desc"
-            >{$t('build_image')}</label
-          >
+          <label class="font-medium text-primary text-sm" for="build-image-desc">{$t('build_image')}</label>
           <div>
             <a
               href={info.buildImageUrl}
@@ -166,9 +146,7 @@
       {/if}
 
       <div class="col-span-full">
-        <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="version-history"
-          >{$t('version_history')}</label
-        >
+        <label class="font-medium text-primary text-sm" for="version-history">{$t('version_history')}</label>
         <ul id="version-history" class="list-none">
           {#each versions.slice(0, 5) as item (item.id)}
             {@const createdAt = DateTime.fromISO(item.createdAt)}

web/src/lib/modals/SharedLinkCreateModal.svelte

@@ -146,7 +146,7 @@
       {:else}
         <div class="text-sm">
           {$t('public_album')} |
-          <span class="text-immich-primary dark:text-immich-dark-primary">{editingLink.album?.albumName}</span>
+          <span class="text-primary">{editingLink.album?.albumName}</span>
         </div>
       {/if}
     {/if}
@@ -157,7 +157,7 @@
       {:else}
         <div class="text-sm">
           {$t('individual_share')} |
-          <span class="text-immich-primary dark:text-immich-dark-primary">{editingLink.description || ''}</span>
+          <span class="text-primary">{editingLink.description || ''}</span>
         </div>
       {/if}
     {/if}

web/src/lib/modals/SlideshowSettingsModal.svelte

@@ -75,7 +75,7 @@
 
 <Modal size="small" title={$t('slideshow_settings')} onClose={() => onClose()}>
   <ModalBody>
-    <div class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary">
+    <div class="flex flex-col gap-4 text-primary">
       <SettingDropdown
         title={$t('direction')}
         options={Object.values(navigationOptions)}

web/src/lib/modals/TagCreateModal.svelte

@@ -38,7 +38,7 @@
 
 <Modal size="small" title={$t('create_tag')} icon={mdiTag} {onClose}>
   <ModalBody>
-    <div class="text-immich-primary dark:text-immich-dark-primary">
+    <div class="text-primary">
       <p class="text-sm dark:text-immich-dark-fg">
         {$t('create_tag_description')}
       </p>

web/src/lib/modals/UserEditModal.svelte

@@ -101,7 +101,7 @@
 
         <p>
           {$t('admin.note_apply_storage_label_previous_assets')}
-          <a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary">
+          <a href={AppRoute.ADMIN_JOBS} class="text-primary">
             {$t('admin.storage_template_migration_job')}
           </a>
         </p>

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -81,6 +81,7 @@
     mdiPlus,
     mdiPresentationPlay,
     mdiShareVariantOutline,
+    mdiUpload,
   } from '@mdi/js';
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -534,7 +535,7 @@
                   onclick={() => (viewMode = AlbumPageViewMode.SELECT_ASSETS)}
                   class="mt-5 bg-subtle flex w-full place-items-center gap-6 rounded-2xl border px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 dark:hover:bg-gray-500/20 hover:text-immich-primary dark:border-none dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
                 >
-                  <span class="text-text-immich-primary dark:text-immich-dark-primary">
+                  <span class="text-primary">
                     <Icon icon={mdiPlus} size="24" />
                   </span>
                   <span class="text-lg">{$t('select_photos')}</span>
@@ -710,16 +711,10 @@
           {/snippet}
 
           {#snippet trailing()}
-            <button
-              type="button"
-              onclick={handleSelectFromComputer}
-              class="rounded-lg px-6 py-2 text-sm font-medium text-immich-primary transition-all hover:bg-immich-primary/10 dark:text-immich-dark-primary dark:hover:bg-immich-dark-primary/25"
-            >
-              {$t('select_from_computer')}
-            </button>
-            <Button size="small" disabled={!timelineInteraction.selectionActive} onclick={handleAddAssets}
-              >{$t('done')}</Button
+            <Button variant="ghost" leadingIcon={mdiUpload} onclick={handleSelectFromComputer}
+              >{$t('select_from_computer')}</Button
             >
+            <Button disabled={!timelineInteraction.selectionActive} onclick={handleAddAssets}>{$t('done')}</Button>
           {/snippet}
         </ControlAppBar>
       {/if}

web/src/routes/(user)/people/+page.svelte

@@ -374,7 +374,7 @@
 
           <input
             type="text"
-            class=" bg-white dark:bg-immich-dark-gray border-gray-100 placeholder-gray-400 text-center dark:border-gray-900 w-full rounded-2xl mt-2 py-2 text-sm text-immich-primary dark:text-immich-dark-primary"
+            class=" bg-white dark:bg-immich-dark-gray border-gray-100 placeholder-gray-400 text-center dark:border-gray-900 w-full rounded-2xl mt-2 py-2 text-sm text-primary"
             value={person.name}
             placeholder={$t('add_a_name')}
             use:shortcut={{ shortcut: { key: 'Enter' }, onShortcut: (e) => e.currentTarget.blur() }}

web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -431,9 +431,7 @@
                     widthStyle="3.375rem"
                     heightStyle="3.375rem"
                   />
-                  <div
-                    class="flex flex-col justify-center text-start px-4 text-immich-primary dark:text-immich-dark-primary"
-                  >
+                  <div class="flex flex-col justify-center text-start px-4 text-primary">
                     <p class="w-40 sm:w-72 font-medium truncate">{person.name || $t('add_a_name')}</p>
                     <p class="text-sm text-gray-500 dark:text-gray-400">
                       {$t('assets_count', { values: { count: numberOfAssets } })}

web/src/routes/admin/library-management/+page.svelte

@@ -277,7 +277,7 @@
       {#if libraries.length > 0}
         <table class="w-full text-start">
           <thead
-            class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
+            class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
           >
             <tr class="grid grid-cols-6 w-full place-items-center">
               <th class="text-center text-sm font-medium">{$t('name')}</th>

web/src/routes/admin/users/+page.svelte

@@ -87,7 +87,7 @@
     <section class="w-full pb-28 lg:w-[850px]">
       <table class="my-5 w-full text-start">
         <thead
-          class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
+          class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
         >
           <tr class="flex w-full place-items-center">
             <th class="w-8/12 sm:w-5/12 lg:w-6/12 xl:w-4/12 2xl:w-5/12 text-center text-sm font-medium"