From fc600470d4ff3d933535633a528ac06e9e99cc0a Mon Sep 17 00:00:00 2001
From: chenxi-20 <76168465+chenxi-20@users.noreply.github.com>
Date: Mon, 8 Apr 2024 16:12:11 +0800
Subject: [PATCH] fix(docs): fix the issue of the theme switch button not being
 centered (#1533)

---
 examples/sites/src/views/layout/layout.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/examples/sites/src/views/layout/layout.vue b/examples/sites/src/views/layout/layout.vue
index a78fd0e2ec..b93ed39cdd 100644
--- a/examples/sites/src/views/layout/layout.vue
+++ b/examples/sites/src/views/layout/layout.vue
@@ -7,11 +7,9 @@
       </tiny-tooltip>
     </div>
     <!-- 切換主题样式 -->
-    <tiny-dropdown v-if="!templateModeState.isSaas" class="theme-change-button" trigger="click">
+    <tiny-dropdown v-if="!templateModeState.isSaas" class="theme-change-button" trigger="click" :show-icon="false">
       <tiny-tooltip :content="i18nByKey('changeTheme')" placement="left">
-        <span>
-          <img :src="themeSvg" :alt="i18nByKey('changeTheme')" />
-        </span>
+        <img :src="themeSvg" :alt="i18nByKey('changeTheme')" />
       </tiny-tooltip>
       <template #dropdown>
         <tiny-dropdown-menu :options="themeData">
@@ -244,6 +242,7 @@ export default defineComponent({
   border-radius: 100%;
   background-color: transparent;
   img {
+    margin-right: calc(-1 * var(--ti-dropdown-trigger-title-margin-right));
     display: block;
     width: 26px;
     height: 26px;