refactor: change back default theme to palenight

src/client/theme-default/index.ts

@@ -2,8 +2,8 @@ import './styles/fonts.css'
 import './styles/vars.css'
 import './styles/base.css'
 import './styles/utils.css'
-import './styles/components/code.css'
 import './styles/components/custom-block.css'
+import './styles/components/vp-code.css'
 import './styles/components/vp-doc.css'
 import './styles/components/vp-sponsor.css'
 

src/client/theme-default/styles/components/vp-doc.css

@@ -410,7 +410,7 @@
   text-align: center;
   font-size: 12px;
   font-weight: 500;
-  color: var(--vp-c-text-code);
+  color: var(--vp-code-copy-code-active-text);
   background-color: var(--vp-code-copy-code-hover-bg);
   white-space: nowrap;
   content: "Copied";

src/client/theme-default/styles/vars.css

@@ -176,20 +176,20 @@
 }
 
 /**
- * Layouts
+ * Icons
  * -------------------------------------------------------------------------- */
 
-:root {
-  --vp-layout-max-width: 1440px;
+ :root {
+  --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%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");
+  --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%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");
 }
 
 /**
- * Icons
+ * Layouts
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%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");
-  --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%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");
+  --vp-layout-max-width: 1440px;
 }
 
 /**
@@ -201,17 +201,17 @@
   --vp-code-font-size: 0.875em;
 
   --vp-code-block-color: var(--vp-c-text-dark-1);
-  --vp-code-block-bg: var(--vp-c-bg-alt);
+  --vp-code-block-bg: #292d3e;
 
-  --vp-code-line-highlight-color: rgba(225, 225, 225, 0.5);
+  --vp-code-line-highlight-color: rgba(0, 0, 0, 0.5);
   --vp-code-line-number-color: var(--vp-c-text-dark-3);
 
-  --vp-code-copy-code-hover-bg: rgba(125, 125, 125, 0.1);
+  --vp-code-copy-code-hover-bg: rgba(255, 255, 255, 0.05);
+  --vp-code-copy-code-active-text: var(--vp-c-text-dark-2);
 }
 
 .dark {
-  --vp-code-line-highlight-color: rgba(0, 0, 0, 0.5);
-  --vp-code-line-number-color: var(--vp-c-text-dark-3);
+  --vp-code-block-bg: var(--vp-c-bg-alt);
 }
 
 /**

src/node/markdown/plugins/highlight.ts

@@ -1,9 +1,7 @@
 import { getHighlighter } from 'shiki'
 import type { ThemeOptions } from '../markdown'
 
-export async function highlight(
-  theme: ThemeOptions = { light: 'vitesse-light', dark: 'vitesse-dark' }
-) {
+export async function highlight(theme: ThemeOptions = 'material-palenight') {
   const themes = typeof theme === 'string' ? [theme] : [theme.dark, theme.light]
   const highlighter = await getHighlighter({ themes })
   const preRE = /^<pre.*?>/
@@ -15,14 +13,16 @@ export async function highlight(
       return highlighter
         .codeToHtml(str, { lang, theme })
         .replace(preRE, '<pre v-pre>')
-    } else {
-      const dark = highlighter
-        .codeToHtml(str, { lang, theme: theme.dark })
-        .replace(preRE, '<pre v-pre class="vp-code-dark">')
-      const light = highlighter
-        .codeToHtml(str, { lang, theme: theme.light })
-        .replace(preRE, '<pre v-pre class="vp-code-light">')
-      return dark + light
     }
+
+    const dark = highlighter
+      .codeToHtml(str, { lang, theme: theme.dark })
+      .replace(preRE, '<pre v-pre class="vp-code-dark">')
+
+    const light = highlighter
+      .codeToHtml(str, { lang, theme: theme.light })
+      .replace(preRE, '<pre v-pre class="vp-code-light">')
+
+    return dark + light
   }
 }