codemirror theme

app/BlockWidget.tsx

@@ -1,10 +1,11 @@
-import { Language, getLanguageExtension } from "@/lib/lang";
+import { Language } from "@/lib/lang";
 import { DynamicTextarea } from "./DynamicTextarea";
 import { Block, FileDispatcher } from "./blocksReducer";
 import { css } from "@/styled-system/css";
 import { useState } from "react";
 
 import CodeMirror from "@uiw/react-codemirror";
+import { dualismTheme, getLanguageExtension } from "@/lib/codemirror";
 
 export function BlockWidget({
   block,
@@ -88,6 +89,7 @@ export function BlockWidget({
         value={code}
         height="auto"
         readOnly={block.state === "generating-code"}
+        theme={dualismTheme}
         extensions={getLanguageExtension(lang)}
         basicSetup={{
           lineNumbers: false,

app/ExportSource.tsx

@@ -1,6 +1,7 @@
-import { Language, getLanguageExtension } from "@/lib/lang";
+import { Language } from "@/lib/lang";
 import { FileState } from "./blocksReducer";
 import CodeMirror from "@uiw/react-codemirror";
+import { dualismTheme, getLanguageExtension } from "@/lib/codemirror";
 
 function commentPrefix(lang: Language) {
   switch (lang) {
@@ -23,6 +24,7 @@ export function ExportSource({ file }: { file: FileState }) {
     <CodeMirror
       value={source}
       height="auto"
+      theme={dualismTheme}
       extensions={getLanguageExtension(file.lang)}
       readOnly={true}
       basicSetup={{

app/globals.css

@@ -5,7 +5,7 @@
   font-size: 14px;
 }
 
-.cm-theme-light.dualismtheme {
+.cm-theme.dualismtheme {
   padding-left: 21px;
   left: 5px;
 

lib/codemirror.ts

@@ -0,0 +1,69 @@
+import { LanguageSupport, StreamLanguage } from "@codemirror/language";
+import { javascript } from "@codemirror/lang-javascript";
+import { python } from "@codemirror/lang-python";
+import { shell } from "@codemirror/legacy-modes/mode/shell";
+import { Language } from "./lang";
+
+import { CreateThemeOptions, createTheme } from "@uiw/codemirror-themes";
+import { tags as t } from "@lezer/highlight";
+
+const gray = "#808080";
+const lightGray = "#8a8a8a";
+
+export const defaultSettingsEclipse: CreateThemeOptions["settings"] = {
+  background: "#fff",
+  foreground: gray,
+  caret: "#000",
+  selection: "#d7d4f0",
+  selectionMatch: "#d7d4f0",
+  gutterBackground: "#f7f7f7",
+  gutterForeground: "#999",
+  lineHighlight: "#006fff1c",
+  gutterBorder: "transparent",
+};
+
+const orange = "#F6B281";
+const purple = "#C191DF";
+const blue = "#91B6EF";
+const green = "#9ACB96";
+
+export const eclipseLightStyle: CreateThemeOptions["styles"] = [
+  { tag: [t.comment], color: orange },
+  { tag: [t.documentMeta], color: "#FF1717" },
+  { tag: t.keyword, color: purple },
+  { tag: t.atom, color: gray },
+  { tag: t.number, color: gray },
+  { tag: t.propertyName, color: gray },
+  { tag: [t.variableName, t.definition(t.variableName)], color: blue },
+  { tag: t.function(t.variableName), color: blue },
+  { tag: t.string, color: green },
+  { tag: t.operator, color: lightGray },
+  { tag: t.tagName, color: gray },
+  { tag: t.attributeName, color: gray },
+  { tag: t.link, color: gray },
+];
+
+export const dualismTheme = createTheme({
+  theme: "light",
+  settings: {
+    ...defaultSettingsEclipse,
+  },
+  styles: eclipseLightStyle,
+});
+
+const langExts: Map<Language, LanguageSupport | StreamLanguage<unknown>> =
+  new Map();
+
+langExts.set("Javascript", javascript({ jsx: true }));
+langExts.set("Typescript", javascript({ jsx: true }));
+langExts.set("Python", python());
+langExts.set("Bash", StreamLanguage.define(shell));
+
+export function getLanguageExtension(lang: Language) {
+  const ext = langExts.get(lang);
+  if (ext) {
+    return [ext];
+  } else {
+    return [];
+  }
+}

lib/lang.ts

@@ -1,8 +1,3 @@
-import { LanguageSupport, StreamLanguage } from "@codemirror/language";
-import { javascript } from "@codemirror/lang-javascript";
-import { python } from "@codemirror/lang-python";
-import { shell } from "@codemirror/legacy-modes/mode/shell";
-
 export type Language = "Bash" | "Python" | "Typescript" | "Javascript";
 export const AllLanguages = [
   "Bash",
@@ -14,20 +9,3 @@ export const AllLanguages = [
 export function isLanguage(lang: string): lang is Language {
   return AllLanguages.includes(lang as Language);
 }
-
-const langExts: Map<Language, LanguageSupport | StreamLanguage<unknown>> =
-  new Map();
-
-langExts.set("Javascript", javascript({ jsx: true }));
-langExts.set("Typescript", javascript({ jsx: true }));
-langExts.set("Python", python());
-langExts.set("Bash", StreamLanguage.define(shell));
-
-export function getLanguageExtension(lang: Language) {
-  const ext = langExts.get(lang);
-  if (ext) {
-    return [ext];
-  } else {
-    return [];
-  }
-}

package.json

@@ -15,6 +15,8 @@
     "@codemirror/lang-python": "^6.1.6",
     "@codemirror/language": "^6.10.2",
     "@codemirror/legacy-modes": "^6.4.1",
+    "@lezer/highlight": "^1.2.1",
+    "@uiw/codemirror-themes": "^4.23.0",
     "@uiw/react-codemirror": "^4.23.0",
     "next": "14.2.5",
     "react": "^18",