fix(site): refactor the implementation mode of switch dark theme (#2995)

* fix(site): remove switch theme button

* fix(site): fix some wrong colors

* fix(site): add  { allowDarkTheme:true } to TDCommon

* fix(site): add mock button for switch theme

* fix(site): fix reviews

Author: shenjunjian

examples/sites/public/static/js/design-common.js

@@ -27,6 +27,7 @@ const headerHtml = `
       <span class="header-detail-name">TinyVue</span>
 
       <div class="nav-menus nav-menus-left"></div>
+      <button id="switchTheme" style="margin-left:150px">切换主题</button>
     </div>
   </div>
 </div>`
@@ -147,6 +148,10 @@ class DesignCommon {
     link.href = '/static/css/design-common.css'
     link.rel = 'stylesheet'
     document.head.append(link)
+
+    document.getElementById('switchTheme').addEventListener('click', () => {
+      document.querySelector('html').classList.toggle('dark')
+    })
   }
   renderFooter() {
     document.getElementById('footer').innerHTML = footerHtml

examples/sites/src/App.vue

@@ -31,6 +31,7 @@ export default defineComponent({
     onMounted(() => {
       // 加载header
       const common = new window.TDCommon(['#header'], {
+        allowDarkTheme: true,
         searchConfig: {
           show: true
         },

examples/sites/src/assets/custom-markdown.css

@@ -95,3 +95,26 @@ body .markdown-body {
   --color-attention-subtle: #fff8c5;
   --color-danger-fg: #cf222e;
 }
+.markdown-body code {
+  text-shadow: none !important;
+}
+
+.dark.dark .markdown-body {
+  background-color: #000;
+}
+
+.dark.dark .markdown-body pre {
+  background-color: #1a1a1a;
+}
+
+.dark.dark .markdown-body code {
+  color: var(--tv-color-text);
+
+  .token.operator {
+    background-color: transparent;
+  }
+
+  .hljs-string {
+    color: #6f42c1;
+  }
+}

examples/sites/src/assets/images/leftMenu/directives-custom-instruction.svg

@@ -6,9 +6,6 @@ import '@unocss/reset/eric-meyer.css'
 import 'prismjs/themes/prism.css'
 import 'uno.css'
 
-// highlight默认样式
-import 'highlight.js/styles/default.css'
-
 // 只使用markdown的亮色主题
 import 'github-markdown-css/github-markdown.css'
 import './assets/index.less'
@@ -17,7 +14,6 @@ import './style.css'
 // 覆盖默认的github markdown样式
 import './assets/custom-markdown.css'
 import './assets/custom-block.less'
-import './assets/markdown.less'
 import './assets/md-preview.less'
 
 import { i18n } from './i18n/index'

examples/sites/src/assets/markdown.less

@@ -162,7 +162,7 @@ watch(
 onMounted(() => {
   loadPage()
   // 加载公共尾部
-  const common = new window.TDCommon(['#footer'], {})
+  const common = new window.TDCommon(['#footer'], { allowDarkTheme: true })
   common.renderFooter()
   setScrollListener()
 })

examples/sites/src/main.js

@@ -335,10 +335,6 @@ onBeforeUnmount(() => {
   }
 }
 
-:global(.dark .pc-demo-container.pc-demo-container) {
-  background-color: #1a1a1a;
-  border: none;
-}
 .pc-demo-container {
   display: flex;
   flex-direction: column;
@@ -400,3 +396,14 @@ onBeforeUnmount(() => {
   padding: 20px 5px;
 }
 </style>
+
+<style lang="less">
+.dark .pc-demo-container.pc-demo-container {
+  background-color: #1a1a1a;
+  border: none;
+}
+
+.dark .demo-content.demo-content .demo-desc {
+  color: #b3b3b3;
+}
+</style>

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

@@ -48,7 +48,7 @@ watch([() => router.currentRoute.value, () => router.currentRoute.value.params.d
 
 onMounted(() => {
   loadPage()
-  const common = new window.TDCommon(['#footer'], {})
+  const common = new window.TDCommon(['#footer'], { allowDarkTheme: true })
   common.renderFooter()
 })
 </script>
@@ -67,23 +67,6 @@ onMounted(() => {
   }
 }
 
-.dark .docs-container .markdown-body {
-  background-color: #000;
-}
-
-.dark .docs-container .markdown-body pre {
-  background-color: #1a1a1a;
-}
-
-.dark .docs-container .markdown-body code {
-  text-shadow: none;
-  color: var(--tv-color-text);
-
-  .token.operator {
-    background-color: transparent;
-  }
-}
-
 .docs-page-anchor {
   .tiny-anchor__affix {
     overflow-y: auto;

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

@@ -2,9 +2,6 @@
   <div class="main-layout ti-hp100 ti-f-c ti-f-box-stretch">
     <div class="content-layout ti-fi-1" :has-sider="!isFrame">
       <div id="layoutSider" class="layout-sider" :class="{ 'saas-border': templateModeState.isSaas }" v-if="!isFrame">
-        <div style="padding: 10px 0; text-align: center">
-          <tiny-button :reset-time="0" type="info" @click="toggleDark()">{{ isDark ? 'dark' : 'light' }}</tiny-button>
-        </div>
         <tiny-tree-menu
           ref="treeMenuRef"
           class="main-menu"
@@ -68,7 +65,6 @@ import { getWord, i18nByKey, appData, appFn, useApiMode, useTemplateMode } from
 import useTheme from '@/tools/useTheme'
 import FloatSettings from '@/views/components-doc/components/float-settings.vue'
 import VersionTip from '@/views/components-doc/components/version-tip.vue'
-import { useDark, useToggle } from '@vueuse/core'
 
 export default defineComponent({
   name: 'LayoutVue',
@@ -107,8 +103,6 @@ export default defineComponent({
     const getTo = (route, key) => `${import.meta.env.VITE_CONTEXT}${allPath}${lang}/${theme}/${route}${key}`
 
     const isThemeSaas = import.meta.env.VITE_TINY_THEME === 'saas'
-    const isDark = useDark()
-    const toggleDark = useToggle(isDark)
 
     const changeLanguage = () => {
       appFn.toggleLang()
@@ -197,8 +191,6 @@ export default defineComponent({
       getWord,
       i18nByKey,
       isThemeSaas,
-      isDark,
-      toggleDark,
       isShowFilter
     }
   }