refactor: use UI library variable for table (#18105)

web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte

@@ -4,8 +4,8 @@
   import { getByteUnitString, getBytesWithUnit } from '$lib/utils/byte-units';
   import type { ServerStatsResponseDto } from '@immich/sdk';
   import { mdiCameraIris, mdiChartPie, mdiPlayCircle } from '@mdi/js';
-  import StatsCard from './stats-card.svelte';
   import { t } from 'svelte-i18n';
+  import StatsCard from './stats-card.svelte';
 
   interface Props {
     stats?: ServerStatsResponseDto;
@@ -44,7 +44,7 @@
       <StatsCard icon={mdiChartPie} title={$t('storage').toUpperCase()} value={statsUsage} unit={statsUsageUnit} />
     </div>
     <div class="mt-5 flex lg:hidden">
-      <div class="flex flex-col justify-between rounded-3xl bg-immich-gray p-5 dark:bg-immich-dark-gray">
+      <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">
             <Icon path={mdiCameraIris} size="25" />
@@ -104,7 +104,7 @@
       >
         {#each stats.usageByUser as user (user.userId)}
           <tr
-            class="flex h-[50px] w-full place-items-center text-center odd:bg-immich-gray even:bg-immich-bg odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50"
+            class="flex h-[50px] w-full place-items-center text-center odd:bg-subtle even:bg-immich-bg odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50"
           >
             <td class="w-1/4 text-ellipsis px-2 text-sm">{user.userName}</td>
             <td class="w-1/4 text-ellipsis px-2 text-sm"

web/src/lib/components/admin-page/server-stats/stats-card.svelte

@@ -20,7 +20,7 @@
   });
 </script>
 
-<div class="flex h-[140px] w-[250px] flex-col justify-between rounded-3xl bg-immich-gray p-5 dark:bg-immich-dark-gray">
+<div class="flex h-[140px] w-[250px] flex-col justify-between rounded-3xl bg-subtle p-5 dark:bg-immich-dark-gray">
   <div class="flex place-items-center gap-4 text-immich-primary dark:text-immich-dark-primary">
     <Icon path={icon} size="40" />
     <p>{title}</p>

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

@@ -1,15 +1,15 @@
 <script lang="ts">
-  import { flip } from 'svelte/animate';
-  import { slide } from 'svelte/transition';
-  import { AppRoute } from '$lib/constants';
-  import type { AlbumResponseDto } from '@immich/sdk';
-  import { albumViewSettings } from '$lib/stores/preferences.store';
-  import type { ContextMenuPosition } from '$lib/utils/context-menu';
-  import { type AlbumGroup, isAlbumGroupCollapsed, toggleAlbumGroupCollapsing } from '$lib/utils/album-utils';
-  import { mdiChevronRight } from '@mdi/js';
   import AlbumCard from '$lib/components/album-page/album-card.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { albumViewSettings } from '$lib/stores/preferences.store';
+  import { type AlbumGroup, isAlbumGroupCollapsed, toggleAlbumGroupCollapsing } from '$lib/utils/album-utils';
+  import type { ContextMenuPosition } from '$lib/utils/context-menu';
+  import type { AlbumResponseDto } from '@immich/sdk';
+  import { mdiChevronRight } from '@mdi/js';
   import { t } from 'svelte-i18n';
+  import { flip } from 'svelte/animate';
+  import { slide } from 'svelte/transition';
 
   interface Props {
     albums: AlbumResponseDto[];
@@ -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-immich-gray 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-immich-primary dark:hover:text-immich-dark-primary hover:bg-subtle dark:hover:bg-immich-dark-gray"
       aria-expanded={!isCollapsed}
     >
       <Icon

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

@@ -1,12 +1,12 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { AppRoute, dateFormats } from '$lib/constants';
-  import type { AlbumResponseDto } from '@immich/sdk';
-  import type { ContextMenuPosition } from '$lib/utils/context-menu';
-  import { user } from '$lib/stores/user.store';
-  import { locale } from '$lib/stores/preferences.store';
-  import { mdiShareVariantOutline } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
+  import { AppRoute, dateFormats } from '$lib/constants';
+  import { locale } from '$lib/stores/preferences.store';
+  import { user } from '$lib/stores/user.store';
+  import type { ContextMenuPosition } from '$lib/utils/context-menu';
+  import type { AlbumResponseDto } from '@immich/sdk';
+  import { mdiShareVariantOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -31,7 +31,7 @@
 </script>
 
 <tr
-  class="flex h-[50px] w-full place-items-center border-[3px] border-transparent p-2 text-center odd:bg-immich-gray even:bg-immich-bg hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 md:p-5"
+  class="flex h-[50px] w-full place-items-center border-[3px] border-transparent p-2 text-center odd:bg-subtle even:bg-immich-bg hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 md:p-5"
   onclick={() => goto(`${AppRoute.ALBUMS}/${album.id}`)}
   {oncontextmenu}
 >

web/src/lib/components/forms/library-import-paths-form.svelte

@@ -178,9 +178,7 @@
       {#each validatedPaths as validatedPath, listIndex (validatedPath.importPath)}
         <tr
           class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
-            listIndex % 2 == 0
+            listIndex % 2 == 0 ? 'bg-subtle' : 'bg-immich-bg dark:bg-immich-dark-gray/50'
-              ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
-              : 'bg-immich-bg dark:bg-immich-dark-gray/50'
           }`}
         >
           <td class="w-1/8 text-ellipsis ps-8 text-sm">
@@ -218,9 +216,7 @@
       {/each}
       <tr
         class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
-          importPaths.length % 2 == 0
+          importPaths.length % 2 == 0 ? 'bg-subtle' : 'bg-immich-bg dark:bg-immich-dark-gray/50'
-            ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
-            : 'bg-immich-bg dark:bg-immich-dark-gray/50'
         }`}
       >
         <td class="w-4/5 text-ellipsis px-4 text-sm">

web/src/lib/components/forms/library-scan-settings-form.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { type LibraryResponseDto } from '@immich/sdk';
   import { mdiPencilOutline } from '@mdi/js';
   import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
   import { handleError } from '../../utils/handle-error';
   import Button from '../elements/buttons/button.svelte';
   import LibraryExclusionPatternForm from './library-exclusion-pattern-form.svelte';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { t } from 'svelte-i18n';
 
   interface Props {
     library: Partial<LibraryResponseDto>;
@@ -128,9 +128,7 @@
       {#each exclusionPatterns as exclusionPattern, listIndex (exclusionPattern)}
         <tr
           class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
-            listIndex % 2 == 0
+            listIndex % 2 == 0 ? 'bg-subtle' : 'bg-immich-bg dark:bg-immich-dark-gray/50'
-              ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
-              : 'bg-immich-bg dark:bg-immich-dark-gray/50'
           }`}
         >
           <td class="w-3/4 text-ellipsis px-4 text-sm">{exclusionPattern}</td>
@@ -150,9 +148,7 @@
       {/each}
       <tr
         class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
-          exclusionPatterns.length % 2 == 0
+          exclusionPatterns.length % 2 == 0 ? 'bg-subtle' : 'bg-immich-bg dark:bg-immich-dark-gray/50'
-            ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
-            : 'bg-immich-bg dark:bg-immich-dark-gray/50'
         }`}
       >
         <td class="w-3/4 text-ellipsis px-4 text-sm">

web/src/lib/components/shared-components/control-app-bar.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import { browser } from '$app/environment';
 
-  import { onDestroy, onMount, type Snippet } from 'svelte';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-  import { fly } from 'svelte/transition';
-  import { mdiClose } from '@mdi/js';
   import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
+  import { mdiClose } from '@mdi/js';
+  import { onDestroy, onMount, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
+  import { fly } from 'svelte/transition';
+  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
 
   interface Props {
     showBackButton?: boolean;
@@ -77,7 +77,7 @@
       appBarBorder,
       'mx-2 my-2 place-items-center rounded-lg p-2 max-md:p-0 transition-all',
       tailwindClasses,
-      forceDark ? 'bg-immich-dark-gray text-white' : 'bg-immich-gray dark:bg-immich-dark-gray',
+      forceDark ? 'bg-immich-dark-gray text-white' : 'bg-subtle dark:bg-immich-dark-gray',
     ]}
   >
     <div class="flex place-items-center sm:gap-6 justify-self-start dark:text-immich-dark-fg">

web/src/lib/components/shared-components/search-bar/search-people-section.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
   import Button from '$lib/components/elements/buttons/button.svelte';
-  import SearchBar from '$lib/components/elements/search-bar.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
-  import { getPeopleThumbnailUrl } from '$lib/utils';
+  import SearchBar from '$lib/components/elements/search-bar.svelte';
-  import { getAllPeople, type PersonResponseDto } from '@immich/sdk';
-  import { mdiClose, mdiArrowRight } from '@mdi/js';
-  import { handleError } from '$lib/utils/handle-error';
-  import { t } from 'svelte-i18n';
-  import SingleGridRow from '$lib/components/shared-components/single-grid-row.svelte';
-  import type { SvelteSet } from 'svelte/reactivity';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+  import SingleGridRow from '$lib/components/shared-components/single-grid-row.svelte';
+  import { getPeopleThumbnailUrl } from '$lib/utils';
+  import { handleError } from '$lib/utils/handle-error';
+  import { getAllPeople, type PersonResponseDto } from '@immich/sdk';
+  import { mdiArrowRight, mdiClose } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { SvelteSet } from 'svelte/reactivity';
 
   interface Props {
     selectedPeople: SvelteSet<string>;
@@ -76,7 +76,7 @@
         {#each peopleList as person (person.id)}
           <button
             type="button"
-            class="flex flex-col items-center rounded-3xl border-2 hover:bg-immich-gray dark:hover:bg-immich-dark-primary/20 p-2 transition-all {selectedPeople.has(
+            class="flex flex-col items-center rounded-3xl border-2 hover:bg-subtle dark:hover:bg-immich-dark-primary/20 p-2 transition-all {selectedPeople.has(
               person.id,
             )
               ? 'dark:border-slate-500 border-slate-400 bg-slate-200 dark:bg-slate-800 dark:text-white'

web/src/lib/components/shared-components/side-bar/recent-albums.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import { getAssetThumbnailUrl } from '$lib/utils';
-  import { getAllAlbums, type AlbumResponseDto } from '@immich/sdk';
-  import { handleError } from '$lib/utils/handle-error';
-  import { t } from 'svelte-i18n';
   import { userInteraction } from '$lib/stores/user.svelte';
+  import { getAssetThumbnailUrl } from '$lib/utils';
+  import { handleError } from '$lib/utils/handle-error';
+  import { getAllAlbums, type AlbumResponseDto } from '@immich/sdk';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
 
   let albums: AlbumResponseDto[] = $state([]);
 
@@ -27,7 +27,7 @@
   <a
     href={'/albums/' + album.id}
     title={album.albumName}
-    class="flex w-full place-items-center justify-between gap-4 rounded-e-full py-3 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-immich-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary ps-10 group-hover:sm:px-10 md:px-10"
+    class="flex w-full place-items-center justify-between 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 ps-10 group-hover:sm:px-10 md:px-10"
   >
     <div>
       <div

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { mdiChevronDown, mdiChevronLeft } from '@mdi/js';
   import { resolveRoute } from '$app/paths';
   import { page } from '$app/state';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiChevronDown, mdiChevronLeft } from '@mdi/js';
   import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
 
@@ -41,7 +41,7 @@
       <button
         type="button"
         aria-label={$t('recent-albums')}
-        class="relative flex cursor-default pt-4 pb-4 select-none justify-center hover:cursor-pointer hover:bg-immich-gray hover:fill-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary rounded h-fill"
+        class="relative flex cursor-default pt-4 pb-4 select-none justify-center hover:cursor-pointer hover:bg-subtle hover:fill-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary rounded h-fill"
         onclick={() => (dropdownOpen = !dropdownOpen)}
       >
         <Icon
@@ -59,7 +59,7 @@
     data-sveltekit-preload-data={preloadData ? 'hover' : 'off'}
     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-immich-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary
+    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'
       : ''}"

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

@@ -140,9 +140,7 @@
           {#each keys as key, index (key.id)}
             <tr
               class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
-                index % 2 == 0
+                index % 2 == 0 ? 'bg-subtle' : 'bg-immich-bg dark:bg-immich-dark-gray/50'
-                  ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
-                  : 'bg-immich-bg dark:bg-immich-dark-gray/50'
               }`}
             >
               <td class="w-1/3 text-ellipsis px-4 text-sm">{key.name}</td>

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

@@ -56,7 +56,7 @@
 
 {#snippet row(viewName: string, stats: AssetStatsResponseDto)}
   <tr
-    class="flex h-14 w-full place-items-center text-center dark:text-immich-dark-fg odd:bg-immich-bg even:bg-immich-gray odd:dark:bg-immich-dark-gray/50 even:dark:bg-immich-dark-gray/75"
+    class="flex h-14 w-full place-items-center text-center dark:text-immich-dark-fg odd:bg-immich-bg even:bg-subtle odd:dark:bg-immich-dark-gray/50 even:dark:bg-immich-dark-gray/75"
   >
     <td class="w-1/4 px-4 text-sm">{viewName}</td>
     <td class="w-1/4 px-4 text-sm">{stats.images.toLocaleString($locale)}</td>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import LibraryImportPathForm from '$lib/components/forms/library-import-path-form.svelte';
   import LibraryImportPathsForm from '$lib/components/forms/library-import-paths-form.svelte';
   import LibraryRenameForm from '$lib/components/forms/library-rename-form.svelte';
   import LibraryScanSettingsForm from '$lib/components/forms/library-scan-settings-form.svelte';
@@ -37,7 +38,6 @@
   import { t } from 'svelte-i18n';
   import { fade, slide } from 'svelte/transition';
   import type { PageData } from './$types';
-  import LibraryImportPathForm from '$lib/components/forms/library-import-path-form.svelte';
 
   interface Props {
     data: PageData;
@@ -299,9 +299,7 @@
             {#each libraries as library, index (library.id)}
               <tr
                 class={`grid grid-cols-6 h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
-                  index % 2 == 0
+                  index % 2 == 0 ? 'bg-subtle' : 'bg-immich-bg dark:bg-immich-dark-gray/50'
-                    ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
-                    : 'bg-immich-bg dark:bg-immich-dark-gray/50'
                 }`}
               >
                 <td class="text-ellipsis px-4 text-sm">{library.name}</td>

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

@@ -115,7 +115,7 @@
                 class="flex h-[80px] overflow-hidden w-full place-items-center text-center dark:text-immich-dark-fg {immichUser.deletedAt
                   ? 'bg-red-300 dark:bg-red-900'
                   : index % 2 == 0
-                    ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
+                    ? 'bg-subtle'
                     : 'bg-immich-bg dark:bg-immich-dark-gray/50'}"
               >
                 <td class="w-8/12 sm:w-5/12 lg:w-6/12 xl:w-4/12 2xl:w-5/12 text-ellipsis break-all px-2 text-sm"