diff --git a/fclauncher/frontend/src/App.svelte b/fclauncher/frontend/src/App.svelte
index 83de59f..2eb1bc0 100644
--- a/fclauncher/frontend/src/App.svelte
+++ b/fclauncher/frontend/src/App.svelte
@@ -5,7 +5,7 @@
 	import Modpacks from './Modpacks.svelte'
   import {CheckPrerequisites} from '../wailsjs/go/main/App.js'
 	import { onMount } from 'svelte'
-	import { loading, currentPage, instances } from './global'
+	import { loading, currentPage, instances, themecolor } from './global'
 	import { slide } from 'svelte/transition'
     import Navbar from './Navbar.svelte'
 	import Instancepage from './Instancepage.svelte'
@@ -43,11 +43,11 @@
 		}
 		function setcolor() {
 			console.log("changing theme");
-			r.style.setProperty('--accent-color', 'green');
+			r.style.setProperty('--accent-color', $themecolor);
 		}
 
 
-		window.document.onload = function() {initialColor()};
+		window.document.onload = function() {setcolor()};
 
 
 </script>
diff --git a/fclauncher/frontend/src/Settingspage.svelte b/fclauncher/frontend/src/Settingspage.svelte
index 8dc94b2..ca737db 100644
--- a/fclauncher/frontend/src/Settingspage.svelte
+++ b/fclauncher/frontend/src/Settingspage.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import {instances, loading, navMargin} from './global'
+import {instances, loading, navMargin, themecolor} 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, createEventDispatcher} from 'svelte'
@@ -7,7 +7,8 @@ import {onMount, createEventDispatcher} from 'svelte'
 var r = document.querySelector('main');
 const dispatch = createEventDispatcher()
 
-function changetheme(){
+function changetheme(color){
+        $themecolor = color;
         dispatch('change-theme');
     }
 
@@ -19,8 +20,8 @@ function changethemeback(){
 </script>
 <main>
     <div class="container">
-        <button class="theme-button" on:click={changetheme}>Change Theme</button>
-        <button class="theme-button" on:click={changethemeback}>Change Theme Again</button>
+        <button class="theme-button" on:click={() => changetheme('green')}>Green</button>
+        <button class="theme-button" on:click={() => changetheme('purple')}>Purple</button>
 
     </div>
 
diff --git a/fclauncher/frontend/src/global.ts b/fclauncher/frontend/src/global.ts
index d5f69e7..1dc53ee 100644
--- a/fclauncher/frontend/src/global.ts
+++ b/fclauncher/frontend/src/global.ts
@@ -3,4 +3,5 @@ export const loading = writable(true)
 export const addingInstance = writable(false)
 export const instances = writable([])
 export const navMargin = writable(3)
-export const currentPage = writable(1)
\ No newline at end of file
+export const currentPage = writable(1)
+export const themecolor = writable("purple")
\ No newline at end of file