diff --git a/packages/vant-cli/site/common/style/base.less b/packages/vant-cli/site/common/style/base.less
index dec735122..56acccccd 100644
--- a/packages/vant-cli/site/common/style/base.less
+++ b/packages/vant-cli/site/common/style/base.less
@@ -1,19 +1,91 @@
-@import './var';
@import './font.less';
body {
min-width: 1100px;
margin: 0;
overflow-x: auto;
- color: @van-doc-black;
+ color: var(--van-doc-text-color-2);
font-size: 16px;
font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui',
'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
- background-color: @van-doc-background-color;
+ background-color: var(--van-doc-background);
-webkit-font-smoothing: antialiased;
}
+:root {
+ // Colors
+ --van-doc-black: #000;
+ --van-doc-white: #fff;
+ --van-doc-gray-1: #f7f8fa;
+ --van-doc-gray-2: #f2f3f5;
+ --van-doc-gray-3: #ebedf0;
+ --van-doc-gray-4: #dcdee0;
+ --van-doc-gray-5: #c8c9cc;
+ --van-doc-gray-6: #969799;
+ --van-doc-gray-7: #646566;
+ --van-doc-gray-8: #323233;
+ --van-doc-blue: #1989fa;
+ --van-doc-green: #07c160;
+
+ // Sizes
+ --van-doc-padding: 24px;
+ --van-doc-row-max-width: 1680px;
+ --van-doc-nav-width: 220px;
+ --van-doc-border-radius: 20px;
+ --van-doc-simulator-width: 360px;
+ --van-doc-simulator-height: 620px;
+ --van-doc-header-top-height: 64px;
+}
+
+.van-doc-theme-light {
+ // text
+ --van-doc-text-color-1: var(--van-doc-black);
+ --van-doc-text-color-2: var(--van-doc-gray-8);
+ --van-doc-text-color-3: #34495e;
+ --van-doc-link-color: var(--van-doc-blue);
+
+ // background
+ --van-doc-background: #f7f8fa;
+ --van-doc-background-light: var(--van-doc-white);
+ --van-doc-header-background: #011f3c;
+ --van-doc-border-color: var(--van-doc-gray-2);
+ --van-doc-shadow-color: var(--van-doc-gray-3);
+
+ // code
+ --van-doc-code-color: #58727e;
+ --van-doc-code-comment-color: var(--van-doc-gray-6);
+ --van-doc-code-background: var(--van-doc-gray-1);
+
+ // blockquote
+ --van-doc-blockquote-color: #4994df;
+ --van-doc-blockquote-background: #ecf9ff;
+}
+
+.van-doc-theme-dark {
+ // text
+ --van-doc-text-color-1: var(--van-doc-white);
+ --van-doc-text-color-2: rgba(255, 255, 255, 0.9);
+ --van-doc-text-color-3: rgba(255, 255, 255, 0.75);
+ --van-doc-link-color: #1bb5fe;
+
+ // background
+ --van-doc-background: var(--van-doc-black);
+ --van-doc-background-light: rgba(255, 255, 255, 0.12);
+ --van-doc-header-background: #011428;
+ --van-doc-border-color: #3a3a3c;
+ --van-doc-shadow-color: transparent;
+
+ // code
+ --van-doc-code-color: rgba(200, 200, 200, 0.85);
+ --van-doc-code-comment-color: var(--van-doc-gray-7);
+ --van-doc-code-background: rgba(0, 0, 0, 0.5);
+
+ // blockquote
+ --van-doc-blockquote-color: #bae6fd;
+ --van-doc-blockquote-background: rgba(7, 89, 133, 0.25);
+}
+
p {
margin: 0;
}
@@ -42,8 +114,8 @@ a {
.van-doc-row {
width: 100%;
- @media (min-width: @van-doc-row-max-width) {
- width: @van-doc-row-max-width;
+ @media (min-width: var(--van-doc-row-max-width)) {
+ width: var(--van-doc-row-max-width);
margin: 0 auto;
}
}
diff --git a/packages/vant-cli/site/common/style/highlight.less b/packages/vant-cli/site/common/style/highlight.less
index fd6551029..380e53daf 100644
--- a/packages/vant-cli/site/common/style/highlight.less
+++ b/packages/vant-cli/site/common/style/highlight.less
@@ -1,20 +1,18 @@
-@import './var';
-
code {
position: relative;
display: block;
padding: 16px 20px;
overflow-x: auto;
- color: @van-doc-code-color;
+ color: var(--van-doc-code-color);
font-weight: 400;
font-size: 14px;
- font-family: @van-doc-code-font-family;
+ font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
line-height: 26px;
white-space: pre-wrap;
word-wrap: break-word;
-webkit-font-smoothing: auto;
- background-color: #f8f8f8;
- border-radius: @van-doc-border-radius;
+ background-color: var(--van-doc-code-background);
+ border-radius: var(--van-doc-border-radius);
}
pre {
@@ -33,7 +31,7 @@ pre {
}
.hljs-subst {
- color: @van-doc-code-color;
+ color: var(--van-doc-code-color);
}
.hljs-string,
@@ -42,18 +40,18 @@ pre {
.hljs-template-tag,
.hljs-template-variable,
.hljs-addition {
- color: @van-doc-green;
+ color: var(--van-doc-green);
}
.hljs-comment,
.hljs-quote {
- color: #999;
+ color: var(--van-doc-code-comment-color);
}
.hljs-params,
.hljs-keyword,
.hljs-attribute {
- color: @van-doc-purple;
+ color: var(--van-doc-purple);
}
.hljs-deletion,
diff --git a/packages/vant-cli/site/common/style/var.less b/packages/vant-cli/site/common/style/var.less
deleted file mode 100644
index d80cd6329..000000000
--- a/packages/vant-cli/site/common/style/var.less
+++ /dev/null
@@ -1,27 +0,0 @@
-@van-doc-black: #323233;
-@van-doc-blue: #1989fa;
-@van-doc-purple: #8080ff;
-@van-doc-fuchsia: #a7419e;
-@van-doc-green: #4fc08d;
-@van-doc-text-color: #34495e;
-@van-doc-text-light-blue: rgba(69, 90, 100, 0.6);
-@van-doc-background-color: #f7f8fa;
-@van-doc-grey: #999;
-@van-doc-dark-grey: #666;
-@van-doc-light-grey: #ccc;
-@van-doc-border-color: #f1f4f8;
-@van-doc-code-color: #58727e;
-@van-doc-code-background-color: #f1f4f8;
-@van-doc-code-font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
-@van-doc-padding: 24px;
-@van-doc-row-max-width: 1680px;
-@van-doc-nav-width: 220px;
-@van-doc-border-radius: 20px;
-
-// header
-@van-doc-header-top-height: 64px;
-@van-doc-header-bottom-height: 50px;
-
-// simulator
-@van-doc-simulator-width: 360px;
-@van-doc-simulator-height: 620px;
diff --git a/packages/vant-cli/site/desktop/App.vue b/packages/vant-cli/site/desktop/App.vue
index 15592bc90..d513fb73f 100644
--- a/packages/vant-cli/site/desktop/App.vue
+++ b/packages/vant-cli/site/desktop/App.vue
@@ -8,6 +8,7 @@
:simulator="simulator"
:has-simulator="hasSimulator"
:lang-configs="langConfigs"
+ :support-dark-mode="supportDarkMode"
>
@@ -27,6 +28,7 @@ export default {
data() {
return {
hasSimulator: true,
+ supportDarkMode: config.site.supportDarkMode,
};
},
diff --git a/packages/vant-cli/site/desktop/components/Container.vue b/packages/vant-cli/site/desktop/components/Container.vue
index bc82f301b..e2aed5b4a 100644
--- a/packages/vant-cli/site/desktop/components/Container.vue
+++ b/packages/vant-cli/site/desktop/components/Container.vue
@@ -18,18 +18,18 @@ export default {
diff --git a/packages/vant-cli/site/mobile/App.vue b/packages/vant-cli/site/mobile/App.vue
index 4048572dc..243223214 100644
--- a/packages/vant-cli/site/mobile/App.vue
+++ b/packages/vant-cli/site/mobile/App.vue
@@ -18,7 +18,6 @@ export default {