fix(site): add html selector before .dark

Author: shenjunjian

examples/sites/src/assets/custom-block.less

@@ -84,7 +84,7 @@ body {
     --color-danger-title: #900;
   }
 }
-.dark {
+html.dark {
   .markdown-body {
     --color-tip-fg: #d3d5d6;
     --color-tip-bg: #24292f;

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

@@ -4,7 +4,7 @@
 }
 
 /* 以下为 github-markdown-css 包的预制颜色，根据暗色主题再修改 */
-.dark .markdown-body {
+html.dark .markdown-body {
   color-scheme: dark;
   --color-prettylights-syntax-comment: #8b949e;
   --color-prettylights-syntax-constant: #79c0ff;
@@ -99,22 +99,22 @@ body .markdown-body {
   text-shadow: none !important;
 }
 
-.dark.dark .markdown-body {
+html.dark.dark .markdown-body {
   background-color: #000;
 }
 
-.dark.dark .markdown-body pre {
+html.dark.dark .markdown-body pre {
   background-color: #1a1a1a;
 }
 
-.dark.dark .markdown-body code {
+html.dark.dark .markdown-body code {
   color: var(--tv-color-text);
 }
 
-.dark.dark .markdown-body code .token.operator {
+html.dark.dark .markdown-body code .token.operator {
   background-color: transparent;
 }
 
-.dark.dark .markdown-body code .hljs-string {
+html.dark.dark .markdown-body code .hljs-string {
   color: #6f42c1;
 }

examples/sites/src/views/components-doc/components/api-docs.vue

@@ -184,11 +184,7 @@ defineExpose({ jumpToApi })
   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 {
   overflow-x: auto;
   width: 100%;
@@ -231,3 +227,11 @@ defineExpose({ jumpToApi })
   }
 }
 </style>
+
+<style lang="less">
+html.dark .api-groupname-tag {
+  color: var(--tv-color-text-secondary);
+  background-color: var(--tv-color-bg-header);
+  border: none;
+}
+</style>

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

@@ -398,12 +398,12 @@ onBeforeUnmount(() => {
 </style>
 
 <style lang="less">
-.dark .pc-demo-container.pc-demo-container {
+html.dark .pc-demo-container.pc-demo-container {
   background-color: #1a1a1a;
   border: none;
 }
 
-.dark .demo-content.demo-content .demo-desc {
+html.dark .demo-content.demo-content .demo-desc {
   color: #b3b3b3;
 }
 </style>

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

@@ -275,7 +275,7 @@ export default defineComponent({
     margin-right: 0;
   }
 }
-.dark .settings-btn {
+html.dark .settings-btn {
   background-color: var(--tv-color-bg-dark);
 }
 
@@ -363,7 +363,7 @@ export default defineComponent({
   border-radius: 12px;
   background-color: var(--tv-color-bg);
 }
-.dark .tiny-popover.tiny-popper.theme-settings-popover {
+html.dark .tiny-popover.tiny-popper.theme-settings-popover {
   background-color: var(--tv-color-bg-dark);
 }
 

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

@@ -70,7 +70,7 @@ const mdContent = computed(() =>
 </style>
 
 <style lang="less">
-.dark .docs-header {
+html.dark .docs-header {
   background-color: #1a1a1a;
 
   .markdown-top-body {

examples/sites/src/views/layout/layout.vue

@@ -394,7 +394,7 @@ export default defineComponent({
   }
 }
 
-.dark #layoutSider {
+html.dark #layoutSider {
   border-right: 1px solid #1a1a1a; // 没有常用变量
 }
 

examples/sites/src/views/overview.vue

@@ -214,7 +214,7 @@ export default defineComponent({
   }
 }
 
-.dark .component-card {
+html.dark .component-card {
   &:hover {
     box-shadow: 1px 1px 6px 6px rgba(255, 255, 255, 0.08);
   }
@@ -229,7 +229,7 @@ export default defineComponent({
   width: 24.25%;
 }
 
-.dark .overview-card-container {
+html.dark .overview-card-container {
   background-color: var(--tv-color-bg-dark);
 }