refactor: text-primary (#22141)

2025-10-17 18:19:27 +00:00 · 2025-09-17 12:12:51 -04:00 · 2025-09-17 12:12:51 -04:00 · 11e72a0f35
commit 11e72a0f35
parent 53a6724039
63 changed files with 138 additions and 229 deletions
--- a/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte
+++ b/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}
--- a/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
+++ b/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>
--- a/web/src/lib/components/admin-settings/SupportedVariablesPanel.svelte
+++ b/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>
--- a/web/src/lib/components/album-page/album-card-group.svelte
+++ b/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}" />
--- a/web/src/lib/components/album-page/album-card.svelte
+++ b/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}
    >
--- a/web/src/lib/components/album-page/album-title.svelte
+++ b/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"
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/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>

--- a/web/src/lib/components/album-page/albums-table.svelte
+++ b/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)}
--- a/web/src/lib/components/asset-viewer/detail-panel-location.svelte
+++ b/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')}
  >
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/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>
--- a/web/src/lib/components/jobs/JobTile.svelte
+++ b/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>
--- a/web/src/lib/components/jobs/StorageMigrationDescription.svelte
+++ b/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>
--- a/web/src/lib/components/layouts/ErrorLayout.svelte
+++ b/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">
--- a/web/src/lib/components/onboarding-page/onboarding-card.svelte
+++ b/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}
--- a/web/src/lib/components/onboarding-page/onboarding-hello.svelte
+++ b/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">
--- a/web/src/lib/components/pages/SharedLinkErrorPage.svelte
+++ b/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}
--- a/web/src/lib/components/pages/SharedLinkPage.svelte
+++ b/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">
--- a/web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte
+++ b/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',
--- a/web/src/lib/components/shared-components/map/map.svelte
+++ b/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)}
--- a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
+++ b/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) {
--- a/web/src/lib/components/shared-components/purchasing/individual-purchase-option-card.svelte
+++ b/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>
--- a/web/src/lib/components/shared-components/purchasing/purchase-activation-success.svelte
+++ b/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>

--- a/web/src/lib/components/shared-components/purchasing/server-purchase-option-card.svelte
+++ b/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>
--- a/web/src/lib/components/shared-components/search-bar/search-history-box.svelte
+++ b/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"
--- a/web/src/lib/components/shared-components/settings/setting-accordion.svelte
+++ b/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>
--- a/web/src/lib/components/shared-components/settings/setting-buttons-row.svelte
+++ b/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>

--- a/web/src/lib/components/shared-components/settings/setting-checkboxes.svelte
+++ b/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>

--- a/web/src/lib/components/shared-components/settings/setting-combobox.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-combobox.svelte
@ -1,9 +1,9 @@
 <script lang="ts">
+  import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
+  import type { Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
  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';

  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}
--- a/web/src/lib/components/shared-components/settings/setting-dropdown.svelte
+++ b/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}
--- a/web/src/lib/components/shared-components/settings/setting-input-field.svelte
+++ b/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}
--- a/web/src/lib/components/shared-components/settings/setting-select.svelte
+++ b/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
--- a/web/src/lib/components/shared-components/settings/setting-switch.svelte
+++ b/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}
--- a/web/src/lib/components/shared-components/settings/setting-textarea.svelte
+++ b/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}
--- a/web/src/lib/components/shared-components/settings/settings-language-selector.svelte
+++ b/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>
--- a/web/src/lib/components/shared-components/side-bar/purchase-info.svelte
+++ b/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>

--- a/web/src/lib/components/shared-components/side-bar/side-bar-link.svelte
+++ b/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 />
--- a/web/src/lib/components/shared-components/tree/breadcrumbs.svelte
+++ b/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>
--- a/web/src/lib/components/shared-components/tree/tree-item-thumbnails.svelte
+++ b/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>
--- a/web/src/lib/components/shared-components/tree/tree.svelte
+++ b/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"
    />
--- a/web/src/lib/components/sharedlinks-page/shared-link-card.svelte
+++ b/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}
--- a/web/src/lib/components/timeline/AssetSelectControlBar.svelte
+++ b/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>
--- a/web/src/lib/components/user-settings-page/device-card.svelte
+++ b/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'}
--- a/web/src/lib/components/user-settings-page/device-list.svelte
+++ b/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">
--- a/web/src/lib/components/user-settings-page/user-api-key-list.svelte
+++ b/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>
--- a/web/src/lib/components/user-settings-page/user-purchase-settings.svelte
+++ b/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}
--- a/web/src/lib/components/user-settings-page/user-usage-statistic.svelte
+++ b/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>
--- a/web/src/lib/components/utilities-page/utilities-menu.svelte
+++ b/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}
--- a/web/src/lib/elements/Dropdown.svelte
+++ b/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}
--- a/web/src/lib/elements/StarRating.svelte
+++ b/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>
--- a/web/src/lib/modals/AlbumUsersModal.svelte
+++ b/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}
--- a/web/src/lib/modals/ApiKeySecretModal.svelte
+++ b/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>
--- a/web/src/lib/modals/HelpAndFeedbackModal.svelte
+++ b/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>
--- a/web/src/lib/modals/PersonEditBirthDateModal.svelte
+++ b/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>
--- a/web/src/lib/modals/ServerAboutModal.svelte
+++ b/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)}
--- a/web/src/lib/modals/SharedLinkCreateModal.svelte
+++ b/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}
--- a/web/src/lib/modals/SlideshowSettingsModal.svelte
+++ b/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)}
--- a/web/src/lib/modals/TagCreateModal.svelte
+++ b/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>
--- a/web/src/lib/modals/UserEditModal.svelte
+++ b/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>
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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}
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/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() }}
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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 } })}
--- a/web/src/routes/admin/library-management/+page.svelte
+++ b/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>
--- a/web/src/routes/admin/users/+page.svelte
+++ b/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"