fix(site): document search box adapts to the dark theme. (#3046)

* fix(site): docsearch的暗黑适配

* fix(chart): fix charts-docs in dark mode

* 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/style.css

@@ -74,6 +74,26 @@ strong {
   color: #969faf;
 }
 
+/** docsearch 的暗黑模式 */
+html.dark {
+  --docsearch-text-color: #f5f6f7;
+  --docsearch-container-background: rgba(9, 10, 17, 0.8);
+  --docsearch-modal-background: #15172a;
+  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+  --docsearch-searchbox-background: #090a11;
+  --docsearch-searchbox-focus-background: #000;
+  --docsearch-hit-color: #bec3c9;
+  --docsearch-hit-shadow: none;
+  --docsearch-hit-background: #090a11;
+  --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
+  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, 0.3);
+  --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 1px 1px 0 #0304094d;
+  --docsearch-footer-background: #1e2136;
+  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
+  --docsearch-logo-color: #fff;
+  --docsearch-muted-color: #7f8497;
+}
+
 :root {
   --docsearch-primary-color: #1476ff;
   --docsearch-searchbox-background: #f5f5f5;

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

@@ -513,6 +513,7 @@ defineExpose({ loadPage })
   justify-content: space-between;
   align-items: flex-start;
   column-gap: 16px;
+  overflow: auto;
 }
 
 .cmp-container {

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);
 }
 

packages/theme/src/checkbox/vars.less

@@ -46,5 +46,5 @@
   // 复选框选中禁用背景色
   --tv-Checkbox-checked-disabled-bg-color: var(--tv-color-icon-checked-disabled);
   // 复选框选中禁用边框色
-  --tv-Checkbox-checked-disabled-border-color: var(--tv-color-bg-disabled-control-unactive)
+  --tv-Checkbox-checked-disabled-border-color: var(--tv-color-bg-disabled-control-unactive);
 }