move css variable injection to themes

+ prepare new HeadCommon in extra file

packages/codemirror/index.mjs

@@ -2,3 +2,4 @@ export * from './codemirror.mjs';
 export * from './highlight.mjs';
 export * from './flash.mjs';
 export * from './slider.mjs';
+export * from './themes.mjs';

packages/codemirror/themes.mjs

@@ -473,6 +473,9 @@ function stringifySafe(json) {
   return JSON.stringify(json, getCircularReplacer());
 }
 
+export const theme = (theme) => themes[theme] || themes.strudelTheme;
+
+// css style injection helpers
 export function injectStyle(rule) {
   const newStyle = document.createElement('style');
   document.head.appendChild(newStyle);
@@ -481,4 +484,38 @@ export function injectStyle(rule) {
   return () => styleSheet.deleteRule(ruleIndex);
 }
 
-export const theme = (theme) => themes[theme] || themes.strudelTheme;
+let currentTheme, resetThemeStyle, themeStyle;
+export function initTheme(theme) {
+  themeStyle = document.createElement('style');
+  themeStyle.id = 'strudel-theme';
+  document.head.append(themeStyle);
+  activateTheme(theme);
+}
+
+export function activateTheme(name) {
+  if (currentTheme === name) {
+    return;
+  }
+  if (!settings[name]) {
+    console.warn('theme', name, 'has no settings.. defaulting to strudelTheme settings');
+  }
+  const themeSettings = settings[name] || settings.strudelTheme;
+  // set css variables
+  themeStyle.innerHTML = `:root {
+      ${Object.entries(themeSettings)
+        // important to override fallback
+        .map(([key, value]) => `--${key}: ${value} !important;`)
+        .join('\n')}
+    }`;
+  // tailwind dark mode
+  if (themeSettings.light) {
+    document.documentElement.classList.remove('dark');
+  } else {
+    document.documentElement.classList.add('dark');
+  }
+  resetThemeStyle?.();
+  resetThemeStyle = undefined;
+  if (themeSettings.customStyle) {
+    resetThemeStyle = injectStyle(themeSettings.customStyle);
+  }
+}

website/src/components/HeadCommonNew.astro

@@ -0,0 +1,58 @@
+---
+import { pwaInfo } from 'virtual:pwa-info';
+import '../styles/index.css';
+
+const { BASE_URL } = import.meta.env;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
+---
+
+<!-- Global Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width" />
+<meta name="generator" content={Astro.generator} />
+
+<link rel="icon" type="image/svg+xml" href={`${baseNoTrailing}/favicon.ico`} />
+
+<meta
+  name="description"
+  content="Strudel is a music live coding environment for the browser, porting the TidalCycles pattern language to JavaScript."
+/>
+<link rel="icon" href={`${baseNoTrailing}/favicon.ico`} />
+<link rel="apple-touch-icon" href={`${baseNoTrailing}/icons/apple-icon-180.png`} sizes="180x180" />
+<meta name="theme-color" content="#222222" />
+
+<base href={BASE_URL} />
+
+<!-- Scrollable a11y code helper -->
+<script src{`${baseNoTrailing}/make-scrollable-code-focusable.js`} is:inline></script>
+
+<script src="/src/pwa.ts"></script>
+<!-- this does not work for some reason: -->
+<!-- <style is:global define:vars={strudelTheme}></style> -->
+<!-- the following variables are just a fallback to make sure everything is readable without JS -->
+<style is:global>
+  :root {
+    --background: #222;
+    --lineBackground: #22222299;
+    --foreground: #fff;
+    --caret: #ffcc00;
+    --selection: rgba(128, 203, 196, 0.5);
+    --selectionMatch: #036dd626;
+    --lineHighlight: #00000050;
+    --gutterBackground: transparent;
+    --gutterForeground: #8a919966;
+  }
+</style>
+{pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
+
+<script>
+  // https://medium.com/quick-code/100vh-problem-with-ios-safari-92ab23c852a8
+  const appHeight = () => {
+    const doc = document.documentElement;
+    doc.style.setProperty('--app-height', `${window.innerHeight - 1}px`);
+  };
+  if (typeof window !== 'undefined') {
+    window.addEventListener('resize', appHeight);
+    appHeight();
+  }
+</script>

website/src/pages/vanilla/index.astro

@@ -1,10 +1,10 @@
 ---
-import HeadCommon from '../../components/HeadCommon.astro';
+import HeadCommonNew from '../../components/HeadCommonNew.astro';
 ---
 
 <html lang="en" class="dark">
   <head>
-    <HeadCommon />
+    <HeadCommonNew />
     <title>Strudel Vanilla REPL</title>
   </head>
   <body class="h-app-height bg-background">

website/src/repl/vanilla/vanilla.css

@@ -1,7 +1,3 @@
-:root {
-  --foreground: white;
-}
-
 body,
 input {
   font-family: monospace;

website/src/repl/vanilla/vanilla.mjs

@@ -1,5 +1,5 @@
 import { logger, getDrawContext, silence, controls, evalScope, hash2code, code2hash } from '@strudel.cycles/core';
-import { StrudelMirror } from '@strudel/codemirror';
+import { StrudelMirror, initTheme, activateTheme } from '@strudel/codemirror';
 import { transpiler } from '@strudel.cycles/transpiler';
 import {
   getAudioContext,
@@ -24,6 +24,7 @@ const initialSettings = {
   fontFamily: 'monospace',
   fontSize: 18,
 };
+initTheme(initialSettings.theme);
 
 async function run() {
   const container = document.getElementById('code');
@@ -196,4 +197,6 @@ form.addEventListener('change', () => {
   const values = getFormValues(form, initialSettings);
   // console.log('values', values);
   editor.updateSettings(values);
+  // TODO: only activateTheme when it changes
+  activateTheme(values.theme);
 });