switchable css variables for theming

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>

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',
       )}
     >

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;

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: {