Q: 关于在vitepress中使用，如何设置暗黑模式 || Q: Regarding using in vitepress, how to set up dark mode

[CN-Jayden]

Describe the bug | 问题描述

关于在vitepress中使用，如何设置暗黑模式

Website URL | 问题网站

https://waline.js.org/reference/client/style.html#%E6%8F%90%E4%BE%9B%E7%9A%84%E5%8F%98%E9%87%8F%E4%B8%8E%E9%BB%98%E8%AE%A4%E5%80%BC

Where your waline deploy? | 服务部署在哪里？

Vercel (Default)

Where your comment data store? | 数据存储在哪里？

LeanCloud(https://leancloud.app)

---

Describe the bug | Problem description

Regarding using in vitepress, how to set up dark mode

Website URL | Problem website

https://waline.js.org/reference/client/style.html#%E6%8F%90%E4%BE%9B%E7%9A%84%E5%8F%98%E9%87%8F%E4 %B8%8E%E9%BB%98%E8%AE%A4%E5%80%BC

Where your waline deploy? | Where is the service deployed?

Vercel (Default)

Where your comment data store? | Where is the data stored?

LeanCloud(https://leancloud.app)

[MWTJC]

这是ai给出的/.vitepress/theme/components/Waline.vue，我实测可行：

<template>
  <div class="waline-wrapper">
    <div ref="walineRef" class="waline-container"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from 'vue'
import { useData } from 'vitepress'
import { init } from '@waline/client'
import '@waline/client/style'

const props = defineProps({
  serverURL: {
    type: String,
    required: true
  }
})

const { isDark } = useData()
const walineRef = ref<HTMLElement>()
let walineInstance: any = null

// 获取 VitePress 主题色
const getBrandColor = () => {
  return getComputedStyle(document.documentElement)
      .getPropertyValue('--vp-c-brand-1')
      .trim()
}

// 初始化 Waline
const initWaline = () => {
  if (!walineRef.value) return

  walineInstance = init({
    el: walineRef.value,
    serverURL: props.serverURL,
    dark: isDark.value,
    // 其他配置
    emoji: [
      '//unpkg.com/@waline/[email protected]/weibo',
      '//unpkg.com/@waline/[email protected]/bilibili'
    ],
    search: false,
  })
}

// 更新主题
const updateTheme = () => {
  if (walineInstance) {
    walineInstance.update({
      dark: isDark.value
    })
  }
}

onMounted(() => {
  nextTick(() => {
    initWaline()
  })
})

// 监听暗黑模式切换
watch(isDark, () => {
  updateTheme()
})
// 监听路由变化，重新初始化评论
watch(() => route.path, () => {
  nextTick(() => {
    if (walineInstance) {
      walineInstance.update({
        path: route.path
      })
    }
  })
})
</script>

<style>
/* 同步 VitePress 主题色 */
.waline-wrapper {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--vp-c-divider);
}

/* 主题色同步 */
:root {
  --waline-theme-color: var(--vp-c-brand-1);
  --waline-active-color: var(--vp-c-brand-2);
}

/* 暗黑模式适配 */
.dark .waline-wrapper {
  --waline-bg-color: var(--vp-c-bg);
  --waline-bg-color-light: var(--vp-c-bg-soft);
  --waline-border-color: var(--vp-c-divider);
  --waline-text-color: var(--vp-c-text-1);
  --waline-bgcolor-light: var(--vp-c-bg-soft);
}

/* 亮色模式适配 */
.waline-wrapper {
  --waline-bg-color: var(--vp-c-bg);
  --waline-bg-color-light: var(--vp-c-bg-soft);
  --waline-border-color: var(--vp-c-divider);
  --waline-text-color: var(--vp-c-text-1);
  --waline-bgcolor-light: var(--vp-c-bg-soft);
}

/* 自定义样式优化 */
.waline-container {
  font-size: 14px;
}

.wl-panel {
  border-radius: 8px;
}

.wl-editor {
  border-radius: 8px;
}

.wl-btn {
  border-radius: 4px;
  transition: all 0.3s ease;
}

.wl-btn:hover {
  background-color: var(--vp-c-brand-1);
  border-color: var(--vp-c-brand-1);
}
</style>

对应注册方式如下：
/.vitepress/theme/index.ts

import Waline from './components/Waline.vue'

// ...

export default {
    extends: DefaultTheme,
    Layout: () => {
        const LayoutWrapper = {
            setup() {
                return () => h(DefaultTheme.Layout, null, {
                    // ...
                    'doc-after': () => h(Waline, {
                        serverURL: 'https://web.site' // 替换为外部可达 Waline 服务端地址
                    }),
                    // ...
                })
            }
        }
        return h(LayoutWrapper)
    },
    enhanceApp({ app, router }) {
        app.component('Waline', Waline)
        }

    },