themify rest of layout (except minirepls)

website/src/repl/Footer.jsx

@@ -134,7 +134,7 @@ export function Footer({ context }) {
             </div>
           )}
           {activeFooter === 'console' && (
-            <div className="break-all px-4">
+            <div className="break-all px-4 dark:text-white text-stone-900">
               {log.map((l, i) => {
                 const message = linkify(l.message);
                 return (
@@ -150,8 +150,8 @@ export function Footer({ context }) {
             </div>
           )}
           {activeFooter === 'samples' && (
-            <div className="break-normal w-full px-4">
-              <span className="text-white">{loadedSamples.length} banks loaded:</span>
+            <div className="break-normal w-full px-4 dark:text-white text-stone-900">
+              <span>{loadedSamples.length} banks loaded:</span>
               {loadedSamples.map(([name, samples]) => (
                 <span key={name} className="cursor-pointer hover:text-tertiary" onClick={() => {}}>
                   {' '}

website/src/repl/Header.jsx

@@ -48,7 +48,6 @@ 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-foreground font-bold flex space-x-2 items-center',
           )}
         >

website/src/repl/Reference.jsx

@@ -5,10 +5,10 @@ const visibleFunctions = jsdocJson.docs
 
 export function Reference() {
   return (
-    <div className="flex h-full w-full pt-2">
+    <div className="flex h-full w-full pt-2 text-foreground">
       <div className="w-64 flex-none h-full overflow-y-auto overflow-x-hidden pr-4">
         {visibleFunctions.map((entry, i) => (
-          <a key={i} className="cursor-pointer block hover:bg-linegray py-1 px-4" href={`#doc-${i}`}>
+          <a key={i} className="cursor-pointer block hover:bg-lineHighlight py-1 px-4" href={`#doc-${i}`}>
             {entry.name} {/* <span className="text-gray-600">{entry.meta.filename}</span> */}
           </a>
         ))}

website/src/repl/Repl.jsx

@@ -283,7 +283,7 @@ export function Repl({ embedded = false }) {
           />
         </section>
         {error && (
-          <div className="text-red-500 p-4 bg-lineblack animate-pulse">{error.message || 'Unknown Error :-/'}</div>
+          <div className="text-red-500 p-4 bg-lineHighlight animate-pulse">{error.message || 'Unknown Error :-/'}</div>
         )}
         {isEmbedded && !started && (
           <button

website/src/repl/themes.mjs

@@ -31,6 +31,7 @@ import {
 } from '@uiw/codemirror-themes-all';
 
 export const themes = {
+  // none: 'none',
   abcdef,
   androidstudio,
   atomone,
@@ -63,6 +64,11 @@ export const themes = {
 };
 
 export const settings = {
+  none: {
+    background: '#222',
+    foreground: '#FFFFFF',
+    lineHighlight: '#00000059',
+  },
   strudelTheme: {
     background: '#222',
     foreground: '#FFFFFF',