fix: improve code highlight style, close #222, #223 (#226)

* fix: improve code highlight style, close #222, #223

* chore: tweak

plugins/features/plugin-copy-code/src/client/styles/copy-code.scss

@@ -2,7 +2,7 @@
   --code-copy-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2' /%3e%3c/svg%3e");
   --code-copied-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4' /%3e%3c/svg%3e");
   --copy-code-color: var(--code-c-line-number, #9e9e9e);
-  --copy-code-hover: var(--code-highlight-bg-color, rgb(0 0 0 / 50%));
+  --copy-code-hover: var(--code-c-highlight-bg, rgb(0 0 0 / 50%));
 }
 
 .vp-copy-code-button {

plugins/markdown/plugin-shiki/src/client/styles/shiki.scss

@@ -3,7 +3,7 @@
   --code-c-text: #9e9e9e;
 
   // highlight
-  --code-c-highlight-bg: rgb(0 0 0 / 66%);
+  --code-c-highlight-bg: rgba(142 150 170 / 14%);
 }
 
 .shiki span {
@@ -15,9 +15,9 @@
 }
 
 div[data-highlighter='shiki'] {
-  background-color: var(--code-c-bg, --shiki-light-bg);
+  background-color: var(--code-c-bg, var(--shiki-light-bg));
 
   [data-theme='dark'] & {
-    background-color: var(--code-c-bg, --shiki-dark-bg);
+    background-color: var(--code-c-bg, var(--shiki-dark-bg));
   }
 }

themes/theme-default/src/client/components/global/CodeGroup.ts

@@ -9,6 +9,7 @@ import {
   ref,
   watch,
 } from 'vue'
+import { useDarkMode } from '../../composables/useDarkMode.js'
 
 import '../../styles/code-group.scss'
 
@@ -30,6 +31,35 @@ export const CodeGroup = defineComponent({
         tabRefs.value = []
       })
     }
+    const isDark = useDarkMode()
+    const groupRef = ref<HTMLDivElement>()
+    // shiki highlighter color & background
+    onMounted(() => {
+      if (!groupRef.value) return
+      const codeBlock = groupRef.value.querySelector(
+        'div[class*="language-"]',
+      ) as HTMLDivElement
+      if (codeBlock && codeBlock.dataset.highlighter === 'shiki') {
+        const lightColor = codeBlock.style.getPropertyValue('--shiki-light')
+        const darkColor = codeBlock.style.getPropertyValue('--shiki-dark')
+        const lightBg = codeBlock.style.getPropertyValue('--shiki-light-bg')
+        const darkBg = codeBlock.style.getPropertyValue('--shiki-dark-bg')
+        watch(
+          isDark,
+          (val) => {
+            groupRef.value!.style.setProperty(
+              '--c-code-group-tab-bg',
+              val ? darkBg : lightBg,
+            )
+            groupRef.value!.style.setProperty(
+              '--c-code-group-tab-title',
+              val ? darkColor : lightColor,
+            )
+          },
+          { immediate: true },
+        )
+      }
+    })
 
     // index of current active item
     const activeIndex = ref(-1)
@@ -127,7 +157,7 @@ export const CodeGroup = defineComponent({
         })
       }
 
-      return h('div', { class: 'code-group' }, [
+      return h('div', { class: 'code-group', ref: groupRef }, [
         h(
           'div',
           { class: 'code-group-nav', role: 'tablist' },

themes/theme-default/src/client/styles/code-group.scss

@@ -16,6 +16,8 @@
 
   background-color: var(--c-code-group-tab-bg);
 
+  transition: background-color var(--t-color);
+
   @media (max-width: $MQMobileNarrow) {
     margin-right: -1.5rem;
     margin-left: -1.5rem;

themes/theme-default/src/client/styles/vars.scss

@@ -63,8 +63,8 @@
   --c-badge-danger-text: var(--c-bg);
 
   // code group colors
-  --c-code-group-tab-title: rgb(255 255 255 / 90%);
-  --c-code-group-tab-bg: var(--code-bg-color);
+  --c-code-group-tab-title: var(--code-c-text, rgb(255 255 255 / 90%));
+  --c-code-group-tab-bg: var(--code-bg-color, var(--code-c-bg));
   --c-code-group-tab-outline: var(var(--c-code-group-tab-title));
   --c-code-group-tab-active-border: var(--c-brand);
 

tools/highlighter-helper/src/client/styles/line-numbers.scss

@@ -20,8 +20,10 @@ div[class*='language-'] {
 
       width: var(--code-line-number-width);
       height: 100%;
-      border-right: 1px solid var(--code-highlight-bg-color);
+      border-right: 1px solid var(--code-c-highlight-bg, var(--code-c-text));
       border-radius: var(--code-border-radius) 0 0 var(--code-border-radius);
+
+      transition: border var(--t-color);
     }
 
     pre {
@@ -42,7 +44,7 @@ div[class*='language-'] {
       width: var(--code-line-number-width);
       padding-top: var(--code-padding-y);
 
-      color: var(--code-c-line-number, --code-c-text);
+      color: var(--code-c-line-number, var(--code-c-text));
 
       font-size: 0.875em;
       line-height: var(--code-line-height);

tools/highlighter-helper/src/client/styles/notation-highlight.scss

@@ -6,12 +6,13 @@
 // - `// [\!code hl]`
 // - `// [\!code highlight:3]`
 // - `// [\!code hl:3]`
+
 div[class*='language-'] .line.highlighted {
   display: inline-block;
 
   width: 100%;
   margin: 0 calc(-1 * var(--code-padding-x));
   padding: 0 var(--code-padding-x);
 
-  background-color: var(--code-highlight-bg-color);
+  background-color: var(--code-c-highlight-bg);
 }

tools/highlighter-helper/src/client/styles/notation-word-highlight.scss

@@ -1,6 +1,11 @@
 :root {
+  --code-word-highlight-bg-color: rgb(66 66 66 / 10%);
+  --code-word-highlight-border: rgb(120 120 120 / 40%);
+}
+
+[data-theme='dark'] {
   --code-word-highlight-bg-color: rgb(0 0 0 / 20%);
-  --code-word-highlight-border: #636363;
+  --code-word-highlight-border: rgb(99 99 99 / 80%);
 }
 
 // notation word highlight