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

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/main.js

@@ -7,7 +7,7 @@ import 'prismjs/themes/prism.css'
 import 'uno.css'
 
 // highlight默认样式
-import 'highlight.js/styles/default.css'
+// import 'highlight.js/styles/default.css'
 
 // 只使用markdown的亮色主题
 import 'github-markdown-css/github-markdown.css'
@@ -17,7 +17,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/views/components-doc/components/demo.vue

@@ -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/docs/docs.vue

@@ -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/layout/layout.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
     }
   }