themify rest of layout (except minirepls)

website/src/components/Header/Header.astro

@@ -19,13 +19,13 @@ const langCode = 'en'; // getLanguageFromURL(currentPage);
 const sidebar = SIDEBAR[langCode];
 ---
 
-<nav class="flex justify-between py-2 px-4 items-center h-14 max-h-14 bg-[#161616]" title="Top Navigation">
+<nav class="flex justify-between py-2 px-4 items-center h-14 max-h-14 bg-lineHighlight text-foreground" title="Top Navigation">
   <!--     <div class="menu-toggle">
       <SidebarToggle client:idle />
     </div> -->
   <div class="flex overflow-visible items-center grow" style="overflow:visible">
     <a href="/" class="flex items-center text-2xl space-x-2">
-      <h1 class="text-white font-bold flex space-x-2 items-baseline text-xl">
+      <h1 class="font-bold flex space-x-2 items-baseline text-xl">
         <span>🌀</span>
         <div class="flex space-x-1 items-baseline">
           <span class="">strudel</span>

website/src/components/LeftSidebar/LeftSidebar.astro

@@ -14,7 +14,7 @@ const langCode = 'en'; // getLanguageFromURL(currentPage);
 const sidebar = SIDEBAR[langCode];
 ---
 
-<nav aria-labelledby="grid-left" class="max-h-full overflow-auto pb-20">
+<nav aria-labelledby="grid-left" class="max-h-full overflow-auto pb-20 text-foreground">
   <ul>
     {
       Object.entries(sidebar).map(([header, children]) => (
@@ -27,8 +27,8 @@ const sidebar = SIDEBAR[langCode];
                 return (
                   <li class="">
                     <a
-                      class={`pl-4 py-0.5 w-full hover:bg-header block${
+                      class={`pl-4 py-0.5 w-full hover:bg-lineHighlight block${
-                        currentPageMatch === child.link ? ' bg-header' : ''
+                        currentPageMatch === child.link ? ' bg-lineHighlight' : ''
                       }`}
                       href={url}
                       aria-current={currentPageMatch === child.link ? 'page' : false}

website/src/components/RightSidebar/RightSidebar.astro

@@ -12,7 +12,7 @@ const { headings, githubEditUrl } = Astro.props as Props;
 const currentPage = Astro.url.pathname;
 ---
 
-<nav aria-labelledby="grid-right" class="w-64">
+<nav aria-labelledby="grid-right" class="w-64 text-foreground">
   <TableOfContents client:media="(min-width: 50em)" headings={headings} currentPage={currentPage} />
   <MoreMenu editHref={githubEditUrl} />
 </nav>

website/src/components/RightSidebar/TableOfContents.tsx

@@ -78,9 +78,9 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[]; curren
               <a
                 href={`${currentPage}#${heading.slug}`}
                 onClick={onLinkClick}
-                className={`py-0.5 block cursor-pointer w-full border-l-4 border-header hover:bg-header ${
+                className={`py-0.5 block cursor-pointer w-full border-l-4 border-lineHighlight hover:bg-lineHighlight ${
                   ['pl-4', 'pl-9', 'pl-12'][heading.depth - minDepth]
-                } ${currentID === heading.slug ? 'bg-header' : ''}`.trim()}
+                } ${currentID === heading.slug ? 'bg-lineHighlight' : ''}`.trim()}
               >
                 {unescape(heading.text)}
               </a>

website/src/docs/MobileNav.jsx

@@ -23,7 +23,7 @@ export default function MobileNav({ sidebar }) {
             <div className="space-y-1 px-4 py-4 bg-[#161616]">
               <a
                 href=".."
-                className="py-2 flex cursor-pointer items-center space-x-1 hover:bg-bg hover:px-2 rounded-md"
+                className="py-2 flex cursor-pointer items-center space-x-1 hover:bg-background hover:px-2 rounded-md"
               >
                 <span>go to REPL</span>
               </a>
@@ -36,7 +36,7 @@ export default function MobileNav({ sidebar }) {
                       as="a"
                       href={`/${item.link}`}
                       className={classNames(
-                        item.current ? 'bg-bg text-white' : 'text-gray-300 hover:bg-bg hover:text-white',
+                        item.current ? 'bg-background text-white' : 'text-gray-300 hover:bg-lineHighlight hover:text-white',
                         'block px-3 py-2 rounded-md text-base font-medium',
                       )}
                       aria-current={item.current ? 'page' : undefined}

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">
+            <div className="break-normal w-full px-4 dark:text-white text-stone-900">
-              <span className="text-white">{loadedSamples.length} banks loaded:</span>
+              <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',

website/tailwind.config.cjs

@@ -11,18 +11,8 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: '#c792ea',
-        secondary: '#c3e88d',
         tertiary: '#82aaff',
-        highlight: '#ffcc00',
+        highlight: '#bb8800',
-        linegray: '#8a91991a',
-        lineblack: '#00000095',
-        bg: '#222222',
-        // header: '#8a91991a',
-        // footer: '#8a91991a',
-        header: '#00000050',
-        // header: 'transparent',
-        footer: '#00000050',
         // codemirror-theme settings
         background: 'var(--background)',
         foreground: 'var(--foreground)',