theme; highlight theme

Author: ClanEver

common/themes.ts

@@ -1,34 +1,53 @@
-export default themes = [
-    'cupcake',
-    'dark',
-    'light',
-    'bumblebee',
-    'emerald',
-    'corporate',
-    'synthwave',
-    'retro',
-    'cyberpunk',
-    'valentine',
-    'halloween',
-    'garden',
-    'forest',
-    'aqua',
-    'lofi',
-    'pastel',
-    'fantasy',
-    'wireframe',
-    'black',
-    'luxury',
-    'dracula',
-    'cmyk',
-    'autumn',
-    'business',
-    'acid',
-    'lemonade',
-    'night',
-    'coffee',
-    'winter',
-    'dim',
-    'nord',
-    'sunset',
-]
+import { Extension } from '@uiw/react-codemirror'
+import { catppuccin } from 'codemirror-theme-catppuccin'
+
+const darkCodeMirrorTheme = catppuccin('macchiato')
+const lightCodeMirrorTheme = catppuccin('latte')
+
+export const themeMap = {
+    light: lightCodeMirrorTheme,
+    dark: darkCodeMirrorTheme,
+    acid: lightCodeMirrorTheme,
+    aqua: darkCodeMirrorTheme,
+    autumn: lightCodeMirrorTheme,
+    black: darkCodeMirrorTheme,
+    bumblebee: lightCodeMirrorTheme,
+    business: darkCodeMirrorTheme,
+    cmyk: lightCodeMirrorTheme,
+    coffee: darkCodeMirrorTheme,
+    corporate: lightCodeMirrorTheme,
+    cupcake: lightCodeMirrorTheme,
+    cyberpunk: lightCodeMirrorTheme,
+    dim: darkCodeMirrorTheme,
+    dracula: darkCodeMirrorTheme,
+    emerald: lightCodeMirrorTheme,
+    fantasy: lightCodeMirrorTheme,
+    forest: darkCodeMirrorTheme,
+    garden: lightCodeMirrorTheme,
+    halloween: darkCodeMirrorTheme,
+    lemonade: lightCodeMirrorTheme,
+    lofi: lightCodeMirrorTheme,
+    luxury: darkCodeMirrorTheme,
+    night: darkCodeMirrorTheme,
+    nord: lightCodeMirrorTheme,
+    pastel: lightCodeMirrorTheme,
+    retro: lightCodeMirrorTheme,
+    sunset: darkCodeMirrorTheme,
+    synthwave: darkCodeMirrorTheme,
+    valentine: lightCodeMirrorTheme,
+    winter: lightCodeMirrorTheme,
+    wireframe: lightCodeMirrorTheme,
+}
+
+export function getCodeMirrorTheme(theme: string | undefined): Extension {
+    if (!theme || theme === 'system') {
+        const isDarkMode = window.matchMedia(
+            '(prefers-color-scheme: dark)',
+        ).matches
+        return isDarkMode ? darkCodeMirrorTheme : lightCodeMirrorTheme
+    }
+    if (theme in themeMap) {
+        return themeMap[theme as keyof typeof themeMap]
+    }
+    return lightCodeMirrorTheme
+}

components/CollaborativeEditor.css

@@ -0,0 +1,29 @@
+.cm-content {
+    @apply bg-base-100;
+    /* @apply text-base-content; */
+}
+.cm-gutters {
+    @apply bg-base-200 !important;
+    @apply border-base-200 !important;
+}
+
+.cm-lineNumbers {
+    @apply text-base-content/80;
+}
+
+.cm-activeLineGutter {
+    @apply bg-base-content/5 !important;
+    @apply text-base-content/80 !important;
+}
+
+.cm-activeLine {
+    @apply bg-base-content/5 !important;
+}
+
+/* .cm-focused .cm-cursor {
+    @apply text-secondary;
+}
+
+.CodeMirror-selected {
+    @apply bg-secondary;
+} */

components/CollaborativeEditor.tsx

@@ -10,11 +10,12 @@ import CodeMirror, {
     ReactCodeMirrorRef,
     ViewUpdate,
 } from '@uiw/react-codemirror'
-// import { vscodeDark } from '@uiw/codemirror-theme-vscode'
 import { insertNewlineAndIndent } from '@codemirror/commands'
-import { Button, Select } from 'react-daisyui'
+import { Button } from 'react-daisyui'
 import { useSettingsStore } from './SettingPanel' // 引入 useSettingsStore
-
+import './CollaborativeEditor.css'
+import { useTheme } from 'next-themes'
+import { getCodeMirrorTheme } from '@/common/themes'
 const BACKEND_URL =
     process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:3001'
 
@@ -31,6 +32,10 @@ export default function CollaborativeEditor({
     const [editingUser, setEditingUser] = useState<number | null>(null)
     const [isJoined, setIsJoined] = useState(false)
     const [error, setError] = useState<string | null>(null)
+    const [editorHighlightTheme, setEditorHighlightTheme] = useState<
+        Extension | undefined
+    >(undefined)
+    const { theme } = useTheme()
     const { settings } = useSettingsStore() // 使用 useSettingsStore 获取语言设置
     const [languageExtension, setLanguageExtension] = useState<Extension>(null)
     const socketRef = useRef<Socket>(null)
@@ -85,6 +90,10 @@ export default function CollaborativeEditor({
             })
     }, [settings.language]) // 依赖 settings.language
 
+    useEffect(() => {
+        setEditorHighlightTheme(getCodeMirrorTheme(theme))
+    }, [theme])
+
     const handleEditorChange = (value: string) => {
         if (roomId && !isReadOnly) {
             setEditorContent(value)
@@ -159,7 +168,7 @@ export default function CollaborativeEditor({
                 ref={editorRef}
                 value={editorContent}
                 height='50vh'
-                // theme={vscodeDark}
+                theme={editorHighlightTheme}
                 extensions={extensions}
                 onChange={handleEditorChange}
                 editable={!isReadOnly}

package.json

@@ -12,10 +12,10 @@
         "@codemirror/lang-php": "^6.0.1",
         "@codemirror/language": "^6.10.8",
         "@codemirror/legacy-modes": "^6.4.2",
-        "@uiw/codemirror-theme-vscode": "^4.23.7",
         "@uiw/react-codemirror": "^4.23.7",
         "clsx": "^2.1.1",
         "codemirror-lang-elixir": "^4.0.0",
+        "codemirror-theme-catppuccin": "^0.3.0",
         "next": "15.1.2",
         "next-themes": "^0.4.4",
         "react": "^19.0.0",

pnpm-lock.yaml

@@ -22,36 +22,36 @@ export default {
         themes: [
             'light',
             'dark',
-            'cupcake',
+            'acid',
+            'aqua',
+            'autumn',
+            'black',
             'bumblebee',
-            'emerald',
+            'business',
+            'cmyk',
+            'coffee',
             'corporate',
-            'synthwave',
-            'retro',
+            'cupcake',
             'cyberpunk',
-            'valentine',
-            'halloween',
-            'garden',
+            'dim',
+            'dracula',
+            'emerald',
+            'fantasy',
             'forest',
-            'aqua',
+            'garden',
+            'halloween',
+            'lemonade',
             'lofi',
-            'pastel',
-            'fantasy',
-            'wireframe',
-            'black',
             'luxury',
-            'dracula',
-            'cmyk',
-            'autumn',
-            'business',
-            'acid',
-            'lemonade',
             'night',
-            'coffee',
-            'winter',
-            'dim',
             'nord',
+            'pastel',
+            'retro',
             'sunset',
+            'synthwave',
+            'valentine',
+            'winter',
+            'wireframe',
         ],
     },
 } satisfies Config