improved styling

frontend/src/App.svelte

@@ -39,17 +39,10 @@
     let translations_ready = $state(false);
 
     async function load(){
-        loadTheme(user.theme);
         await loadTranslation(user.language?user.language:'de');
         translations_ready = true;
     }
 
-    function loadTheme(name){
-        if (!name) return;
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/css/${name}.css`;
-        fetch(url).then(resp => resp.text()).then(css => document.getElementById('usercss').innerText = css);
-    }
-
     async function testGuard({to, from, next}){
         await checkUser();
         window.scrollTo(0,0);
@@ -57,8 +50,20 @@
     }
 
     $effect(load);
+    let origin = window.location.origin.replace(':5173',':8080');
 </script>
 
+<svelte:head>
+    {#if user}
+    <link rel="stylesheet" href="{origin}/css/{user.theme}.css" />
+    <link rel="stylesheet" href="{origin}/css/{user.theme}-color.css" />
+    {:else}
+    <link rel="stylesheet" href="{origin}/css/default.css" />
+    <link rel="stylesheet" href="{origin}/css/default-color.css" />
+    {/if}
+</svelte:head>
+
+
 {#if translations_ready }
     {#if user.name}
         <Router beforeEach={[testGuard]}>