diff --git a/packages/codemirror/themes.mjs b/packages/codemirror/themes.mjs
index 47d6c3c1..01c0c6a8 100644
--- a/packages/codemirror/themes.mjs
+++ b/packages/codemirror/themes.mjs
@@ -4,6 +4,7 @@ import blackscreen, { settings as blackscreenSettings } from './themes/blackscre
 import whitescreen, { settings as whitescreenSettings } from './themes/whitescreen.mjs';
 import teletext, { settings as teletextSettings } from './themes/teletext.mjs';
 import algoboy, { settings as algoboySettings } from './themes/algoboy.mjs';
+import grl2000, {settings as grl2000Settings} from './themes/grl2000.mjs'
 import terminal, { settings as terminalSettings } from './themes/terminal.mjs';
 import abcdef, { settings as abcdefSettings } from './themes/abcdef.mjs';
 import androidstudio, { settings as androidstudioSettings } from './themes/androidstudio.mjs';
@@ -55,6 +56,7 @@ export const themes = {
   androidstudio,
   duotoneDark,
   githubDark,
+  grl2000,
   gruvboxDark,
   materialDark,
   nord,
@@ -98,6 +100,7 @@ export const settings = {
   duotoneLight: duotoneLightSettings,
   duotoneDark: duotoneDarkSettings,
   eclipse: eclipseSettings,
+  grl2000: grl2000Settings,
   githubLight: githubLightSettings,
   githubDark: githubDarkSettings,
   gruvboxDark: gruvboxDarkSettings,
diff --git a/packages/codemirror/themes/grl2000.mjs b/packages/codemirror/themes/grl2000.mjs
new file mode 100644
index 00000000..4ff40ba4
--- /dev/null
+++ b/packages/codemirror/themes/grl2000.mjs
@@ -0,0 +1,47 @@
+/**
+ * @name Atom One
+ * Atom One dark syntax theme
+ *
+ * https://github.com/atom/one-dark-syntax
+ */
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+const deepPurple = '#5c019a'
+const yellowPink = '#fbeffc'
+const grey = '#272C35'
+const pinkAccent ="#fee1ff"
+const lightGrey = '#465063'
+const bratGreen = "#9acd3f"
+
+const pink = '#f6a6fd'
+
+export const settings = {
+  background: 'white',
+  lineBackground: 'transparent',
+  foreground: deepPurple,
+  caret: '#797977',
+  selection: yellowPink,
+  selectionMatch: '#2B323D',
+  gutterBackground: grey,
+  gutterForeground: lightGrey,
+  gutterBorder: 'transparent',
+  lineHighlight: pinkAccent,
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings,
+  styles: [
+    {
+      tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
+      color: deepPurple,
+    },
+    { tag: [t.tagName, t.heading], color: settings.foreground },
+    { tag: t.comment, color: pink },
+    { tag: [t.variableName, t.propertyName, t.labelName], color: lightGrey },
+    { tag: [t.attributeName, t.number], color: 'hsl( 29, 54%, 61%)' },
+    { tag: t.className, color: grey },
+    { tag: t.keyword, color: grey },
+    { tag: [t.string, t.regexp, t.special(t.propertyName)], color: bratGreen },
+  ],
+});
diff --git a/website/src/repl/components/panel/Reference.jsx b/website/src/repl/components/panel/Reference.jsx
index fbbf0a08..fed2d458 100644
--- a/website/src/repl/components/panel/Reference.jsx
+++ b/website/src/repl/components/panel/Reference.jsx
@@ -55,18 +55,18 @@ export function Reference() {
         className="break-normal flex-grow flex-col overflow-y-auto overflow-x-hidden   px-2 flex relative"
         id="reference-container"
       >
-        <div className="prose dark:prose-invert min-w-full px-1 ">
-          <h2>API Reference</h2>
+        <div className="prose dark:prose-invert min-w-full px-1 text-foreground">
+          <h2 className='text-foreground'>API Reference</h2>
           <p>
             This is the long list of functions you can use. Remember that you don't need to remember all of those and
             that you can already make music with a small set of functions!
           </p>
           {visibleFunctions.map((entry, i) => (
             <section key={i}>
-              <h3 id={`doc-${i}`}>{entry.name}</h3>
+              <h3 className='text-foreground' id={`doc-${i}`}>{entry.name}</h3>
               {!!entry.synonyms_text && (
                 <p>
-                  Synonyms: <code>{entry.synonyms_text}</code>
+                  Synonyms: <code className='text-foreground'>{entry.synonyms_text}</code>
                 </p>
               )}
               {/* <small>{entry.meta.filename}</small> */}
@@ -79,7 +79,7 @@ export function Reference() {
                 ))}
               </ul>
               {entry.examples?.map((example, j) => (
-                <pre key={j}>{example}</pre>
+                <pre className='text-foreground bg-background' key={j}>{example}</pre>
               ))}
             </section>
           ))}