problems in vitepress

[mancuoj]

First of all, thank you very much for your open source project!

I am new in frontend, and I want to use key to reload the giscus component when user toggles dark mode, but when I toggle the mode, the display of this component is no longer complete

this is my code, and preview doc link: https://cs.hrh.icu/cs/intro

<script setup>
import Giscus from '@giscus/vue'
import DefaultTheme from 'vitepress/theme'
import { useData } from 'vitepress'

const { isDark } = useData()
const { Layout } = DefaultTheme
</script>

<template>
  <Layout>
    <template #doc-after>
      <div id="giscus" :key="isDark">
        <Giscus ... lang="zh-CN" loading="lazy" :theme="[isDark ? 'transparent_dark' : 'light_tritanopia']" />
      </div>
    </template>
  </Layout>
</template>

<style scoped>
#giscus {
  margin-top: 3.2rem;
}
</style>

[laymonage]

You shouldn't need to use key, the component will automatically change the theme when you change the theme prop...

[mancuoj]

Thank you for your answer, but I didn't use key to re-render the component at the beginning, and I started to use it after I found that the theme could not be changed automatically.

and you can preview in my latest update.

[laymonage]

You need to use computed for your use case, because the theme is computed from isDark. Without computed, the value is only calculated on initial render.

Fix: https://github.com/mancuoj/csdiy/pull/20

[mancuoj]

Thanks so much!