only invert prose for dark themes

website/src/components/HeadCommon.astro

@@ -46,14 +46,20 @@ const base = BASE_URL;
     };
   }
   function setTheme(name) {
-    console.log('setTheme', name);
     const { settings } = getTheme(name);
-    const cssVariables = Object.entries(settings)
-      .map(([key, value]) => `--${key}: ${value};`)
-      .join('\n');
+    // set css variables
     themeStyle.innerHTML = `:root {
-      ${cssVariables}
+      ${Object.entries(settings)
+        .map(([key, value]) => `--${key}: ${value};`)
+        .join('\n')}
     }`;
+    // tailwind dark mode
+    if (settings.light) {
+      document.documentElement.classList.remove('dark');
+    } else {
+      document.documentElement.classList.add('dark');
+    }
+    // persist theme name
     localStorage.setItem('strudel-theme', name);
   }
   setTheme(localStorage.getItem('strudel-theme'));

website/src/components/PageContent/PageContent.astro

@@ -22,7 +22,7 @@ const currentPage = Astro.url.pathname;
       <span>On this Page:</span>
       <TableOfContents client:media="(max-width: 50em)" headings={headings} currentPage={currentPage} />
     </nav> -->
-    <div class="prose prose-invert max-w-full pb-8">
+    <div class="prose dark:prose-invert max-w-full pb-8">
       <slot />
     </div>
   </section>

website/src/repl/Footer.jsx

@@ -2,8 +2,8 @@ import XMarkIcon from '@heroicons/react/20/solid/XMarkIcon';
 import { logger } from '@strudel.cycles/core';
 import { cx } from '@strudel.cycles/react';
 import { nanoid } from 'nanoid';
-import React, { useContext, useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { useEvent, loadedSamples, ReplContext } from './Repl';
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useEvent, loadedSamples } from './Repl';
 import { Reference } from './Reference';
 import { themes, themeColors } from './themes.mjs';
 
@@ -89,7 +89,7 @@ export function Footer({ context }) {
           ref={footerContent}
         >
           {activeFooter === 'intro' && (
-            <div className="prose prose-invert max-w-[600px] pt-2 font-sans pb-8 px-4">
+            <div className="prose dark:prose-invert max-w-[600px] pt-2 font-sans pb-8 px-4">
               <h3>
                 <span className={cx('animate-spin inline-block select-none')}>🌀</span> welcome
               </h3>
@@ -229,3 +229,20 @@ function linkify(inputText) {
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
 }
+
+/* export function useTheme() {
+  const [theme, setTheme] = useState(localStorage.getItem('strudel-theme'));
+  useEvent('strudel-theme', (e) => {
+    console.log(e.detail);
+    setTheme(e.detail);
+  });
+  const themeSettings = settings[theme || 'strudelTheme'];
+  return {
+    theme,
+    setTheme,
+    settings: themeSettings,
+    isDark: !themeSettings.light,
+    isLight: !!themeSettings.light,
+  };
+}
+ */

website/src/repl/Reference.jsx

@@ -14,7 +14,7 @@ export function Reference() {
         ))}
       </div>
       <div className="break-normal w-full h-full overflow-auto pl-4 flex relative">
-        <div className="prose prose-invert">
+        <div className="prose dark:prose-invert">
           <h2>API Reference</h2>
           <p>
             This is the long list functions you can use! Remember that you don't need to remember all of those and that

website/src/repl/themes.mjs

@@ -177,6 +177,7 @@ export const settings = {
     lineHighlight: '#36334280',
   },
   eclipse: {
+    light: true,
     background: '#fff',
     foreground: '#000',
     caret: '#FFFFFF',
@@ -188,6 +189,7 @@ export const settings = {
     gutterBorder: 'transparent',
   },
   githubLight: {
+    light: true,
     background: '#fff',
     foreground: '#24292e',
     selection: '#BBDFFF',
@@ -214,6 +216,7 @@ export const settings = {
     gutterForeground: '#7c6f64',
   },
   gruvboxLight: {
+    light: true,
     background: '#fbf1c7',
     foreground: '#3c3836',
     caret: '#af3a03',
@@ -236,6 +239,7 @@ export const settings = {
     lineHighlight: '#545b61',
   },
   materialLight: {
+    light: true,
     background: '#FAFAFA',
     foreground: '#90A4AE',
     caret: '#272727',
@@ -247,6 +251,7 @@ export const settings = {
     lineHighlight: '#CCD7DA50',
   },
   noctisLilac: {
+    light: true,
     background: '#f2f1f8',
     foreground: '#0c006b',
     caret: '#5c49e9',
@@ -278,6 +283,7 @@ export const settings = {
     lineHighlight: '#00000059',
   },
   solarizedLight: {
+    light: true,
     background: '#fdf6e3',
     foreground: '#657b83',
     caret: '#586e75',
@@ -308,6 +314,7 @@ export const settings = {
     lineHighlight: '#00000059',
   },
   tokyoNightDay: {
+    light: true,
     background: '#e1e2e7',
     foreground: '#3760bf',
     caret: '#3760bf',
@@ -353,6 +360,7 @@ export const settings = {
     fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
   },
   xcodeLight: {
+    light: true,
     background: '#fff',
     foreground: '#3D3D3D',
     selection: '#BBDFFF',
@@ -371,13 +379,6 @@ export const settings = {
   },
 };
 
-export const vars = {
-  abcdef: {
-    bg: '#0f0f0f',
-    activeLine: '#314151',
-  },
-};
-
 function getColors(str) {
   const colorRegex = /#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})/g;
   const colors = [];

website/tailwind.config.cjs

@@ -3,6 +3,7 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
+  darkMode: 'class',
   content: [
     './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
     '../packages/react/src/**/*.{html,js,jsx,md,mdx,ts,tsx}',