style(代码配色): True / False / None 和 NULL 改成关键字蓝；SQL 的 COUNT、AVG、ROUND 这些函数是函数色；编辑器的选区、行号、当前行、括号配对也换成 VS Code 的样子

True / None 原来和数字一个绿色，VS Code 里是 constant.language，和关键字同色。
SQL 的解析器把 COUNT 当关键字、把 avg 当普通名字，现在后面跟着括号的常用函数一律是函数色。

编辑器的框原来沿用 smoothy / One Dark（亮色选区是淡黄），现在照 VS Code 的默认值：选区淡蓝 /
深蓝、行号青色、当前行是一圈边框。当前行只在有焦点时画，免得自学一课十几个代码块每块第一行都框着。
暗色的底色仍用网站的。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/shared/themes/codeTheme.ts

@@ -6,10 +6,17 @@ import { codeHighlighter } from "../highlight"
 /**
  * 编辑器的外观：亮 / 暗两套只管底色、光标、选区、行号这些「框」，
  * 代码的颜色两套都是 codeHighlighter 打的 tok-* 类名，跟着 html.dark 在 highlight.css 里切。
- * 框沿用原来的 smoothy（亮）和 One Dark（暗），只把代码配色换成了 VS Code 的 Light+ / Dark+。
+ * 框的颜色照 VS Code 的默认值（src/vs/editor/common/core/editorColorRegistry.ts 等），
+ * 只有暗色的底色用网站自己的，不用 VS Code 的 #1E1E1E。
+ *
+ * 当前行照 VS Code 是一圈边框不是底色，并且只在编辑器有焦点时画：
+ * 自学一课里有十几个代码块，不然每块第一行都框着。
  */
 const highlighting = syntaxHighlighting(codeHighlighter)
 
+// CodeMirror 自带的选区规则带着 > .cm-scroller > .cm-selectionLayer，选择器短了压不过它
+const focusedSelection = "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground"
+
 const light = EditorView.theme({
   "&": {
     backgroundColor: "#ffffff",
@@ -17,16 +24,24 @@ const light = EditorView.theme({
   },
   ".cm-content": { caretColor: "#000000" },
   ".cm-cursor, .cm-dropCursor": { borderLeftColor: "#000000" },
-  "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
-    backgroundColor: "#FFFD0054",
+  ".cm-selectionBackground, .cm-content ::selection": { backgroundColor: "#ADD6FF80" },
+  [focusedSelection]: { backgroundColor: "#ADD6FF" },
+  ".cm-selectionMatch": { backgroundColor: "#ADD6FF80" },
+  "&.cm-focused .cm-matchingBracket": {
+    backgroundColor: "#0064001a",
+    outline: "1px solid #B9B9B9",
   },
-  ".cm-activeLine": { backgroundColor: "#00000008" },
+  ".cm-searchMatch": { backgroundColor: "#EA5C0055" },
+  ".cm-searchMatch.cm-searchMatch-selected": { backgroundColor: "#A8AC94" },
+  ".cm-activeLine": { backgroundColor: "transparent" },
+  "&.cm-focused .cm-activeLine": { boxShadow: "inset 0 0 0 2px #eeeeee" },
   ".cm-gutters": {
     backgroundColor: "#ffffff",
     borderRight: "none",
-    color: "#00000070",
+    color: "#237893",
   },
-  ".cm-activeLineGutter": { backgroundColor: "#00000008" },
+  ".cm-activeLineGutter": { backgroundColor: "transparent" },
+  "&.cm-focused .cm-activeLineGutter": { color: "#0B216F" },
   ".cm-tooltip": {
     border: "1px solid #e0e0e0",
     backgroundColor: "#f8f8f8",
@@ -40,11 +55,9 @@ const light = EditorView.theme({
 })
 
 const darkBackground = "#26262a",
-  highlightBackground = "#2c313a",
   background = "#101014", // naive-ui
   tooltipBackground = "#353a42",
-  stone = "#7d8799",
-  cursor = "#528bff"
+  highlightBackground = "#2c313a"
 
 const dark = EditorView.theme(
   {
@@ -52,30 +65,29 @@ const dark = EditorView.theme(
       color: "var(--code-fg)",
       backgroundColor: background,
     },
-    ".cm-content": { caretColor: cursor },
-    ".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
-      backgroundColor: "#3E4451",
+    ".cm-content": { caretColor: "#AEAFAD" },
+    ".cm-cursor, .cm-dropCursor": { borderLeftColor: "#AEAFAD" },
+    ".cm-selectionBackground, .cm-content ::selection": { backgroundColor: "#264F7880" },
+    [focusedSelection]: { backgroundColor: "#264F78" },
+    ".cm-selectionMatch": { backgroundColor: "#ADD6FF26" },
+    "&.cm-focused .cm-matchingBracket": {
+      backgroundColor: "#0064001a",
+      outline: "1px solid #888888",
     },
+    ".cm-searchMatch": { backgroundColor: "#EA5C0055" },
+    ".cm-searchMatch.cm-searchMatch-selected": { backgroundColor: "#515C6A" },
     ".cm-panels": { backgroundColor: darkBackground, color: "var(--code-fg)" },
     ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
     ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
-    ".cm-searchMatch": {
-      backgroundColor: "#72a1ff59",
-      outline: "1px solid #457dff",
-    },
-    ".cm-searchMatch.cm-searchMatch-selected": { backgroundColor: "#6199ff2f" },
-    ".cm-activeLine": { backgroundColor: "#6699ff0b" },
-    ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
-    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
-      backgroundColor: "#bad0f847",
-    },
+    ".cm-activeLine": { backgroundColor: "transparent" },
+    "&.cm-focused .cm-activeLine": { boxShadow: "inset 0 0 0 2px #282828" },
     ".cm-gutters": {
       backgroundColor: background,
-      color: stone,
+      color: "#858585",
       border: "none",
     },
-    ".cm-activeLineGutter": { backgroundColor: highlightBackground },
+    ".cm-activeLineGutter": { backgroundColor: "transparent" },
+    "&.cm-focused .cm-activeLineGutter": { color: "#C6C6C6" },
     ".cm-foldPlaceholder": {
       backgroundColor: "transparent",
       border: "none",