diff --git a/src/app.css b/src/app.css
index 9e7fffc..261180f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -14,13 +14,13 @@
   --secondary-700: oklch(from var(--primary-500) .7 c calc(h + var(--accent-ofset)));
   --secondary-900: oklch(from var(--primary-500) .6 c calc(h + var(--accent-ofset)));
 
-  --surface-300: light-dark(oklch(from var(--secondary-500) .9 .02 h), oklch(from var(--secondary-500) .2 .02 h));
-  --surface-400: oklch(from var(--surface-300) calc(l + .025) c h);
-  --surface-500: oklch(from var(--surface-400) calc(l + .025) c h);
-  --surface-600: oklch(from var(--surface-500) calc(l + .025) c h);
-  --surface-700: oklch(from var(--surface-600) calc(l + .025) c h);
+  --surface-300: light-dark(oklch(from var(--primary-500) .9 .02 h), oklch(from var(--primary-500) .2 .02 h));
+  --surface-400: oklch(from var(--primary-300) calc(l + .025) c h);
+  --surface-500: oklch(from var(--primary-400) calc(l + .025) c h);
+  --surface-600: oklch(from var(--primary-500) calc(l + .025) c h);
+  --surface-700: oklch(from var(--primary-600) calc(l + .025) c h);
 
-  --text-1: light-dark(oklch(from var(--secondary-500) .2 .02 h), oklch(from var(--secondary-500) .9 .02 h));
+  --text-1: light-dark(oklch(from var(--primary-500) .2 .02 h), oklch(from var(--primary-500) .9 .02 h));
   --text-2: oklch(from var(--text-1) calc(l + .1) c h);
 
   --info: light-dark(oklch(.71 .17 249), oklch(.71 .17 249));
diff --git a/src/routes/(editor).tsx b/src/routes/(editor).tsx
index abd29df..b069ddf 100644
--- a/src/routes/(editor).tsx
+++ b/src/routes/(editor).tsx
@@ -40,19 +40,13 @@ export default function Editor(props: ParentProps) {
 
         <Show when={theme}>{
             theme => {
-                const themeColor = createMemo(() => {
-                    theme();
-
-                    return isServer ? 'lch(.5 .75 0deg)' : globalThis.getComputedStyle(document.body).backgroundColor;
-                });
-
                 createEffect(() => {
-                    console.log(theme(), themeColor());
+                    console.log(theme());
                 })
 
                 return <>
                     <Meta name="color-scheme" content={theme().colorScheme} />
-                    <Meta name="theme-color" content={themeColor()} />
+                    <Meta name="theme-color" content={`oklch(.5 .02 ${theme().hue})`} />
 
                     <style>{`
                         :root {