fix(site): official website adapts to the dark mode. (#2963)

* fix(site): 修复源码复制图标的颜色

* fix(site): 修复图标颜色

* fix(site): 修复回到顶部的颜色

* fix(tooltip): tooltip新增一个公共变量

* fix(site): 修复暗色模式

examples/sites/src/views/components-doc/components/contributor.vue

@@ -32,8 +32,7 @@ const contributors = computed(() => {
   .cmp-contributor-title {
     margin-bottom: 32px;
     font-size: 20px;
-    font-weight: Semibold;
-    color: #191919;
+    color: var(--tv-color-text);
   }
 
   .cmp-contributor-item {

examples/sites/src/views/components-doc/components/demo.vue

@@ -10,42 +10,29 @@
         <div class="ti-f-r ti-f-pos-between ti-f-box-end">
           <h2 class="demo-title">{{ demo.name[state.langKey] }}</h2>
           <div class="demo-options">
-            <tiny-tooltip
-              placement="top"
-              effect="light"
-              popper-class="docs-tooltip"
-              :append-to-body="false"
-              :content="state.copyTip"
-            >
-              <i
-                :class="state.copyIcon"
-                class="h:c-success ti-w16 ti-h16 ti-cur-hand"
-                @click="copyCode(demo)"
-                @mouseout="resetTip()"
-              />
-            </tiny-tooltip>
-            <tiny-tooltip
-              placement="top"
-              effect="light"
-              popper-class="docs-tooltip"
-              :append-to-body="false"
-              :content="demo.isOpen ? i18nByKey('hideCode') : i18nByKey('showCode')"
-            >
-              <i
-                :class="!!demo.isOpen ? 'i-ti-codeslash' : 'i-ti-code'"
-                class="ti-ml8 h:c-success ti-w16 ti-h16 ti-cur-hand"
-                @click="toggleDemoCode(demo)"
-              />
-            </tiny-tooltip>
-            <tiny-tooltip
-              placement="top"
-              effect="light"
-              popper-class="docs-tooltip"
-              :append-to-body="false"
-              :content="i18nByKey('playground')"
-            >
-              <i class="i-ti-playground ml8 h:c-success ti-w16 ti-h16 ti-cur-hand" @click="openPlayground(demo)" />
-            </tiny-tooltip>
+            <i
+              v-auto-tip="{ content: state.copyTip, effect: 'light', always: true }"
+              :class="state.copyIcon"
+              class="ti-w16 ti-h16 ti-cur-hand"
+              @click="copyCode(demo)"
+              @mouseout="resetTip()"
+            />
+            <i
+              v-auto-tip="{
+                content: demo.isOpen ? i18nByKey('hideCode') : i18nByKey('showCode'),
+                effect: 'light',
+                always: true
+              }"
+              :class="!!demo.isOpen ? 'i-ti-codeslash' : 'i-ti-code'"
+              class="ti-ml8 ti-w16 ti-h16 ti-cur-hand"
+              @click="toggleDemoCode(demo)"
+            />
+
+            <i
+              v-auto-tip="{ content: i18nByKey('playground'), effect: 'light', always: true }"
+              class="i-ti-playground ml8 ti-w16 ti-h16 ti-cur-hand"
+              @click="openPlayground(demo)"
+            />
           </div>
         </div>
         <component :is="getDescMd(demo)" class="demo-desc" />
@@ -85,7 +72,8 @@
 import { ref, reactive, computed, shallowRef, onMounted, onBeforeUnmount, watch, nextTick, inject, h } from 'vue'
 import { i18nByKey, getWord } from '@/i18n'
 import { $split, fetchDemosFile } from '@/tools'
-import { Tooltip as TinyTooltip, Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
+import { Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
+import { AutoTip as vAutoTip } from '@opentiny/vue-directive'
 import { languageMap, vueComponents, getWebdocPath, staticDemoPath } from '../cmp-config'
 import { router } from '@/router.js'
 import demoConfig from '@demos/config.js'
@@ -349,13 +337,15 @@ onBeforeUnmount(() => {
 
 :global(.dark .pc-demo-container.pc-demo-container) {
   background-color: #1a1a1a;
+  border: none;
 }
 .pc-demo-container {
   display: flex;
   flex-direction: column;
   color: var(--tv-color-text);
-  background: var(--tv-color-bg);
+  background: #fff;
   border-radius: 6px;
+  border: 1px solid #dcdfe6;
   padding: 26px 18px 42px;
 
   .pc-demo {
@@ -385,6 +375,13 @@ onBeforeUnmount(() => {
     position: absolute;
     right: 32px;
     bottom: 16px;
+
+    i {
+      color: var(--tv-color-text);
+      &:hover {
+        color: var(--tv-color-act-success-text-hover);
+      }
+    }
   }
 }
 

examples/sites/src/views/components-doc/components/float-settings.vue

@@ -292,12 +292,17 @@ export default defineComponent({
   cursor: pointer;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
 
+  .settings-icon {
+    color: var(--tv-color-icon);
+    fill: var(--tv-color-icon);
+  }
+
   &:hover {
     box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
 
     .settings-icon {
-      color: #191919;
-      fill: #191919;
+      color: var(--tv-color-icon-hover);
+      fill: var(--tv-color-icon-hover);
     }
   }
 
@@ -333,7 +338,7 @@ export default defineComponent({
         font-size: 14px;
         line-height: 32px;
         font-weight: 600;
-        color: #000000;
+        color: var(--tv-color-text);
       }
 
       .style-settings-options-group {
@@ -356,7 +361,10 @@ export default defineComponent({
 }
 .tiny-popover.tiny-popper.theme-settings-popover {
   border-radius: 12px;
-  background-color: #ffffff;
+  background-color: var(--tv-color-bg);
+}
+.dark .tiny-popover.tiny-popper.theme-settings-popover {
+  background-color: var(--tv-color-bg-dark);
 }
 
 .theme-settings-menu {

packages/theme/src/base/dark-theme.less

@@ -309,6 +309,7 @@
   --tv-color-text-control: var(--tv-base-color-common-4); // #B3B3B3 左侧导航默认文本色/主要图标按钮/主要图标+按钮
   --tv-color-text-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景
   --tv-color-text-inverse-tint: var(--tv-base-color-common-13); // #000 暗色反色成黑色：主要按钮文本色
+  --tv-color-text-inverse-black: var(--tv-base-color-common-13); // #000 tooltip的light文字
   --tv-color-text-active-1: var(--tv-base-color-common-1); // #fff 卡片式tab页签激活文本色
   --tv-color-text-active-2: var(--tv-base-color-info-7); // #317AF7  tree选中文本色
   --tv-color-text-active-3: var(--tv-base-color-common-2); // #E6E6E6 tab页签激活色

packages/theme/src/base/vars.less

@@ -300,6 +300,7 @@
   --tv-color-text-control: var(--tv-base-color-common-11); // #191919 左侧导航默认文本色/主要图标按钮/主要图标+按钮
   --tv-color-text-inverse: var(--tv-base-color-common-1); // #fff 亮色暗色都是白色场景
   --tv-color-text-inverse-tint: var(--tv-base-color-common-1); // #fff 暗色反色成黑色：主要按钮文本色
+  --tv-color-text-inverse-black:  var(--tv-base-color-common-11); // #191919 tooltip的light文字
   --tv-color-text-active-1: var(--tv-base-color-common-11); // #191919 卡片式tab页签激活文本色
   --tv-color-text-active-2: var(--tv-base-color-info-6); // #1476ff  tree选中文本色
   --tv-color-text-active-3: var(--tv-base-color-common-11); // #191919 tab页签激活色

packages/theme/src/tooltip/vars.less

@@ -63,7 +63,7 @@
   // light主题弹框背景色
   --tv-Tooltip-popper-light-bg-color: var(--tv-color-bg-inverse);
   // light主题|禁用弹框文本色
-  --tv-Tooltip-popper-light-text-color: var(--tv-color-text-inverse-tint);
+  --tv-Tooltip-popper-light-text-color: var(--tv-color-text-inverse-black);
   // light主题|禁用时弹框边框色
   --tv-Tooltip-popper-light-border-color: var(--tv-Tooltip-popper-light-bg-color);