diff --git a/src/app/[eventSlug]/layout.tsx b/src/app/[eventSlug]/layout.tsx
new file mode 100644
index 0000000..d5b2a47
--- /dev/null
+++ b/src/app/[eventSlug]/layout.tsx
@@ -0,0 +1,31 @@
+import '@styles/style.scss';
+import { directus } from '@/directus';
+import { Event } from '@/types/aliases';
+import { readItems } from '@directus/sdk';
+
+export default async function EventLayout({ children, params: { eventSlug } }: { children: React.ReactNode, params: { eventSlug: string } }) {
+  let event: Event = (
+    await directus().request(
+      readItems('events', {
+        fields: [
+          // Explicit list to avoid leaking the admin secret
+          'background_color'
+        ],
+        filter: {
+          slug: { _eq: eventSlug },
+        },
+      })
+    )
+  )[0];
+
+  let col = event.background_color;
+
+  return (
+    <>
+      <style>
+        {`:root { --bg-color: ${col}; };`}
+      </style>
+      <div>{children}</div>
+    </>
+  );
+}
diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
index 82afcd6..812d55a 100644
--- a/src/styles/base/_colors.scss
+++ b/src/styles/base/_colors.scss
@@ -1,17 +1,18 @@
 @use 'sass:color';
 
 :root {
-  $base: #e775d9;
-
-  --text-color: #{color.scale($base, $lightness: 80%)};
-  --bg-color: #{$base};
-
-  --button-text-color: #{color.scale($base, $lightness: -50%)};
-  --button-bg-color: #{color.scale($base, $lightness: 70%)};
-  --button-bg-color-hover: #{color.scale($base, $lightness: 60%)};
-
+  --bg-color: #d65d00;
+  --white: #ffffff;
+  --black: #000000;
+  --transparent-black: rgba(0, 0, 0, 0.7);
   --transparent-white: rgba(255, 255, 255, 0.1);
   --transparent-white-2: rgba(255, 255, 255, 0.2);
 
-  --transparent-dark: #{color.scale($base, $lightness: -15%, $alpha: -30%)};
+  --text-color: color-mix(in hsl, var(--bg-color) 20%, var(--white) 100%);
+
+  --button-text-color: color-mix(in hsl, var(--bg-color) 20%, var(--black) 60%);
+  --button-bg-color: color-mix(in hsl, var(--bg-color) 20%, var(--white) 70%);
+  --button-bg-color-hover: color-mix(in hsl, var(--bg-color) 20%, var(--white) 60%);
+  
+  --transparent-dark: color-mix(in hsl, var(--bg-color) 20%, var(--transparent-black) 60%);
 }