Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: theming apply to whole site

Browse Source
This commit is contained in:
zernonia 2023-09-08 15:00:41 +08:00
parent 0b03032db9
commit d6c5a2fbd8
1 changed files with 9 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/www/.vitepress/theme/layout/MainLayout.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { useToggle } from '@vueuse/core' import { useToggle } from '@vueuse/core'
import { Content, useData, useRoute } from 'vitepress' import { Content, useData, useRoute } from 'vitepress'
import { onMounted } from 'vue'
import { docsConfig } from '../config/docs' import { docsConfig } from '../config/docs'
import Logo from '../components/Logo.vue' import Logo from '../components/Logo.vue'
import MobileNav from '../components/MobileNav.vue' import MobileNav from '../components/MobileNav.vue'
@ -12,6 +13,14 @@ import RadixIconsGithubLogo from '~icons/radix-icons/github-logo'
import TablerBrandX from '~icons/tabler/brand-x' import TablerBrandX from '~icons/tabler/brand-x'
import RadixIconsMoon from '~icons/radix-icons/moon' import RadixIconsMoon from '~icons/radix-icons/moon'
import RadixIconsSun from '~icons/radix-icons/sun' import RadixIconsSun from '~icons/radix-icons/sun'
import { useConfigStore } from '@/stores/config'
const { radius, theme } = useConfigStore()
// Whenever the component is mounted, update the document class list
onMounted(() => {
document.documentElement.style.setProperty('--radius', `${radius.value}rem`)
document.documentElement.classList.add(`theme-${theme.value}`)
})
const { frontmatter, isDark } = useData() const { frontmatter, isDark } = useData()