feat: #1 代码块样式优化-护眼模式代码块适配

terwer · Mar 2, 2023 · d2bd3cb · d2bd3cb
1 parent cf377a8
commit d2bd3cb
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 4 deletions.
diff --git a/src/styles/common/vars/vars-common.styl b/src/styles/common/vars/vars-common.styl
@@ -23,6 +23,7 @@ _text-lighten-color-light = #0085ad
 _border-color-light = rgba(0, 0, 0, 0.12)
 _code-bg-light = #f6f6f6
 _code-color-light = #525252
+_code-tab-bg-light = _main-bg-light
 
 _body-bg-dark = #27272b
 _main-bg-dark = #1e1e22
@@ -34,6 +35,7 @@ _text-lighten-color-dark = #0085ad
 _border-color-dark = #30363d
 _code-bg-dark = #252526
 _code-color-dark = #fff
+_code-tab-bg-dark = _main-bg-dark
 
 _body-bg-green = #ececcc
 _main-bg-green = #f5f5d5
@@ -44,4 +46,5 @@ _text-color-green = #704214
 _text-lighten-color-green = #963
 _border-color-green = rgba(0, 0, 0, 0.15)
 _code-bg-green = #282c34
-_code-color-green = #fff
+_code-color-green = #fff
+_code-tab-bg-green = _main-bg-green
diff --git a/src/styles/zhi/widgets/code-block/code-block-dark.styl b/src/styles/zhi/widgets/code-block/code-block-dark.styl
@@ -1 +1,3 @@
-/* -------------------------------------------------代码块-暗黑模式--------------------------------------------------- */
+/* -------------------------------------------------代码块-暗黑模式--------------------------------------------------- */
+html[data-theme-mode="dark"]
+  --zhi-code-tab-bg: _code-tab-bg-dark
diff --git a/src/styles/zhi/widgets/code-block/code-block-green.styl b/src/styles/zhi/widgets/code-block/code-block-green.styl
@@ -0,0 +1,13 @@
+/* -------------------------------------------------颜色定义-阅读模式--------------------------------------------------- */
+html[data-theme-mode="green"]
+  --zhi-code-tab-bg: _code-tab-bg-green
+  --b3-border-color: _border-color-green
+
+  .code-block {
+    border-color: _border-color-green !important
+  }
+
+  .b3-typography div.hljs,
+  .protyle-wysiwyg div.hljs {
+    background: var(--b3-protyle-code-background)
+  }
diff --git a/src/styles/zhi/widgets/code-block/code-block-light.styl b/src/styles/zhi/widgets/code-block/code-block-light.styl
@@ -1,10 +1,12 @@
 /* -------------------------------------------------代码块-浅色模式--------------------------------------------------- */
+html[data-theme-mode="light"]
+  --zhi-code-tab-bg: _code-tab-bg-light
+
 .code-block
-  --terwer-code-tab-bg: #f3f5f7
   border: .5px solid var(--b3-border-color) !important
   border-radius: 5px !important
   padding-top: 32px !important
-  background: var(--terwer-code-tab-bg)
+  background: var(--zhi-code-tab-bg)
 
 /* 代码块编辑区域/正文内容 */
 .b3-typography div.hljs,

diff --git a/src/styles/zhi/widgets/code-block/index.styl b/src/styles/zhi/widgets/code-block/index.styl
@@ -1,2 +1,4 @@
 @require "code-block-light"
+@require "code-block-dark"
+@require "code-block-green"
 @require "code-block-print"