fix: single theme dark mode

docs/valaxy.config.ts

@@ -118,5 +118,7 @@ export default defineValaxyConfig<PressTheme.Config>({
         text: 'i-carbon-information',
       },
     },
+
+    // theme: 'material-theme-palenight',
   },
 })

packages/valaxy-theme-yun/styles/common/markdown.scss

@@ -5,7 +5,7 @@
   --c-toc-link: var(--va-c-text-light);
 }
 
-html.dark {
+.dark {
   .markdown-body {
     --c-toc-link: var(--va-c-text-dark);
   }

packages/valaxy-theme-yun/styles/css-vars.scss

@@ -13,6 +13,6 @@
   @include set-css-var-from-map($light);
 }
 
-html.dark {
+.dark {
   @include set-css-var-from-map($dark);
 }

packages/valaxy/client/styles/common/custom-blocks.scss

@@ -12,7 +12,7 @@
   --va-c-text-warning: #544500;
 }
 
-html.dark {
+.dark {
   --va-c-text-warning: #ffea8a;
 }
 

packages/valaxy/client/styles/css-vars.scss

@@ -33,7 +33,7 @@ $c-primary: #0078e7 !default;
 }
 
 // dark
-html.dark {
+.dark {
   color-scheme: dark;
   @include set-css-var-from-map(palette.$dark);
 }
@@ -81,6 +81,10 @@ html.dark {
   --va-code-copy-copied-text-content: 'Copied';
 }
 
+.dark {
+  --va-code-block-bg: var(--va-c-bg-alt);
+}
+
 /* Icons */
 :root {
   --va-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");

packages/valaxy/client/styles/global/reset.scss

@@ -17,3 +17,7 @@ hr {
   opacity: 0.2;
   margin: 1rem;
 }
+
+button {
+  background-color: transparent;
+}

packages/valaxy/client/styles/palette.scss

@@ -88,14 +88,13 @@ $dark: map.merge(
 
     "c-bg-soft": #1d1e1f,
     "c-bg-mute": #2f2f2f,
-    "c-bg-alt": #1a1a1a,
+    "c-bg-alt": #161618,
 
     "c-text": #f2f2f2,
     "c-text-light": #ddd,
     "c-text-lighter": #eee,
     "c-text-dark": rgba(#ebebeb, 0.8),
     "c-link": map.get($colors, "primary-light"),
-    "code-block-bg": #151515,
   ),
   $dark
 );

packages/valaxy/node/markdown/index.ts

@@ -43,6 +43,8 @@ export interface MarkdownParsedData {
 
 export type MarkdownRenderer = MarkdownIt
 
+export const defaultCodeTheme = { light: 'github-light', dark: 'github-dark' }
+
 export async function setupMarkdownPlugins(
   md: MarkdownIt,
   options: ResolvedValaxyOptions,
@@ -50,12 +52,11 @@ export async function setupMarkdownPlugins(
   base = '/',
 ) {
   const mdOptions = options.config.markdown || {}
-  const theme = mdOptions.theme ?? 'material-theme-palenight'
-  const hasSingleTheme = typeof theme === 'string' || 'name' in theme
+  const theme = mdOptions.theme ?? defaultCodeTheme
 
   // custom plugins
   md.use(highlightLinePlugin)
-    .use(preWrapperPlugin, { hasSingleTheme })
+    .use(preWrapperPlugin, { theme })
     .use(containerPlugin, mdOptions.blocks)
     .use(cssI18nContainer, {
       languages: ['zh-CN', 'en'],
@@ -140,7 +141,7 @@ export async function setupMarkdownPlugins(
 
 export async function createMarkdownRenderer(options: ResolvedValaxyOptions): Promise<MarkdownRenderer> {
   const mdOptions = options.config.markdown || {}
-  const theme = mdOptions.theme ?? 'material-theme-palenight'
+  const theme = mdOptions.theme ?? defaultCodeTheme
 
   const md = MarkdownIt({
     html: true,

packages/valaxy/node/markdown/plugins/markdown-it/preWrapper.ts

@@ -1,8 +1,9 @@
 // ref vitepress/packages/vitepress/src/node/markdown/plugins/preWrapper.ts
 import type MarkdownIt from 'markdown-it'
+import type { ThemeOptions } from '../../types'
 
 export interface Options {
-  hasSingleTheme: boolean
+  theme: ThemeOptions
 }
 
 export function extractLang(info: string) {
@@ -14,7 +15,16 @@ export function extractLang(info: string) {
 }
 
 export function getAdaptiveThemeMarker(options: Options) {
-  return options.hasSingleTheme ? '' : ' vp-adaptive-theme'
+  const { theme } = options
+  const hasSingleTheme = typeof theme === 'string' || 'name' in theme
+  let marker = ''
+  if (hasSingleTheme) {
+    marker = ' va-adaptive-theme'
+    const themeName = typeof theme === 'string' ? theme : theme.name
+    const isDark = themeName.includes('dark') || themeName.includes('night')
+    marker = isDark ? ' dark' : ' light'
+  }
+  return marker
 }
 
 // markdown-it plugin for wrapping <pre> ... </pre>.