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 {