switchable css variables for theming

2026-01-14 15:18:30 +00:00 · 2023-02-10 11:32:36 +01:00 · 2023-02-10 11:32:36 +01:00 · 0b994a1b0f
commit 0b994a1b0f
parent 0326244956
10 changed files with 75 additions and 14 deletions
--- 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);
 }
--- 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>
--- 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} />
--- 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>
--- 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>
--- 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',
      )}
    >
--- 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;
--- 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: {
--- 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;
 }
--- 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 {