Theme Buttons

fclauncher/frontend/src/Instancepage.svelte

@@ -134,7 +134,7 @@ main{
     font-weight: 600;
 }
 input:checked + .radio-tile{
-    background-color: var(--accent-color);
+    background: var(--accent-color);
     box-shadow: 0 0 12px var(--accent-color);
 }
 input:hover + .radio-tile{

fclauncher/frontend/src/Settingspage.svelte

@@ -20,19 +20,52 @@ function changethemeback(){
 </script>
 <main>
     <div class="container">
-        <button class="theme-button" on:click={() => changetheme('green')}>Green</button>
+        <button id="green" class="theme-button" on:click={() => changetheme('green')}>Green</button>
-        <button class="theme-button" on:click={() => changetheme('purple')}>Purple</button>
+        <button id="purple" class="theme-button" on:click={() => changetheme('purple')}>Purple</button>
+        <button id="pink" class="theme-button" on:click={() => changetheme('#ba2abf')}>Pink</button>
 
     </div>
 
 </main>
 <style>
+* {
+   box-sizing: border-box;
+    font-family: sans-serif;
+    --text-primary: #b6b6b6;
+		--text-secondary: #ececec;
+		--bg-primary: #23232e;
+		--bg-secondary: #141418;
+        
+}
 .container{
     display: flex;
     justify-content: center;
     margin: 3rem;
 }
 .theme-button{
+    background-color: var(--accent-color);
     margin: 1rem;
+    color: var(--text-primary);
+    font-size: large;
+    border-radius: 4px;
+    border-style: solid;
+    width: 4rem;
+    justify-content: center;
+    height: 4rem;
+}
+.theme-button:hover{
+    color: var(--text-secondary);
+}
+#green{
+    background-color: green;
+    border-color: green;
+}
+#purple{
+    background-color: purple;
+    border-color: purple;
+}
+#pink{
+    background-color: #ba2abf;
+    border-color: #ba2abf;
 }
 </style>