add some custom themes

website/src/repl/Footer.jsx

@@ -6,7 +6,7 @@ import { nanoid } from 'nanoid';
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { loadedSamples } from './Repl';
 import { Reference } from './Reference';
-import { themes, themeColors } from './themes.mjs';
+import { themes } from './themes.mjs';
 import useStore from '../useStore.mjs';
 
 export function Footer({ context }) {
@@ -209,7 +209,7 @@ function SamplesTab() {
 
 function ButtonGroup({ value, onChange, items }) {
   return (
-    <div className="flex grow">
+    <div className="flex grow border border-foreground rounded-md">
       {Object.entries(items).map(([key, label], i, arr) => (
         <button
           key={key}
@@ -282,7 +282,7 @@ function SettingsTab() {
   const { theme, keybindings, fontSize } = state;
   return (
     <div className="text-foreground p-4 space-y-4">
-      <div className="grid grid-cols-2 gap-2">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         <FormItem label="Theme">
           <SelectInput
             options={themeOptions}

website/src/repl/themes.mjs

@@ -31,9 +31,17 @@ import {
 } from '@uiw/codemirror-themes-all';
 
 import strudelTheme from '@strudel.cycles/react/src/themes/strudel-theme';
+import bluescreen, { settings as bluescreenSettings } from '@strudel.cycles/react/src/themes/bluescreen';
+import blackscreen, { settings as blackscreenSettings } from '@strudel.cycles/react/src/themes/blackscreen';
+import whitescreen, { settings as whitescreenSettings } from '@strudel.cycles/react/src/themes/whitescreen';
+import gameboy, { settings as gameboySettings } from '@strudel.cycles/react/src/themes/gameboy';
 
 export const themes = {
   strudelTheme,
+  bluescreen,
+  blackscreen,
+  whitescreen,
+  gameboy,
   abcdef,
   androidstudio,
   atomone,
@@ -82,6 +90,10 @@ export const settings = {
     // gutterForeground: '#8a919966',
     gutterForeground: '#8a919966',
   },
+  bluescreen: bluescreenSettings,
+  blackscreen: blackscreenSettings,
+  whitescreen: whitescreenSettings,
+  gameboy: gameboySettings,
   abcdef: {
     background: '#0f0f0f',
     lineBackground: '#0f0f0f50',