feat(web): custom stylesheets (#4602)

* add initial ui and api definitions for stylesheets

* proper saving

* make custom css work

* add textarea

* rebuild api

* run prettier

* add typecast

* update typings

* move css accordion to be sorted alphabetically

* set content-type properly

* rename stylesheets to theme

* fix server test

web/src/routes/+layout.svelte

@@ -67,6 +67,7 @@
 <svelte:head>
   <title>{$page.data.meta?.title || 'Web'} - Immich</title>
   <link rel="manifest" href="/manifest.json" />
+  <link rel="stylesheet" href="/custom.css" />
   <meta name="theme-color" content="currentColor" />
   <FaviconHeader />
   <AppleHeader />

web/src/routes/admin/system-settings/+page.svelte

@@ -10,6 +10,7 @@
   import StorageTemplateSettings from '$lib/components/admin-page/settings/storage-template/storage-template-settings.svelte';
   import ThumbnailSettings from '$lib/components/admin-page/settings/thumbnail/thumbnail-settings.svelte';
   import TrashSettings from '$lib/components/admin-page/settings/trash-settings/trash-settings.svelte';
+  import ThemeSettings from '$lib/components/admin-page/settings/theme/theme-settings.svelte';
   import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import { downloadManager } from '$lib/stores/download';
@@ -96,6 +97,10 @@
         />
       </SettingAccordion>
 
+      <SettingAccordion title="Theme Settings" subtitle="Manage customization of the Immich web interface">
+        <ThemeSettings disabled={$featureFlags.configFile} themeConfig={configs.theme} />
+      </SettingAccordion>
+
       <SettingAccordion title="Thumbnail Settings" subtitle="Manage the resolution of thumbnail sizes">
         <ThumbnailSettings disabled={$featureFlags.configFile} thumbnailConfig={configs.thumbnail} />
       </SettingAccordion>

web/src/routes/custom.css/+server.ts

@@ -0,0 +1,9 @@
+import { RequestHandler, text } from '@sveltejs/kit';
+export const GET = (async ({ locals: { api } }) => {
+  const { customCss } = await api.systemConfigApi.getConfig().then((res) => res.data.theme);
+  return text(customCss, {
+    headers: {
+      'Content-Type': 'text/css',
+    },
+  });
+}) satisfies RequestHandler;