From d6c5a2fbd846a1af4361be77fb702c968b0765a3 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Fri, 8 Sep 2023 15:00:41 +0800
Subject: [PATCH] feat: theming apply to whole site

---
 apps/www/.vitepress/theme/layout/MainLayout.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index 588eefc2..1349011f 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useToggle } from '@vueuse/core'
 import { Content, useData, useRoute } from 'vitepress'
+import { onMounted } from 'vue'
 import { docsConfig } from '../config/docs'
 import Logo from '../components/Logo.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 RadixIconsMoon from '~icons/radix-icons/moon'
 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()