feat(web): onboarding (#6066)

* feat(web): onboarding

* feat: openapi

* feat: modulization

* feat: page advancing

* Animation

* Add storage templaete settings

* sql

* more style

* Theme

* information and styling

* hide/show table

* Styling

* Update user property

* fix test

* fix test:

* fix e2e

* test

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

Co-authored-by: bo0tzz <git@bo0tzz.me>

* naming

* use System Metadata

* better return type

* onboarding using server metadata

* revert previous changes in user entity

* sql

* test web

* fix test server

* server/web test

* more test

* consolidate color theme change logic

* consolidate save button to storage template

* merge main

* fix web

---------

Co-authored-by: bo0tzz <git@bo0tzz.me>

web/src/routes/+layout.svelte

@@ -18,6 +18,8 @@
   import { api } from '@api';
   import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket';
   import { user } from '$lib/stores/user.store';
+  import { browser } from '$app/environment';
+  import { colorTheme } from '$lib/stores/preferences.store';
 
   let showNavigationLoadingBar = false;
   let albumId: string | undefined;
@@ -25,6 +27,16 @@
   const isSharedLinkRoute = (route: string | null) => route?.startsWith('/(user)/share/[key]');
   const isAuthRoute = (route?: string) => route?.startsWith('/auth');
 
+  $: {
+    if (browser) {
+      if ($colorTheme === 'light') {
+        document.documentElement.classList.remove('dark');
+      } else {
+        document.documentElement.classList.add('dark');
+      }
+    }
+  }
+
   if (isSharedLinkRoute($page.route?.id)) {
     api.setKey($page.params.key);
   }