From 46f70e6a5ea7d638203946ba0b20454d1494ca63 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 10 Feb 2023 12:54:15 +0100
Subject: [PATCH] persisted theme + add all settings

---
 website/src/components/HeadCommon.astro |  38 +--
 website/src/repl/Footer.jsx             |  28 +--
 website/src/repl/Header.jsx             |   4 +-
 website/src/repl/Repl.jsx               |   8 +-
 website/src/repl/themes.mjs             | 319 +++++++++++++++++++++++-
 5 files changed, 342 insertions(+), 55 deletions(-)

diff --git a/website/src/components/HeadCommon.astro b/website/src/components/HeadCommon.astro
index b1f948d4..22828f26 100644
--- a/website/src/components/HeadCommon.astro
+++ b/website/src/components/HeadCommon.astro
@@ -1,6 +1,7 @@
 ---
 import { pwaInfo } from 'virtual:pwa-info';
 import '../styles/index.css';
+import { settings } from '../repl/themes.mjs';
 
 const { BASE_URL } = import.meta.env;
 const base = BASE_URL;
@@ -29,33 +30,32 @@ const base = BASE_URL;
 <script src="/src/pwa.ts"></script>
 {pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
 
-<script>
+<script define:vars={{ settings }}>
   // 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)
+
+  function getTheme(name) {
+    if (!settings[name]) {
+      console.warn('theme', name, 'has no settings');
+    }
+    return {
+      name,
+      settings: settings[name] || settings.strudelTheme,
+    };
+  }
+  function setTheme(name) {
+    console.log('setTheme', name);
+    const { settings } = getTheme(name);
+    const cssVariables = Object.entries(settings)
       .map(([key, value]) => `--${key}: ${value};`)
       .join('\n');
     themeStyle.innerHTML = `:root {
       ${cssVariables}
     }`;
+    localStorage.setItem('strudel-theme', name);
   }
-  // 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);
-  });
+  setTheme(localStorage.getItem('strudel-theme'));
+  document.addEventListener('strudel-theme', (e) => setTheme(e.detail));
 </script>
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index 898722f9..f2f6f304 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@@ -55,8 +55,8 @@ export function Footer({ context }) {
       <div
         onClick={() => setActiveFooter(name)}
         className={cx(
-          'h-8 px-2 text-white cursor-pointer hover:text-tertiary flex items-center space-x-1 border-b',
-          activeFooter === name ? 'border-white hover:border-tertiary' : 'border-transparent',
+          'h-8 px-2 text-foreground cursor-pointer hover:text-tertiary flex items-center space-x-1 border-b',
+          activeFooter === name ? 'border-foreground hover:border-tertiary' : 'border-transparent',
         )}
       >
         {label || name}
@@ -78,7 +78,7 @@ export function Footer({ context }) {
           <FooterTab name="settings" />
         </div>
         {activeFooter !== '' && (
-          <button onClick={() => setActiveFooter('')} className="text-white" aria-label="Close Panel">
+          <button onClick={() => setActiveFooter('')} className="text-foreground" aria-label="Close Panel">
             <XMarkIcon className="w-5 h-5" />
           </button>
         )}
@@ -173,31 +173,19 @@ export function Footer({ context }) {
                 <div
                   key={k}
                   className={classNames(
-                    'border-4 border-transparent cursor-pointer p-4 bg-bg rounded-md hover:bg-stone-700',
-                    theme === t ? '!border-stone-500' : '',
+                    'border-2 border-transparent cursor-pointer p-4 bg-background rounded-md',
+                    theme === k ? '!border-foreground' : '',
                   )}
                   onClick={() => {
-                    console.log(k, themeColors(t));
-                    setTheme(t);
+                    setTheme(k);
                     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',
-                        },
+                        detail: k,
                       }),
                     );
                   }}
                 >
-                  <div className="mb-2 w-full text-center">{k}</div>
+                  <div className="mb-2 w-full text-center text-foreground">{k}</div>
                   <div className="flex justify-stretch overflow-hidden rounded-md">
                     {themeColors(t).map((c, i) => (
                       <div key={i} className="grow h-6" style={{ background: c }} />
diff --git a/website/src/repl/Header.jsx b/website/src/repl/Header.jsx
index 0cf77dff..5d29d88f 100644
--- a/website/src/repl/Header.jsx
+++ b/website/src/repl/Header.jsx
@@ -49,7 +49,7 @@ export function Header({ context }) {
           className={cx(
             isEmbedded ? 'text-l cursor-pointer' : 'text-xl',
             // 'bg-clip-text bg-gradient-to-r from-primary to-secondary  text-transparent font-bold',
-            'text-white font-bold flex space-x-2 items-center',
+            'text-foreground font-bold flex space-x-2 items-center',
           )}
         >
           <div
@@ -66,7 +66,7 @@ export function Header({ context }) {
         </h1>
       </div>
       {!isZen && (
-        <div className="flex max-w-full overflow-auto text-white ">
+        <div className="flex max-w-full overflow-auto text-foreground">
           <button
             onClick={handleTogglePlay}
             title={started ? 'stop' : 'play'}
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index d01c1ec0..7bdb40f5 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -22,7 +22,9 @@ import { Header } from './Header';
 import { prebake } from './prebake.mjs';
 import * as tunes from './tunes.mjs';
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
-import strudelTheme from '@strudel.cycles/react/src/themes/strudel-theme';
+import { themes } from './themes.mjs';
+
+const initialTheme = localStorage.getItem('strudel-theme') || 'strudelTheme';
 
 initAudioOnFirstClick();
 
@@ -110,7 +112,7 @@ export const ReplContext = createContext(null);
 export function Repl({ embedded = false }) {
   const isEmbedded = embedded || window.location !== window.parent.location;
   const [view, setView] = useState(); // codemirror view
-  const [theme, setTheme] = useState(strudelTheme);
+  const [theme, setTheme] = useState(initialTheme);
   const [lastShared, setLastShared] = useState();
   const [activeFooter, setActiveFooter] = useState('');
   const [isZen, setIsZen] = useState(false);
@@ -273,7 +275,7 @@ export function Repl({ embedded = false }) {
         <Header context={context} />
         <section className="grow flex text-gray-100 relative overflow-auto cursor-text pb-0" id="code">
           <CodeMirror
-            theme={theme}
+            theme={themes[theme] || themes.strudelTheme}
             value={code}
             onChange={handleChangeCode}
             onViewChanged={setView}
diff --git a/website/src/repl/themes.mjs b/website/src/repl/themes.mjs
index 44818b8a..4f2c6367 100644
--- a/website/src/repl/themes.mjs
+++ b/website/src/repl/themes.mjs
@@ -61,17 +61,314 @@ 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 settings = {
+  strudelTheme: {
+    background: '#222',
+    foreground: '#FFFFFF',
+    caret: '#FFFFFF',
+    selection: '#49483E',
+    selectionMatch: '#49483E',
+    gutterBackground: '#272822',
+    gutterForeground: '#FFFFFF70',
+    lineHighlight: '#00000059',
+  },
+  abcdef: {
+    background: '#0f0f0f',
+    foreground: '#defdef',
+    caret: '#00FF00',
+    selection: '#515151',
+    selectionMatch: '#515151',
+    gutterBackground: '#555',
+    gutterForeground: '#FFFFFF',
+    lineHighlight: '#314151',
+  },
+  androidstudio: {
+    background: '#282b2e',
+    foreground: '#a9b7c6',
+    caret: '#00FF00',
+    selection: '#343739',
+    selectionMatch: '#343739',
+    lineHighlight: '#343739',
+  },
+  atomone: {
+    background: '#272C35',
+    foreground: '#9d9b97',
+    caret: '#797977',
+    selection: '#ffffff30',
+    selectionMatch: '#2B323D',
+    gutterBackground: '#272C35',
+    gutterForeground: '#465063',
+    gutterBorder: 'transparent',
+    lineHighlight: '#2B323D',
+  },
+  aura: {
+    background: '#21202e',
+    foreground: '#edecee',
+    caret: '#a277ff',
+    selection: '#3d375e7f',
+    selectionMatch: '#3d375e7f',
+    gutterBackground: '#21202e',
+    gutterForeground: '#edecee',
+    gutterBorder: 'transparent',
+    lineHighlight: '#a394f033',
+  },
+  bbedit: {
+    background: '#FFFFFF',
+    foreground: '#000000',
+    caret: '#FBAC52',
+    selection: '#FFD420',
+    selectionMatch: '#FFD420',
+    gutterBackground: '#f5f5f5',
+    gutterForeground: '#4D4D4C',
+    gutterBorder: 'transparent',
+    lineHighlight: '#00000012',
+  },
+  bespin: {
+    background: '#28211c',
+    foreground: '#9d9b97',
+    caret: '#797977',
+    selection: '#36312e',
+    selectionMatch: '#4f382b',
+    gutterBackground: '#28211c',
+    gutterForeground: '#666666',
+    lineHighlight: 'rgba(255, 255, 255, 0.1)',
+  },
+  darcula: {
+    background: '#2B2B2B',
+    foreground: '#f8f8f2',
+    caret: '#FFFFFF',
+    selection: 'rgba(255, 255, 255, 0.1)',
+    selectionMatch: 'rgba(255, 255, 255, 0.2)',
+    gutterBackground: 'rgba(255, 255, 255, 0.1)',
+    gutterForeground: '#999',
+    gutterBorder: 'transparent',
+    lineHighlight: 'rgba(255, 255, 255, 0.1)',
+  },
+  dracula: {
+    background: '#282a36',
+    foreground: '#f8f8f2',
+    caret: '#f8f8f0',
+    selection: 'rgba(255, 255, 255, 0.1)',
+    selectionMatch: 'rgba(255, 255, 255, 0.2)',
+    gutterBackground: '#282a36',
+    gutterForeground: '#6D8A88',
+    gutterBorder: 'transparent',
+    lineHighlight: 'rgba(255, 255, 255, 0.1)',
+  },
+  duotoneLight: {
+    background: '#faf8f5',
+    foreground: '#b29762',
+    caret: '#93abdc',
+    selection: '#e3dcce',
+    selectionMatch: '#e3dcce',
+    gutterBackground: '#faf8f5',
+    gutterForeground: '#cdc4b1',
+    gutterBorder: 'transparent',
+    lineHighlight: '#EFEFEF',
+  },
+  duotoneDark: {
+    background: '#2a2734',
+    foreground: '#6c6783',
+    caret: '#ffad5c',
+    selection: 'rgba(255, 255, 255, 0.1)',
+    gutterBackground: '#2a2734',
+    gutterForeground: '#545167',
+    lineHighlight: '#36334280',
+  },
+  eclipse: {
+    background: '#fff',
+    foreground: '#000',
+    caret: '#FFFFFF',
+    selection: '#d7d4f0',
+    selectionMatch: '#d7d4f0',
+    gutterBackground: '#f7f7f7',
+    gutterForeground: '#999',
+    lineHighlight: '#e8f2ff',
+    gutterBorder: 'transparent',
+  },
+  githubLight: {
+    background: '#fff',
+    foreground: '#24292e',
+    selection: '#BBDFFF',
+    selectionMatch: '#BBDFFF',
+    gutterBackground: '#fff',
+    gutterForeground: '#6e7781',
+  },
+  githubDark: {
+    background: '#0d1117',
+    foreground: '#c9d1d9',
+    caret: '#c9d1d9',
+    selection: '#003d73',
+    selectionMatch: '#003d73',
+    lineHighlight: '#36334280',
+  },
+  gruvboxDark: {
+    background: '#282828',
+    foreground: '#ebdbb2',
+    caret: '#ebdbb2',
+    selection: '#bdae93',
+    selectionMatch: '#bdae93',
+    lineHighlight: '#3c3836',
+    gutterBackground: '#282828',
+    gutterForeground: '#7c6f64',
+  },
+  gruvboxLight: {
+    background: '#fbf1c7',
+    foreground: '#3c3836',
+    caret: '#af3a03',
+    selection: '#ebdbb2',
+    selectionMatch: '#bdae93',
+    lineHighlight: '#ebdbb2',
+    gutterBackground: '#ebdbb2',
+    gutterForeground: '#665c54',
+    gutterBorder: 'transparent',
+  },
+  materialDark: {
+    background: '#2e3235',
+    foreground: '#bdbdbd',
+    caret: '#a0a4ae',
+    selection: '#d7d4f0',
+    selectionMatch: '#d7d4f0',
+    gutterBackground: '#2e3235',
+    gutterForeground: '#999',
+    gutterActiveForeground: '#4f5b66',
+    lineHighlight: '#545b61',
+  },
+  materialLight: {
+    background: '#FAFAFA',
+    foreground: '#90A4AE',
+    caret: '#272727',
+    selection: '#80CBC440',
+    selectionMatch: '#FAFAFA',
+    gutterBackground: '#FAFAFA',
+    gutterForeground: '#90A4AE',
+    gutterBorder: 'transparent',
+    lineHighlight: '#CCD7DA50',
+  },
+  noctisLilac: {
+    background: '#f2f1f8',
+    foreground: '#0c006b',
+    caret: '#5c49e9',
+    selection: '#d5d1f2',
+    selectionMatch: '#d5d1f2',
+    gutterBackground: '#f2f1f8',
+    gutterForeground: '#0c006b70',
+    lineHighlight: '#e1def3',
+  },
+  nord: {
+    background: '#2e3440',
+    foreground: '#FFFFFF',
+    caret: '#FFFFFF',
+    selection: '#3b4252',
+    selectionMatch: '#e5e9f0',
+    gutterBackground: '#2e3440',
+    gutterForeground: '#4c566a',
+    gutterActiveForeground: '#d8dee9',
+    lineHighlight: '#4c566a',
+  },
+  okaidia: {
+    background: '#272822',
+    foreground: '#FFFFFF',
+    caret: '#FFFFFF',
+    selection: '#49483E',
+    selectionMatch: '#49483E',
+    gutterBackground: '#272822',
+    gutterForeground: '#FFFFFF70',
+    lineHighlight: '#00000059',
+  },
+  solarizedLight: {
+    background: '#fdf6e3',
+    foreground: '#657b83',
+    caret: '#586e75',
+    selection: '#dfd9c8',
+    selectionMatch: '#dfd9c8',
+    gutterBackground: '#00000010',
+    gutterForeground: '#657b83',
+    lineHighlight: '#dfd9c8',
+  },
+  solarizedDark: {
+    background: '#002b36',
+    foreground: '#93a1a1',
+    caret: '#839496',
+    selection: '#173541',
+    selectionMatch: '#aafe661a',
+    gutterBackground: '#00252f',
+    gutterForeground: '#839496',
+    lineHighlight: '#173541',
+  },
+  sublime: {
+    background: '#303841',
+    foreground: '#FFFFFF',
+    caret: '#FBAC52',
+    selection: '#4C5964',
+    selectionMatch: '#3A546E',
+    gutterBackground: '#303841',
+    gutterForeground: '#FFFFFF70',
+    lineHighlight: '#00000059',
+  },
+  tokyoNightDay: {
+    background: '#e1e2e7',
+    foreground: '#3760bf',
+    caret: '#3760bf',
+    selection: '#99a7df',
+    selectionMatch: '#99a7df',
+    gutterBackground: '#e1e2e7',
+    gutterForeground: '#3760bf',
+    gutterBorder: 'transparent',
+    lineHighlight: '#5f5faf11',
+  },
+  tokyoNightStorm: {
+    background: '#24283b',
+    foreground: '#7982a9',
+    caret: '#c0caf5',
+    selection: '#6f7bb630',
+    selectionMatch: '#1f2335',
+    gutterBackground: '#24283b',
+    gutterForeground: '#7982a9',
+    gutterBorder: 'transparent',
+    lineHighlight: '#292e42',
+  },
+  tokyoNight: {
+    background: '#1a1b26',
+    foreground: '#787c99',
+    caret: '#c0caf5',
+    selection: '#515c7e40',
+    selectionMatch: '#16161e',
+    gutterBackground: '#1a1b26',
+    gutterForeground: '#787c99',
+    gutterBorder: 'transparent',
+    lineHighlight: '#1e202e',
+  },
+  vscodeDark: {
+    background: '#1e1e1e',
+    foreground: '#9cdcfe',
+    caret: '#c6c6c6',
+    selection: '#6199ff2f',
+    selectionMatch: '#72a1ff59',
+    lineHighlight: '#ffffff0f',
+    gutterBackground: '#1e1e1e',
+    gutterForeground: '#838383',
+    gutterActiveForeground: '#fff',
+    fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
+  },
+  xcodeLight: {
+    background: '#fff',
+    foreground: '#3D3D3D',
+    selection: '#BBDFFF',
+    selectionMatch: '#BBDFFF',
+    gutterBackground: '#fff',
+    gutterForeground: '#AFAFAF',
+    lineHighlight: '#EDF4FF',
+  },
+  xcodeDark: {
+    background: '#292A30',
+    foreground: '#CECFD0',
+    caret: '#fff',
+    selection: '#727377',
+    selectionMatch: '#727377',
+    lineHighlight: '#2F3239',
+  },
 };
 
 export const vars = {