diff --git a/packages/react/src/components/style.css b/packages/react/src/components/style.css
index cb6bd3ff..8f09e0f7 100644
--- a/packages/react/src/components/style.css
+++ b/packages/react/src/components/style.css
@@ -1,5 +1,5 @@
 .cm-editor {
-  /* background-color: transparent !important; */
+  background-color: transparent !important;
   height: 100%;
   z-index: 11;
   font-size: 18px;
@@ -14,5 +14,5 @@
 }
 
 .cm-line > * {
-  /* background: #00000095; */
+  background: var(--background);
 }
diff --git a/website/src/components/HeadCommon.astro b/website/src/components/HeadCommon.astro
index ce00f97e..b1f948d4 100644
--- a/website/src/components/HeadCommon.astro
+++ b/website/src/components/HeadCommon.astro
@@ -28,3 +28,34 @@ const base = BASE_URL;
 
 <script src="/src/pwa.ts"></script>
 {pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
+
+<script>
+  // const themeStyle = document.getElementById('theme');
+  const themeStyle = document.createElement('style');
+  themeStyle.id = 'strudel-theme';
+  document.head.append(themeStyle);
+  function setTheme(theme) {
+    const cssVariables = Object.entries(theme)
+      .map(([key, value]) => `--${key}: ${value};`)
+      .join('\n');
+    themeStyle.innerHTML = `:root {
+      ${cssVariables}
+    }`;
+  }
+  // default theme
+  setTheme({
+    background: '#222',
+    foreground: '#FFFFFF',
+    caret: '#FFFFFF',
+    selection: '#49483E',
+    selectionMatch: '#49483E',
+    gutterBackground: '#272822',
+    gutterForeground: '#FFFFFF70',
+    lineHighlight: '#00000059',
+  });
+  document.addEventListener('strudel-theme', (e: any) => {
+    console.log('strudel theme', e.detail);
+    // TODO: persist theme
+    setTheme(e.detail);
+  });
+</script>
diff --git a/website/src/layouts/MainLayout.astro b/website/src/layouts/MainLayout.astro
index 84eb320b..8fd78ccb 100644
--- a/website/src/layouts/MainLayout.astro
+++ b/website/src/layouts/MainLayout.astro
@@ -31,7 +31,7 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
     </title>
   </head>
 
-  <body class="h-screen text-gray-50">
+  <body class="h-screen text-gray-50 bg-background">
     <div class="w-full h-full space-y-4 flex flex-col">
       <header class="max-w-full fixed top-0 w-full z-[100]">
         <Header currentPage={currentPage} />
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index fd6f96c1..24365321 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -8,7 +8,7 @@ import { Repl } from '../repl/Repl.jsx';
     <HeadCommon />
     <title>Strudel REPL</title>
   </head>
-  <body>
+  <body class="bg-background">
     <Repl client:only="react" />
   </body>
 </html>
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index 3ddf1dc4..898722f9 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@@ -68,7 +68,7 @@ export function Footer({ context }) {
     return null;
   }
   return (
-    <footer className="bg-footer z-[20]">
+    <footer className="bg-lineHighlight z-[20]">
       <div className="flex justify-between px-2">
         <div className={cx('flex select-none max-w-full overflow-auto', activeFooter && 'pb-2')}>
           <FooterTab name="intro" label="welcome" />
@@ -179,6 +179,22 @@ export function Footer({ context }) {
                   onClick={() => {
                     console.log(k, themeColors(t));
                     setTheme(t);
+                    document.dispatchEvent(
+                      new CustomEvent('strudel-theme', {
+                        detail: {
+                          // TODO: dynamic
+                          background: '#21202e',
+                          foreground: '#edecee',
+                          caret: '#a277ff',
+                          selection: '#3d375e7f',
+                          selectionMatch: '#3d375e7f',
+                          gutterBackground: '#21202e',
+                          gutterForeground: '#edecee',
+                          gutterBorder: 'transparent',
+                          lineHighlight: '#a394f033',
+                        },
+                      }),
+                    );
                   }}
                 >
                   <div className="mb-2 w-full text-center">{k}</div>
diff --git a/website/src/repl/Header.jsx b/website/src/repl/Header.jsx
index 1ea539fc..0cf77dff 100644
--- a/website/src/repl/Header.jsx
+++ b/website/src/repl/Header.jsx
@@ -32,7 +32,7 @@ export function Header({ context }) {
       id="header"
       className={cx(
         'py-1 flex-none w-full text-black justify-between z-[100] text-lg  select-none sticky top-0',
-        !isZen && !isEmbedded && 'bg-header',
+        !isZen && !isEmbedded && 'bg-lineHighlight',
         isEmbedded ? 'flex' : 'md:flex',
       )}
     >
diff --git a/website/src/repl/Repl.css b/website/src/repl/Repl.css
index 91132464..11d61f53 100644
--- a/website/src/repl/Repl.css
+++ b/website/src/repl/Repl.css
@@ -10,10 +10,6 @@
   opacity: 0.5;
 }
 
-.cm-gutters {
-  display: none !important;
-}
-
 .cm-content {
   padding-top: 12px !important;
   padding-left: 8px !important;
diff --git a/website/src/repl/themes.mjs b/website/src/repl/themes.mjs
index 9303ca00..44818b8a 100644
--- a/website/src/repl/themes.mjs
+++ b/website/src/repl/themes.mjs
@@ -61,6 +61,18 @@ export const themes = {
   tokyoNightDay,
   xcodeLight,
 };
+// TODO: persist theme
+export const defaultSettingsAura = {
+  background: '#21202e',
+  foreground: '#edecee',
+  caret: '#a277ff',
+  selection: '#3d375e7f',
+  selectionMatch: '#3d375e7f',
+  gutterBackground: '#21202e',
+  gutterForeground: '#edecee',
+  gutterBorder: 'transparent',
+  lineHighlight: '#a394f033',
+};
 
 export const vars = {
   abcdef: {
diff --git a/website/src/styles/index.css b/website/src/styles/index.css
index ef62234d..5c95a662 100644
--- a/website/src/styles/index.css
+++ b/website/src/styles/index.css
@@ -1,7 +1,3 @@
-body {
-  background-color: #222;
-}
-
 .cm-gutters {
   display: none !important;
 }
diff --git a/website/tailwind.config.cjs b/website/tailwind.config.cjs
index f84b5c6e..dcd550df 100644
--- a/website/tailwind.config.cjs
+++ b/website/tailwind.config.cjs
@@ -22,6 +22,16 @@ module.exports = {
         header: '#00000050',
         // header: 'transparent',
         footer: '#00000050',
+        // codemirror-theme settings
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
+        caret: 'var(--caret)',
+        selection: 'var(--selection)',
+        selectionMatch: 'var(--selectionMatch)',
+        gutterBackground: 'var(--gutterBackground)',
+        gutterForeground: 'var(--gutterForeground)',
+        gutterBorder: 'var(--gutterBorder)',
+        lineHighlight: 'var(--lineHighlight)',
       },
       typography(theme) {
         return {
