Changed color handling, in testing right now

fclauncher/frontend/src/App.svelte

@@ -53,8 +53,8 @@
 		font-size: 16px;
 		--text-primary: #b6b6b6;
 		--text-secondary: #ececec;
-		--bg-primary: #23232e;
-		--bg-secondary: #141418;
+		--bg-secondary: #2c2c33;
+		--bg-primary: #141418;
 		--navMargin: 5rem;
 		background-color: var(--bg-secondary);
 	}

fclauncher/frontend/src/Instancepage.svelte

@@ -9,6 +9,15 @@ import {onMount} from 'svelte'
     let instance: string
     let radio: string = "";
     let marginScale: string= $navMargin + "rem";
+    var r = document.querySelector('main');
+
+            onMount(() => {
+        r.style.setProperty('--accent-color', 'purple');
+    })
+
+    function setcolor(){
+        r.style.setProperty('--accent-color', 'green');
+    }
 
 
 
@@ -28,7 +37,7 @@ import {onMount} from 'svelte'
     <div class="container">
         <div class="tile-group">
             {#each $instances as instance}
-                <div class="input-container">
+                <div class="input-container" id=input-container>
                     <input id={instance} bind:group={radio} type="radio" name="radio" value={instance}>
                     <div class="radio-tile">
                         <!--icon goes here later-->
@@ -42,6 +51,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>
         </div>
 </main>
 
@@ -53,9 +63,11 @@ import {onMount} from 'svelte'
 		--text-secondary: #ececec;
 		--bg-primary: #23232e;
 		--bg-secondary: #141418;
+        
 }
 body{
-    background-color: var(--bg-secondary);   
+    background-color: var(--bg-secondary); 
+     
 }
 main{
     display: flex;
@@ -72,6 +84,8 @@ main{
     justify-content: center;
     align-items: center;
     width: 15rem;
+    flex-direction: column;
+    position: relative;
 }
 .launch-button{
     height: 3rem;
@@ -91,6 +105,7 @@ main{
     height: 7rem;
     width: 7rem;
     margin: 0.5rem;
+
 }
 .input-container input{
     position: absolute;
@@ -101,27 +116,27 @@ main{
     opacity: 0;
     cursor: pointer;
 }
-.input-container .radio-tile{
+.input-container .radio-tile{  
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 100%;
-    border: 2px solid purple;
+    border: 2px solid var(--accent-color);
     border-radius: 8px;
     transition: all 300ms ease;
 }
 .input-container label{
-    color: purple;
+    color: var(--accent-color);
     font-size: 1.2rem;
     font-weight: 600;
 }
 input:checked + .radio-tile{
-    background-color: purple;
-    box-shadow: 0 0 12px purple;
+    background-color: var(--accent-color);
+    box-shadow: 0 0 12px var(--accent-color);
 }
 input:hover + .radio-tile{
-    box-shadow: 0 0 12px purple;
+    box-shadow: 0 0 12px var(--accent-color);
 }
 input:checked + .radio-tile label{
     color: var(--text-primary);

fclauncher/frontend/src/Navbar.svelte

@@ -73,8 +73,8 @@ function unextend(){
 		font-size: 16px;
 		--text-primary: #b6b6b6;
 		--text-secondary: #ececec;
-		--bg-primary: #23232e;
-		--bg-secondary: #141418;
+		--bg-secondary: #23232e;
+		--bg-primary: #141418;
 	}
 
     .navbar {