From ec0fdb87c6f11ab41662d2f8ba73db510afe603f Mon Sep 17 00:00:00 2001
From: Cuptain <ldsjazzman@gmail.com>
Date: Wed, 27 Nov 2024 14:56:39 +1100
Subject: [PATCH] Theme Buttons

---
 fclauncher/frontend/src/Instancepage.svelte |  2 +-
 fclauncher/frontend/src/Settingspage.svelte | 37 +++++++++++++++++++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/fclauncher/frontend/src/Instancepage.svelte b/fclauncher/frontend/src/Instancepage.svelte
index 714b16f..ac8c9b7 100644
--- a/fclauncher/frontend/src/Instancepage.svelte
+++ b/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{
diff --git a/fclauncher/frontend/src/Settingspage.svelte b/fclauncher/frontend/src/Settingspage.svelte
index ca737db..1d2894e 100644
--- a/fclauncher/frontend/src/Settingspage.svelte
+++ b/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 class="theme-button" on:click={() => changetheme('purple')}>Purple</button>
+        <button id="green" class="theme-button" on:click={() => changetheme('green')}>Green</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>
\ No newline at end of file