Update custom.css

custom.css

@@ -1,20 +1,20 @@
 @font-face {
     font-family: 'Dank Mono';
-    src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
+    src: url('../assets/fonts/DankMono-Regular.woff2') format('woff2');
     font-display: swap;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Dank Mono';
-    src: url('../assets/fonts/JetBrainsMono-Italic.woff2') format('woff2');
+    src: url('../assets/fonts/DankMono-Italic.woff2') format('woff2');
     font-display: swap;
     font-style: italic;
 }
 
 @font-face {
     font-family: 'JinBuTi';
-    src: url('../assets/fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
+    src: url('../assets/fonts/DingTalk-JinBuTi.woff2') format('woff2');
     font-display: swap;
 }
 
@@ -23,52 +23,76 @@ html {
 }
 
 body {
-    font-family: 'Dank Mono', -apple-system, BlinkMacSystemFont, sans-serif;
+    font-family: 'JinBuTi', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 /* 代码块容器样式 */
 .language-javascript, [class*="language-"] {
-    background: #282c34 !important;
+    background: #f6f8fa !important;
     border-radius: 10px !important;
-    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4) !important;
+    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1) !important;
     position: relative;
     margin: 1.2em 0;
 }
 
+.dark .language-javascript, .dark [class*="language-"] {
+    background: #282c34 !important;
+    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4) !important;
+}
+
 /* 代码块顶部栏 */
 .sticky.top-8 {
-    background: #21252b !important;
+    background: #e1e4e8 !important;
     height: 40px !important;
     display: flex;
     align-items: center;
     border-radius: 10px 10px 0 0;
     padding: 0 15px !important;
-    margin-bottom: -60px !important;
+    margin-bottom: -59px !important;
+}
+
+.dark .sticky.top-8 {
+    background: #21252b !important;
 }
 
 /* 语言标识 */
 .text-text-300 {
     position: absolute;
     left: 60px;
-    /* top: 7px; */
+    top: 2px;
     color: #abb2bf !important;
     font-size: 17px !important;
     font-weight: 500 !important;
     z-index: 11;
 }
 
+.dark .text-text-300 {
+    color: #586069 !important;
+}
+
 /* 顶部按钮样式优化 */
 .save-code-button, .copy-code-button, .run-code-button {
-    background: #323842 !important;
-    color: #abb2bf !important;
-    border: 1px solid #3e4451 !important;
+    background: #f8f9fa !important;
+    color: #333 !important;
+    border: 1px solid #d1d5da !important;
     font-size: 12px !important;
     padding: 4px 12px !important;
     border-radius: 4px !important;
     transition: all 0.2s ease-in-out !important;
 }
 
+.dark .save-code-button, .dark .copy-code-button, .dark .run-code-button {
+    background: #323842 !important;
+    color: #abb2bf !important;
+    border: 1px solid #3e4451 !important;
+}
+
 .save-code-button:hover, .copy-code-button:hover {
+    background: #e9ecef !important;
+    color: #222 !important;
+}
+
+.dark .save-code-button:hover, .dark .copy-code-button:hover {
     background: #3e4451 !important;
     color: #fff !important;
 }
@@ -78,46 +102,71 @@ body {
     content: " ";
     position: absolute;
     border-radius: 50%;
-    background: #fc625d;
+    background: #ff5f56;
     width: 12px;
     height: 12px;
     left: 15px;
     top: 14px;
-    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
+    box-shadow: 20px 0 #ffbd2e, 40px 0 #27c93f;
     z-index: 10;
 }
 
+.dakr .language-javascript::before, .dakr [class*="language-"]::before {
+    background: #fc625d;
+    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
+}
+
 /* 代码内容区域 */
 .cm-content {
     font-family: 'Dank Mono', -apple-system, BlinkMacSystemFont, Inter, ui-sans-serif, system-ui, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     font-size: 15px !important;
     line-height: 1.6em !important;
     padding: 20px 1.4em 1em 30px !important;
+    color: #24292e !important;
+}
+
+.dark .cm-content {
     color: #abb2bf !important;
 }
 
 /* 代码语法高亮 */
 .cm-line .ͼb {
     /* 关键字 */
+    color: #d73a49 !important;
+}
+
+.dark .cm-line .ͼb {
     color: #c678dd !important;
 }
 
 .cm-line .ͼd {
     /* 数字 */
+    color: #a29bfe !important;
+}
+
+.dakr .cm-line .ͼd {
     color: #e5c07b !important;
 }
 
 .cm-line .ͼe {
     /* 字符串 */
+    color: #6a89cc !important;
+}
+
+.dakr .cm-line .ͼe {
     color: #98c379 !important;
 }
 
 .cm-line .ͼg {
     /* 变量 */
-    color: #e06c75 !important;
+    color: #2ca9e1 !important;
     font-style: italic;
 }
 
+.dakr .cm-line .ͼg {
+    color: #e3adb9 !important;
+}
+
 /* 代码语法高亮 - 扩展 */
 .cm-comment {
     /* 注释 */
@@ -129,7 +178,7 @@ body {
     color: #61afef !important;
 }
 
-.cm-tag {
+cm-tag {
     color: #e06c75 !important;
 }
 
@@ -146,7 +195,7 @@ body {
 }
 
 span.ͼc {
-    color: #dd6b7b !important;
+    color: #7d5fff !important;
 }
 
 span.ͼl {
@@ -154,25 +203,30 @@ span.ͼl {
 }
 
 span.ͼt {
+    /* 暗色模式下的逗号 */
     color: #ddb078 !important;
     ;
     font-style: italic;
 }
 
 span.ͼr {
+    /* 暗色模式下的函数名 */
     font-style: italic;
 }
 
 span.ͼf {
-    color: #80a492;
+    /* 亮色模式下奇怪的符号 */
+    color: #70a1ff;
 }
 
 span.ͼm {
-    color: #3d8e86;
+    /* 亮色模式下的注释 */
+    color: #f29a76;
     font-style: italic;
 }
 
 span.ͼw {
+    /* 暗色模式下的注释 */
     font-style: italic;
 }
 
@@ -180,27 +234,48 @@ span.ͼw {
 .cm-scroller::-webkit-scrollbar {
     height: 10px !important;
     width: 10px !important;
+    background-color: #f6f8fa !important;
+}
+
+.dark .cm-scroller::-webkit-scrollbar {
     background-color: #282c34 !important;
 }
 
 .cm-scroller::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) !important;
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1) !important;
     border-radius: 10px !important;
+    background-color: #f6f8fa !important;
+}
+
+.dark .cm-scroller::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) !important;
     background-color: #282c34 !important;
 }
 
 .cm-scroller::-webkit-scrollbar-thumb {
     border-radius: 10px !important;
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, .2) !important;
+    background-color: #d1d5da !important;
+}
+
+.dark .cm-scroller::-webkit-scrollbar-thumb {
     box-shadow: inset 0 0 6px rgba(0, 0, 0, .5) !important;
     background-color: #3e4451 !important;
 }
 
 /* 行号栏样式 */
 .cm-gutters {
+    background: #f6f8fa !important;
+    border-right: 1px solid #d1d5da !important;
+    color: #586069 !important;
+    padding-right: 10px !important;
+    font-family: "Dank Mono";
+}
+
+.dark .cm-gutters {
     background: #282c34 !important;
     border-right: 1px solid #3e4451 !important;
     color: #495162 !important;
-    padding-right: 10px !important;
 }
 
 /* 当前行高亮 */
@@ -209,6 +284,10 @@ span.ͼw {
 }
 
 .cm-gutterElement.cm-activeLineGutter {
+    background-color: #f9d3e3;
+}
+
+.dark .cm-gutterElement.cm-activeLineGutter {
     background-color: #dd7694;
 }
 
@@ -223,9 +302,18 @@ span.ͼw {
 
 /* 选中时的文本颜色保持原样，确保可读性 */
 .cm-content ::selection {
+    color: rgba(62, 158, 111, 0.9) !important;
+}
+
+.dark .cm-content ::selection {
     color: rgba(245, 177, 255, 0.9) !important;
 }
 
+/* 匹配相同结果时的颜色 */
+.cm-selectionMatch {
+    background-color: #9c88ff5a !important;
+}
+
 /* 当有多行选中时的样式 */
 .cm-selectionLayer>.cm-selectionBackground {
     background-color: rgba(122, 129, 255, 0.2) !important;
@@ -233,7 +321,14 @@ span.ͼw {
 
 /* 代码块折叠/展开样式添加与修改 */
 .cm-scroller {
+    background-color: #f6f8fa;
+}
+
+#collapsed>.cm-scroller, #expanded>.cm-scroller {
     padding-bottom: 40px;
+}
+
+.dark .cm-scroller {
     background-color: #282c34;
 }
 
@@ -324,7 +419,7 @@ span.ͼw {
     left: 0;
     right: 0;
     height: 100px;
-    background: linear-gradient(transparent 0%, rgba(45, 45, 45, 0.3) 40%, rgba(45, 45, 45, 0.6) 80%, rgba(45, 45, 45, 0.8) 100%);
+    background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.8) 100%);
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.3s ease;
@@ -341,4 +436,9 @@ span.ͼw {
 /* 只在折叠状态显示渐变遮罩 */
 .cm-editor#collapsed::after {
     opacity: 1;
+}
+
+/* 隐藏原始的折叠按钮 */
+button.flex.gap-1.items-center:not(.run-code-button) {
+    display: none;
 }