diff --git a/demo/yun/theme.config.ts b/demo/yun/theme.config.ts
index 45b001e8b..59cf01f1a 100644
--- a/demo/yun/theme.config.ts
+++ b/demo/yun/theme.config.ts
@@ -11,6 +11,7 @@ export default defineThemeConfig({
   banner: {
     enable: true,
     title: '云游君的小站',
+    siteNameClass: 'bg-gradient-to-r gradient-text from-#1e3c72 to-dark dark:from-#66a6ff dark:to-blue-500',
   },
 
   notice: {
diff --git a/packages/valaxy-theme-yun/components/site/YunSiteTitle.vue b/packages/valaxy-theme-yun/components/site/YunSiteTitle.vue
index 06c10db2b..191ebbb67 100644
--- a/packages/valaxy-theme-yun/components/site/YunSiteTitle.vue
+++ b/packages/valaxy-theme-yun/components/site/YunSiteTitle.vue
@@ -1,22 +1,30 @@
 <script setup lang="ts">
 import { useSiteConfig } from 'valaxy'
-import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { useThemeConfig } from '../../composables'
 
 const router = useRouter()
 const siteConfig = useSiteConfig()
+const themeConfig = useThemeConfig()
 
-const classes = ref('site-name text-lg leading-loose bg-gradient-to-r gradient-text from-#1e3c72 to-dark dark:(from-#66a6ff to-blue-500)')
+// bg-gradient-to-r gradient-text from-#1e3c72 to-dark dark:(from-#66a6ff to-blue-500)
 </script>
 
 <template>
   <RouterLink
     v-if="router.hasRoute('/about/site')" to="/about/site"
-    :class="classes"
+    class="site-name text-lg leading-loose"
+    :class="themeConfig.banner.siteNameClass"
   >
     {{ siteConfig.title }}
   </RouterLink>
-  <span v-else :class="classes">{{ siteConfig.title }}</span>
+  <span
+    v-else
+    class="site-name text-lg leading-loose"
+    :class="themeConfig.banner.siteNameClass"
+  >
+    {{ siteConfig.title }}
+  </span>
 </template>
 
 <style lang="scss">
diff --git a/packages/valaxy-theme-yun/types/index.d.ts b/packages/valaxy-theme-yun/types/index.d.ts
index 074a1eba0..b2dce9b4a 100644
--- a/packages/valaxy-theme-yun/types/index.d.ts
+++ b/packages/valaxy-theme-yun/types/index.d.ts
@@ -22,6 +22,11 @@ export namespace YunTheme {
     cloud?: {
       enable: boolean
     }
+
+    /**
+     * site-name class
+     */
+    siteNameClass?: string
   }
 }