feat: reactive codemirror theme

assets/scss/styles.scss

@@ -17,7 +17,7 @@
 ::-webkit-scrollbar-thumb {
   @apply bg-divider bg-clip-content;
   @apply rounded-full;
-  @apply border-solid border-4 border-transparent;
+  @apply border-solid border-transparent border-4;
   @apply hover:(bg-dividerDark bg-clip-content);
 }
 
@@ -116,8 +116,8 @@ a {
 
   &.link {
     @apply items-center;
-    @apply px-1 py-0.5;
+    @apply py-0.5 px-1;
-    @apply -mx-1 -my-0.5;
+    @apply -my-0.5 -mx-1;
     @apply text-accent;
     @apply rounded;
     @apply hover:text-accentDark;
@@ -198,7 +198,7 @@ hr {
 .textarea {
   @apply flex;
   @apply w-full;
-  @apply px-4 py-2;
+  @apply py-2 px-4;
   @apply bg-transparent;
   @apply rounded;
   @apply text-secondaryDark;
@@ -293,7 +293,7 @@ input[type="checkbox"] {
     @apply cursor-pointer;
 
     &::before {
-      @apply border-2 border-divider;
+      @apply border-divider border-2;
       @apply rounded;
       @apply inline-flex;
       @apply items-center;
@@ -461,6 +461,22 @@ input[type="checkbox"] {
   @apply w-full;
 }
 
+.CodeMirror {
+  @apply block;
+  @apply border-b;
+  @apply border-dividerLight;
+  @apply w-full;
+  @apply h-auto;
+}
+
+.CodeMirror * {
+  font-family: "Roboto Mono", monospace;
+}
+
+.CodeMirror-scroll {
+  @apply min-h-32;
+}
+
 @media (max-width: 767px) {
   main {
     margin-bottom: env(safe-area-inset-bottom);

components/smart/CodeMirror.vue

@@ -13,12 +13,13 @@ const props = withDefaults(
   defineProps<{
     value: string
     mode: string
-    placeholder: string
+    placeholder?: string
     wrap: boolean
     linter: LinterDefinition | null
   }>(),
   {
     linter: null as any,
+    placeholder: "",
   }
 )
 
@@ -45,18 +46,3 @@ useCodemirror(editor, value, {
   linter: props.linter,
 })
 </script>
-
-<style lang="scss" scoped>
-.CodeMirror {
-  @apply block;
-  @apply border-b;
-  @apply border-dividerLight;
-  @apply w-full;
-  @apply h-auto;
-  @apply font-mono;
-}
-
-.CodeMirror-scroll {
-  @apply min-h-32;
-}
-</style>

helpers/editor/codemirror.ts

@@ -1,6 +1,8 @@
 import CodeMirror from "codemirror"
 
-import "codemirror/theme/juejin.css"
+import "codemirror/theme/base16-light.css"
+import "codemirror/theme/base16-dark.css"
+import "codemirror/theme/3024-night.css"
 
 import "codemirror/lib/codemirror.css"
 import "codemirror/addon/lint/lint.css"
@@ -20,18 +22,15 @@ import "codemirror/addon/search/searchcursor"
 import "codemirror/addon/search/jump-to-line"
 import "codemirror/addon/dialog/dialog"
 
-import { watch, onMounted, ref, Ref } from "@nuxtjs/composition-api"
+import { watch, onMounted, ref, Ref, useContext } from "@nuxtjs/composition-api"
 import { LinterDefinition } from "./linting/linter"
 
-const DEFAULT_THEME = "juejin"
-
 type CodeMirrorOptions = {
   extendedEditorConfig: Omit<CodeMirror.EditorConfiguration, "value">
   linter: LinterDefinition | null
 }
 
 const DEFAULT_EDITOR_CONFIG: CodeMirror.EditorConfiguration = {
-  theme: DEFAULT_THEME,
   autoRefresh: true,
   lineNumbers: true,
   foldGutter: true,
@@ -81,6 +80,7 @@ export function useCodemirror(
   onMounted(() => {
     cm.value = CodeMirror(el.value!, DEFAULT_EDITOR_CONFIG)
 
+    setTheme()
     updateEditorConfig()
     updateLinterConfig()
 
@@ -92,6 +92,28 @@ export function useCodemirror(
     })
   })
 
+  const setTheme = () => {
+    const { $colorMode } = useContext() as any
+    if (cm.value) {
+      cm.value?.setOption("theme", getThemeName($colorMode.value))
+    }
+  }
+
+  const getThemeName = (mode: string) => {
+    switch (mode) {
+      case "system":
+        return "default"
+      case "light":
+        return "base16-light"
+      case "dark":
+        return "base16-dark"
+      case "black":
+        return "3024-night"
+      default:
+        return "default"
+    }
+  }
+
   // If the editor properties are reactive, watch for updates
   watch(() => options.extendedEditorConfig, updateEditorConfig, {
     immediate: true,