global theming works

fclauncher/frontend/src/App.svelte

@@ -12,9 +12,11 @@
 
 	let width: int = 10
 	let navMargin = document.getElementById("body") as HTMLElement;
+	let r
 	 	
 		onMount(() => {
 			CheckPrerequisites().then(() => $loading = false)
+			r = document.getElementById('wrapper');
 		})
 		function setMargin(){
 			document.documentElement.style.setProperty('--navMargin', '17rem');
@@ -23,10 +25,22 @@
 			document.documentElement.style.setProperty('--navMargin', '5rem');
 		}
 
+		function initialColor() {
+			r.style.setProperty('--accent-color', 'purple');
+		}
+		function setcolor() {
+			console.log("changing theme");
+			r.style.setProperty('--accent-color', 'green');
+		}
+
+
+		window.document.onload = function() {initialColor()};
+
 
 </script>
 
 <main>
+	<div id = "wrapper">
   <div class="navbar" on:mouseover={setMargin} on:focus={setMargin} on:mouseleave={unsetMargin} >
 	<Navbar />
   </div>
@@ -38,7 +52,7 @@
 		</div>
 	{:else if $currentPage == 1}
 		<div transition:slide="{{duration:100}}" class="central">
-  		<Instancepage />
+  		<Instancepage on:change-theme = {setcolor} />
 		</div>
 	{:else if $currentPage == 2}
 		<div transition:slide="{{duration:100}}" class="central">
@@ -46,6 +60,7 @@
 		</div>
 	{/if}
   	</body>	
+	</div>
 </main>
 
 <style>
@@ -57,6 +72,10 @@
 		--bg-primary: #141418;
 		--navMargin: 5rem;
 		background-color: var(--bg-secondary);
+		
+	}
+	#wrapper{
+		--accent-color: purple;
 	}
 	.navbar{
 		z-index: 5;

fclauncher/frontend/src/Instancepage.svelte

@@ -2,7 +2,7 @@
 import {instances, loading, navMargin} from './global'
 import {InstallVanilla, LaunchInstance, GetInstances, InstallForge, InstallQuilt, InstallFabric, CheckUpdate} from '../wailsjs/go/main/InstanceManager.js'
 import {GetVersions} from '../wailsjs/go/main/App.js'
-import {onMount} from 'svelte'
+import {onMount, createEventDispatcher} from 'svelte'
     var testArray = ["test","test2","test3"];
 
     let pack: string = "";
@@ -10,14 +10,16 @@ import {onMount} from 'svelte'
     let radio: string = "";
     let marginScale: string= $navMargin + "rem";
     var r = document.querySelector('main');
+    const dispatch = createEventDispatcher()
 
-            onMount(() => {
-        r.style.setProperty('--accent-color', 'purple');
-    })
-
-    function setcolor(){
-        r.style.setProperty('--accent-color', 'green');
+    function changetheme(){
+        dispatch('change-theme');
     }
+    //function initialColor() {
+    //    r.style.setProperty('--accent-color', 'purple');
+    //}
+    //window.document.onload = function() {initialColor()};
+    
 
 
 
@@ -51,7 +53,7 @@ import {onMount} from 'svelte'
     </div>
     <div class="options-container">
         <button class="launch-button" on:click={launchclick}>Launch {radio}</button>
-        <button class="changecolor" on:click={setcolor}>Change color</button>
+        <button class="changecolor" on:click={changetheme}>Change color</button>
         </div>
 </main>