opentiny · zzcr · Feb 25, 2025 · Feb 25, 2025 · Feb 25, 2025 · Feb 25, 2025
diff --git a/examples/sites/src/assets/custom-block.less b/examples/sites/src/assets/custom-block.less
@@ -61,7 +61,7 @@
 }
 
 // 以下是提示块的样式
-.theme-light {
+body {
   .markdown-body {
     --color-tip-bg: #f3f5f7;
     --color-tip-fg: #24292f;
@@ -84,7 +84,7 @@
     --color-danger-title: #900;
   }
 }
-.theme-dark {
+.dark {
   .markdown-body {
     --color-tip-fg: #d3d5d6;
     --color-tip-bg: #24292f;

diff --git a/examples/sites/src/assets/custom-markdown.css b/examples/sites/src/assets/custom-markdown.css
@@ -2,7 +2,9 @@
 .markdown-body hr + h2 {
   display: none;
 }
-.theme-dark .markdown-body {
+
+/* 以下为 github-markdown-css 包的预制颜色，根据暗色主题再修改 */
+.dark .markdown-body {
   color-scheme: dark;
   --color-prettylights-syntax-comment: #8b949e;
   --color-prettylights-syntax-constant: #79c0ff;
@@ -37,7 +39,7 @@
   --color-fg-default: #c9d1d9;
   --color-fg-muted: #8b949e;
   --color-fg-subtle: #484f58;
-  --color-canvas-default: #0d1117;
+  --color-canvas-default: #1a1a1a;
   --color-canvas-subtle: #161b22;
   --color-border-default: #30363d;
   --color-border-muted: #21262d;
@@ -47,7 +49,8 @@
   --color-attention-subtle: rgba(187, 128, 9, 0.15);
   --color-danger-fg: #f85149;
 }
-.theme-light .markdown-body {
+
+body .markdown-body {
   color-scheme: light;
   --color-prettylights-syntax-comment: #6e7781;
   --color-prettylights-syntax-constant: #0550ae;

diff --git a/examples/sites/src/assets/index.less b/examples/sites/src/assets/index.less
@@ -10,11 +10,6 @@ body {
   box-sizing: border-box;
 }
 
-.theme-dark {
-  --lightless: #3d3d3d; // 非常浅的
-  --border-color: #6b6a6a;
-}
-
 [draggable='true'] {
   user-select: none;
 }
diff --git a/examples/sites/src/main.js b/examples/sites/src/main.js
@@ -10,7 +10,7 @@ import 'uno.css'
 import 'highlight.js/styles/default.css'
 
 // 只使用markdown的亮色主题
-import 'github-markdown-css/github-markdown-light.css'
+import 'github-markdown-css/github-markdown.css'
 import './assets/index.less'
 import './style.css'
 

diff --git a/examples/sites/src/style.css b/examples/sites/src/style.css
@@ -1,7 +1,14 @@
 /* saas 官网的尺寸单位是rem */
 html {
   font-size: 16px;
-}
+ }
+
+ #app{
+  background-color: #fff;
+ }
+ .dark #app{
+  background-color: #000;
+ }
 
 /* reset.css 引入后造成site官网中 b 和 strong 标签没有粗体，此处还原粗体  */
 b,

diff --git a/examples/sites/src/tools/appData.js b/examples/sites/src/tools/appData.js
@@ -1,4 +1,4 @@
-import { reactive, computed, watchEffect } from 'vue'
+import { reactive, computed } from 'vue'
 import { useAutoStore } from './storage'
 import { useMediaQuery } from './useMediaQuery'
 import { ZH_CN_LANG, EN_US_LANG, LANG_KEY, LANG_PATH_MAP } from '../const'
@@ -25,11 +25,6 @@ const appFn = {
     appData.theme = appData.theme === 'light' ? 'dark' : 'light'
   }
 }
-// 减少页面处理
-watchEffect(() => {
-  document.body.classList.remove('theme-light', 'theme-dark')
-  document.body.classList.add('theme-' + appData.theme)
-})
 // 为了和tiny-vue共享同一个响应变量
 window.appData = appData
 export { appData, appFn, isZhCn }
diff --git a/examples/sites/src/views/components-doc/components/api-docs.vue b/examples/sites/src/views/components-doc/components/api-docs.vue
@@ -4,16 +4,16 @@
       <!-- apis 是一个数组 {name,type,properties:[原table内容],events:[] ...........} -->
       <div class="mt20 wp100" v-for="oneGroup in props.currentJson.apis" :key="oneGroup.name">
         <div class="ti-f-r ti-f-pos-start ti-fw-bold">
-          <h2 :id="`cmp-${oneGroup.name}`" class="ti-f18">
+          <h2 :id="`cmp-${oneGroup.name}`" class="api-groupname ti-f18">
             {{ oneGroup.name }}
           </h2>
-          <div class="ti-ml12 ti-b-a-primary ti-c-primary ti-px8 ti-py4">
+          <div class="api-groupname-tag ti-ml12 ti-px8 ti-py4">
             {{ oneGroup.type }}
           </div>
         </div>
         <div v-for="(oneApiArr, key) in oneGroup" :key="key">
           <template v-if="!['name', 'type'].includes(key) && oneApiArr.length > 0">
-            <h3 class="ti-f18 ti-py28" :id="`${oneGroup.name}--${key}`">
+            <h3 class="ti-f18 ti-py28 api-groupname-key" :id="`${oneGroup.name}--${key}`">
               {{ key }}
             </h3>
             <div class="api-table-box">
@@ -173,9 +173,23 @@ defineExpose({ jumpToApi })
   flex-direction: column;
 }
 
+.api-groupname {
+  color: var(--tv-color-text);
+}
+.api-groupname-key {
+  color: var(--tv-color-text-secondary);
+}
+
+.api-groupname-tag {
+  color: var(--primary);
+  border: 1px solid var(--primary);
+}
+.dark .api-groupname-tag {
+  color: var(--tv-color-text-secondary);
+  background-color: var(--tv-color-bg-header);
+  border: none;
+}
 .api-table-box {
-  border-left: 1px solid rgb(239, 239, 245);
-  border-right: 1px solid rgb(239, 239, 245);
   overflow-x: auto;
   width: 100%;
 }
@@ -215,7 +229,8 @@ defineExpose({ jumpToApi })
     padding: 4px 8px;
     margin: 0 4px;
     font-size: 0.85em;
-    background-color: rgba(27, 31, 35, 0.05);
+    color: var(--tv-color-text-secondary);
+    background-color: var(--tv-color-bg-header);
     border-radius: 3px;
   }
 }

diff --git a/examples/sites/src/views/components-doc/components/demo.vue b/examples/sites/src/views/components-doc/components/demo.vue
@@ -48,7 +48,7 @@
             </tiny-tooltip>
           </div>
         </div>
-        <component :is="getDescMd(demo)" class="demo-desc markdown-body" />
+        <component :is="getDescMd(demo)" class="demo-desc" />
 
         <div v-if="isMobileFirst" class="pc-demo-container">
           <tiny-button @click="openPlayground(demo, false)">多端预览</tiny-button>
@@ -303,7 +303,7 @@ onBeforeUnmount(() => {
     padding: 4px 8px;
     margin: 0 4px;
     font-size: 0.85em;
-    background-color: rgba(27, 31, 35, 0.05);
+    background-color: var(--tv-color-bg-header);
     border-radius: 3px;
   }
 
@@ -320,14 +320,6 @@ onBeforeUnmount(() => {
   }
 }
 
-.theme-dark {
-  .demo-desc {
-    code {
-      background: #333333;
-    }
-  }
-}
-
 .b-a-success {
   animation: border-trans 3s;
 }
@@ -354,17 +346,16 @@ onBeforeUnmount(() => {
     overflow: auto;
   }
 }
-// 暗黑主题
-:global(html.dark .pc-demo-container) {
-  background: #000;
-}
 
+:global(.dark .pc-demo-container.pc-demo-container) {
+  background-color: #1a1a1a;
+}
 .pc-demo-container {
   display: flex;
   flex-direction: column;
-  background: #fff;
+  color: var(--tv-color-text);
+  background: var(--tv-color-bg);
   border-radius: 6px;
-  border: 1px solid #dcdfe6;
   padding: 26px 18px 42px;
 
   .pc-demo {
@@ -378,7 +369,7 @@ onBeforeUnmount(() => {
 
   .demo-title {
     font-size: 20px;
-    color: #191919;
+    color: var(--tv-color-text);
     font-weight: bold;
   }
 

diff --git a/examples/sites/src/views/components-doc/components/float-settings.vue b/examples/sites/src/views/components-doc/components/float-settings.vue
@@ -274,43 +274,46 @@ export default defineComponent({
     line-height: 1;
     margin-right: 0;
   }
+}
+.dark .settings-btn {
+  background-color: var(--tv-color-bg-dark);
+}
 
-  .settings-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    margin-bottom: 8px;
-    border: 1px solid #f0f0f0;
-    border-radius: 12px;
-    background-color: #fff;
-    cursor: pointer;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
-
-    &:hover {
-      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
-
-      .settings-icon {
-        color: #191919;
-        fill: #191919;
-      }
-    }
-
-    &.style-settings-btn {
-      margin-bottom: 24px;
-    }
+.settings-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  margin-bottom: 8px;
+  border: 1px solid var(--tv-color-border);
+  border-radius: 12px;
+  background-color: #fff;
+  cursor: pointer;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
 
-    &.back-top-btn {
-      margin-bottom: 0;
-    }
+  &:hover {
+    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
 
     .settings-icon {
-      width: 16px;
-      height: 16px;
-      color: #595959;
+      color: #191919;
+      fill: #191919;
     }
   }
+
+  &.style-settings-btn {
+    margin-bottom: 24px;
+  }
+
+  &.back-top-btn {
+    margin-bottom: 0;
+  }
+
+  .settings-icon {
+    width: 16px;
+    height: 16px;
+    color: #595959;
+  }
 }
 
 .opt-menu {

diff --git a/examples/sites/src/views/components-doc/components/header.vue b/examples/sites/src/views/components-doc/components/header.vue
@@ -33,6 +33,9 @@ const mdContent = computed(() =>
 </script>
 
 <style scoped lang="less">
+.dark .docs-header {
+  background-color: #1a1a1a;
+}
 .docs-header {
   padding: 16px 40px;
   min-height: 102px;

diff --git a/examples/sites/src/views/docs/docs.vue b/examples/sites/src/views/docs/docs.vue
@@ -67,6 +67,19 @@ onMounted(() => {
   }
 }
 
+.dark .docs-container .markdown-body {
+  background-color: #000;
+}
+
+.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;

diff --git a/examples/sites/src/views/layout/layout.vue b/examples/sites/src/views/layout/layout.vue
@@ -402,8 +402,11 @@ export default defineComponent({
   }
 }
 
+.dark #layoutSider {
+  border-right: 1px solid #1a1a1a; // 没有常用变量
+}
+
 #layoutSider {
-  background: #fff;
   height: calc(100vh - 60px);
   border-right: 1px solid #f0f0f0;