feat(editor): add theme support to code editor

package.json

@@ -29,6 +29,7 @@
     "zustand": "^5.0.2"
   },
   "devDependencies": {
+    "@shikijs/monaco": "^1.24.4",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -36,6 +37,7 @@
     "eslint-config-next": "15.0.3",
     "postcss": "^8",
     "prisma": "^6.1.0",
+    "shiki": "^1.24.4",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

src/constants/themes.ts

@@ -0,0 +1,21 @@
+import { createHighlighter } from "shiki";
+import { Monaco } from "@monaco-editor/react";
+import { shikiToMonaco } from "@shikijs/monaco";
+import { SUPPORTED_LANGUAGES } from "./languages";
+
+export const SUPPORTED_THEMES = ["vitesse-dark", "vitesse-light"];
+
+export const DEFAULT_THEME = SUPPORTED_THEMES[0];
+
+export const highlightMonacoEditor = async (monaco: Monaco) => {
+  const highlighter = await createHighlighter({
+    themes: SUPPORTED_THEMES,
+    langs: SUPPORTED_LANGUAGES.map((lang) => lang.key),
+  });
+
+  for (const lang of SUPPORTED_LANGUAGES) {
+    monaco.languages.register({ id: lang.key });
+  }
+
+  shikiToMonaco(highlighter, monaco);
+};

src/store/useCodeEditorStore.ts

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { CodeEditorState } from "@/types";
+import { DEFAULT_THEME } from "@/constants/themes";
 import { DEFAULT_LANGUAGE } from "@/constants/languages";
 import { persist, createJSONStorage } from "zustand/middleware";
 
@@ -7,10 +8,12 @@ export const useCodeEditorStore = create<CodeEditorState>()(
   persist(
     (set, get) => ({
       language: DEFAULT_LANGUAGE,
+      theme: DEFAULT_THEME,
       setLanguage: (language: string) => set({ language }),
+      setTheme: (theme: string) => set({ theme }),
     }),
     {
-      name: "language-storage",
+      name: "code-editor-storage",
       storage: createJSONStorage(() => localStorage),
     }
   )

src/types/index.ts

@@ -1,5 +1,7 @@
 export interface CodeEditorState {
   language: string;
+  theme: string;
 
   setLanguage: (language: string) => void;
+  setTheme: (theme: string) => void;
 }