fix

src/components/editor/Editor.vue

@@ -18,6 +18,12 @@ const styleTheme = EditorView.baseTheme({
   },
 })
 
+const bgColors: Record<string, string> = {
+  html: "#fff6f3",
+  css: "#f3f6ff",
+  js: "#fffdf0",
+}
+
 interface Props {
   language?: "html" | "css" | "js"
   fontSize?: number
@@ -35,12 +41,22 @@ const lang = computed(() => {
   if (props.language === "css") return css()
   return javascript()
 })
+
+const bgTheme = computed(() => {
+  const bg = bgColors[props.language] ?? "#ffffff"
+  return EditorView.theme({
+    "&": { backgroundColor: bg },
+    ".cm-gutters": { backgroundColor: bg },
+  })
+})
+
+const extensions = computed(() => [styleTheme, bgTheme.value, lang.value])
 </script>
 <template>
   <Codemirror
     v-model="code"
     indentWithTab
-    :extensions="[styleTheme, lang]"
+    :extensions="extensions"
     :tabSize="4"
     :style="{ height: '100%', fontSize: props.fontSize + 'px' }"
   />

src/components/editor/Editors.vue

@@ -1,6 +1,8 @@
 <template>
+  <div class="editors-root">
   <n-tabs
     :value="tab"
+    :class="`tab-active-${tab}`"
     pane-class="pane"
     style="height: 100%"
     type="card"
@@ -73,6 +75,7 @@
       />
     </template>
   </n-tabs>
+  </div>
 </template>
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
@@ -185,4 +188,28 @@ async function formatAndSubmit() {
 .label {
   font-size: 16px;
 }
+
+:deep(.n-tabs-nav .n-tabs-tab[data-name="html"]) {
+  background-color: #fff6f3 !important;
+}
+:deep(.n-tabs-nav .n-tabs-tab[data-name="css"]) {
+  background-color: #f3f6ff !important;
+}
+:deep(.n-tabs-nav .n-tabs-tab[data-name="js"]) {
+  background-color: #fffdf0 !important;
+}
+
+.editors-root {
+  height: 100%;
+}
+
+:deep(.tab-active-html .n-tab-pane) {
+  background-color: #fff6f3;
+}
+:deep(.tab-active-css .n-tab-pane) {
+  background-color: #f3f6ff;
+}
+:deep(.tab-active-js .n-tab-pane) {
+  background-color: #fffdf0;
+}
 </style>