diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index ed55dff..50a01da 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -12,4 +12,8 @@ export const load: LayoutServerLoad = async (event) => {
       secondary: user?.secondary
     };
   }
+  return {
+    primary: "fuchsia",
+    secondary: "violet"
+  };
 };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ea9d29d..e8a341e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,6 +5,25 @@
   import LoadingBar from "$lib/components/loading-bar.svelte";
   import BackgroundGradient from "$lib/components/background-gradient.svelte";
   import GithubRibbon from "$lib/components/github-ribbon.svelte";
+  import { page } from "$app/stores";
+  import { browser } from "$app/environment";
+  import { mode } from "mode-watcher";
+  import colors from "tailwindcss/colors";
+
+  if (browser) {
+    document
+      .querySelector(":root")
+      .style.setProperty(
+        "--primary-color",
+        colors[$page.data.primary][$mode == "dark" ? 600 : 500]
+      );
+    document
+      .querySelector(":root")
+      .style.setProperty(
+        "--secondary-color",
+        colors[$page.data.secondary][$mode == "dark" ? 600 : 500]
+      );
+  }
 </script>
 
 <BackgroundGradient />