adapt style to fau colors

src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang='ts'>
-	import '@skeletonlabs/skeleton/themes/theme-rocket.css';
 	import '@skeletonlabs/skeleton/styles/all.css';
 	import '../app.postcss';
+	import '../theme.postcss';
 
 	import { AppRail, AppRailAnchor, AppShell, LightSwitch } from '@skeletonlabs/skeleton';
 	import { page } from '$app/stores';

src/theme.postcss

@@ -0,0 +1,112 @@
+
+:root {
+	/* =~= Theme Properties =~= */
+	--theme-font-family-base: system-ui;
+	--theme-font-family-heading: system-ui;
+	--theme-font-color-base: 0 0 0;
+	--theme-font-color-dark: 255 255 255;
+	--theme-rounded-base: 9999px;
+	--theme-rounded-container: 8px;
+	--theme-border-base: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 255 255 255;
+	--on-secondary: 255 255 255;
+	--on-tertiary: 0 0 0;
+	--on-success: 0 0 0;
+	--on-warning: 0 0 0;
+	--on-error: 255 255 255;
+	--on-surface: 0 0 0;
+	/* =~= Theme Colors  =~= */
+	/* primary | #04316A */
+	--color-primary-50: 217 224 233; /* ⬅ #d9e0e9 */
+	--color-primary-100: 205 214 225; /* ⬅ #cdd6e1 */
+	--color-primary-200: 192 204 218; /* ⬅ #c0ccda */
+	--color-primary-300: 155 173 195; /* ⬅ #9badc3 */
+	--color-primary-400: 79 111 151; /* ⬅ #4f6f97 */
+	--color-primary-500: 4 49 106; /* ⬅ #04316A */
+	--color-primary-600: 4 44 95; /* ⬅ #042c5f */
+	--color-primary-700: 3 37 80; /* ⬅ #032550 */
+	--color-primary-800: 2 29 64; /* ⬅ #021d40 */
+	--color-primary-900: 2 24 52; /* ⬅ #021834 */
+	/* secondary | #2F586E */
+	--color-secondary-50: 224 230 233; /* ⬅ #e0e6e9 */
+	--color-secondary-100: 213 222 226; /* ⬅ #d5dee2 */
+	--color-secondary-200: 203 213 219; /* ⬅ #cbd5db */
+	--color-secondary-300: 172 188 197; /* ⬅ #acbcc5 */
+	--color-secondary-400: 109 138 154; /* ⬅ #6d8a9a */
+	--color-secondary-500: 47 88 110; /* ⬅ #2F586E */
+	--color-secondary-600: 42 79 99; /* ⬅ #2a4f63 */
+	--color-secondary-700: 35 66 83; /* ⬅ #234253 */
+	--color-secondary-800: 28 53 66; /* ⬅ #1c3542 */
+	--color-secondary-900: 23 43 54; /* ⬅ #172b36 */
+	/* tertiary | #18B4F1 */
+	--color-tertiary-50: 220 244 253; /* ⬅ #dcf4fd */
+	--color-tertiary-100: 209 240 252; /* ⬅ #d1f0fc */
+	--color-tertiary-200: 197 236 252; /* ⬅ #c5ecfc */
+	--color-tertiary-300: 163 225 249; /* ⬅ #a3e1f9 */
+	--color-tertiary-400: 93 203 245; /* ⬅ #5dcbf5 */
+	--color-tertiary-500: 24 180 241; /* ⬅ #18B4F1 */
+	--color-tertiary-600: 22 162 217; /* ⬅ #16a2d9 */
+	--color-tertiary-700: 18 135 181; /* ⬅ #1287b5 */
+	--color-tertiary-800: 14 108 145; /* ⬅ #0e6c91 */
+	--color-tertiary-900: 12 88 118; /* ⬅ #0c5876 */
+	/* success | #7BB725 */
+	--color-success-50: 235 244 222; /* ⬅ #ebf4de */
+	--color-success-100: 229 241 211; /* ⬅ #e5f1d3 */
+	--color-success-200: 222 237 201; /* ⬅ #deedc9 */
+	--color-success-300: 202 226 168; /* ⬅ #cae2a8 */
+	--color-success-400: 163 205 102; /* ⬅ #a3cd66 */
+	--color-success-500: 123 183 37; /* ⬅ #7BB725 */
+	--color-success-600: 111 165 33; /* ⬅ #6fa521 */
+	--color-success-700: 92 137 28; /* ⬅ #5c891c */
+	--color-success-800: 74 110 22; /* ⬅ #4a6e16 */
+	--color-success-900: 60 90 18; /* ⬅ #3c5a12 */
+	/* warning | #FDB735 */
+	--color-warning-50: 255 244 225; /* ⬅ #fff4e1 */
+	--color-warning-100: 255 241 215; /* ⬅ #fff1d7 */
+	--color-warning-200: 255 237 205; /* ⬅ #ffedcd */
+	--color-warning-300: 254 226 174; /* ⬅ #fee2ae */
+	--color-warning-400: 254 205 114; /* ⬅ #fecd72 */
+	--color-warning-500: 253 183 53; /* ⬅ #FDB735 */
+	--color-warning-600: 228 165 48; /* ⬅ #e4a530 */
+	--color-warning-700: 190 137 40; /* ⬅ #be8928 */
+	--color-warning-800: 152 110 32; /* ⬅ #986e20 */
+	--color-warning-900: 124 90 26; /* ⬅ #7c5a1a */
+	/* error | #C50F3C */
+	--color-error-50: 246 219 226; /* ⬅ #f6dbe2 */
+	--color-error-100: 243 207 216; /* ⬅ #f3cfd8 */
+	--color-error-200: 241 195 206; /* ⬅ #f1c3ce */
+	--color-error-300: 232 159 177; /* ⬅ #e89fb1 */
+	--color-error-400: 214 87 119; /* ⬅ #d65777 */
+	--color-error-500: 197 15 60; /* ⬅ #C50F3C */
+	--color-error-600: 177 14 54; /* ⬅ #b10e36 */
+	--color-error-700: 148 11 45; /* ⬅ #940b2d */
+	--color-error-800: 118 9 36; /* ⬅ #760924 */
+	--color-error-900: 97 7 29; /* ⬅ #61071d */
+	/* surface | #749DB5 */
+	--color-surface-50: 234 240 244; /* ⬅ #eaf0f4 */
+	--color-surface-100: 227 235 240; /* ⬅ #e3ebf0 */
+	--color-surface-200: 220 231 237; /* ⬅ #dce7ed */
+	--color-surface-300: 199 216 225; /* ⬅ #c7d8e1 */
+	--color-surface-400: 158 186 203; /* ⬅ #9ebacb */
+	--color-surface-500: 116 157 181; /* ⬅ #749DB5 */
+	--color-surface-600: 104 141 163; /* ⬅ #688da3 */
+	--color-surface-700: 87 118 136; /* ⬅ #577688 */
+	--color-surface-800: 70 94 109; /* ⬅ #465e6d */
+	--color-surface-900: 57 77 89; /* ⬅ #394d59 */
+}
+
+
+html, body { @apply h-full; }
+body {
+	background-image:
+		radial-gradient(at 0% 0%, rgba(var(--color-tertiary-500) / 0.33) 0px, transparent 50%),
+		radial-gradient(at 98% 1%, rgba(var(--color-tertiary-500) / 0.33) 0px, transparent 50%),
+        radial-gradient(at 1% 98%, rgba(var(--color-primary-500) / 0.33) 0px, transparent 50%),
+        radial-gradient(at 98% 98%, rgba(var(--color-primary-500) / 0.33) 0px, transparent 50%);
+	background-attachment: fixed;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+