blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-22 14:39:16 +08:00
Code Issues Projects Releases Wiki Activity

feat(@vant/cli): desktop site support dark mode

Browse Source
This commit is contained in:
chenjiahan 2022-01-25 20:03:05 +08:00
parent f9573402a7
commit 35a990ed65
17 changed files with 184 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
packages/vant-cli/site/common/style/base.less
View File

@ -1,19 +1,91 @@
@import './var';
@import './font.less'; @import './font.less';
body { body {
min-width: 1100px; min-width: 1100px;
margin: 0; margin: 0;
overflow-x: auto; overflow-x: auto;
color: @van-doc-black; color: var(--van-doc-text-color-2);
font-size: 16px; font-size: 16px;
font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui',
'Hiragino Sans GB', 'Microsoft Yahei', sans-serif; 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
background-color: @van-doc-background-color; background-color: var(--van-doc-background);
-webkit-font-smoothing: antialiased; -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 { p {
margin: 0; margin: 0;
} }
@ -42,8 +114,8 @@ a {
.van-doc-row { .van-doc-row {
width: 100%; width: 100%;
@media (min-width: @van-doc-row-max-width) { @media (min-width: var(--van-doc-row-max-width)) {
width: @van-doc-row-max-width; width: var(--van-doc-row-max-width);
margin: 0 auto; margin: 0 auto;
} }
} }

18
packages/vant-cli/site/common/style/highlight.less
View File

@ -1,20 +1,18 @@
@import './var';
code { code {
position: relative; position: relative;
display: block; display: block;
padding: 16px 20px; padding: 16px 20px;
overflow-x: auto; overflow-x: auto;
color: @van-doc-code-color; color: var(--van-doc-code-color);
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
font-family: @van-doc-code-font-family; font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
line-height: 26px; line-height: 26px;
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
-webkit-font-smoothing: auto; -webkit-font-smoothing: auto;
background-color: #f8f8f8; background-color: var(--van-doc-code-background);
border-radius: @van-doc-border-radius; border-radius: var(--van-doc-border-radius);
} }
pre { pre {
@ -33,7 +31,7 @@ pre {
} }
.hljs-subst { .hljs-subst {
color: @van-doc-code-color; color: var(--van-doc-code-color);
} }
.hljs-string, .hljs-string,
@ -42,18 +40,18 @@ pre {
.hljs-template-tag, .hljs-template-tag,
.hljs-template-variable, .hljs-template-variable,
.hljs-addition { .hljs-addition {
color: @van-doc-green; color: var(--van-doc-green);
} }
.hljs-comment, .hljs-comment,
.hljs-quote { .hljs-quote {
color: #999; color: var(--van-doc-code-comment-color);
} }
.hljs-params, .hljs-params,
.hljs-keyword, .hljs-keyword,
.hljs-attribute { .hljs-attribute {
color: @van-doc-purple; color: var(--van-doc-purple);
} }
.hljs-deletion, .hljs-deletion,

27
packages/vant-cli/site/common/style/var.less
View File

@ -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;

2
packages/vant-cli/site/desktop/App.vue
View File

@ -8,6 +8,7 @@
:simulator="simulator" :simulator="simulator"
:has-simulator="hasSimulator" :has-simulator="hasSimulator"
:lang-configs="langConfigs" :lang-configs="langConfigs"
:support-dark-mode="supportDarkMode"
> >
<router-view /> <router-view />
</van-doc> </van-doc>
@ -27,6 +28,7 @@ export default {
data() { data() {
return { return {
hasSimulator: true, hasSimulator: true,
supportDarkMode: config.site.supportDarkMode,
}; };
}, },

10
packages/vant-cli/site/desktop/components/Container.vue
View File

@ -18,18 +18,18 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import '../../common/style/var';
.van-doc-container { .van-doc-container {
box-sizing: border-box; box-sizing: border-box;
padding-left: @van-doc-nav-width; padding-left: var(--van-doc-nav-width);
overflow: hidden; overflow: hidden;
&--with-simulator { &--with-simulator {
padding-right: @van-doc-simulator-width + @van-doc-padding; padding-right: calc(
var(--van-doc-simulator-width) + var(--van-doc-padding)
);
@media (max-width: 1100px) { @media (max-width: 1100px) {
padding-right: @van-doc-simulator-width - 8px; padding-right: calc(var(--van-doc-simulator-width) - 8px);
} }
} }
} }

48
packages/vant-cli/site/desktop/components/Content.vue
View File

@ -41,29 +41,27 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import '../../common/style/var';
.van-doc-card { .van-doc-card {
margin-bottom: 24px; margin-bottom: 24px;
padding: 24px; padding: 24px;
background-color: #fff; background-color: var(--van-doc-background-light);
border-radius: @van-doc-border-radius; border-radius: var(--van-doc-border-radius);
box-shadow: 0 8px 12px #ebedf0; box-shadow: 0 8px 12px var(--van-doc-shadow-color);
> p a, > p a,
> ul a, > ul a,
> table a, > table a,
> blockquote a { > blockquote a {
margin: 0 1px; margin: 0 1px;
color: @van-doc-blue; color: var(--van-doc-link-color);
-webkit-font-smoothing: auto; -webkit-font-smoothing: auto;
&:hover { &:hover {
color: darken(@van-doc-blue, 10%); opacity: 0.8;
} }
&:active { &:active {
color: darken(@van-doc-blue, 20%); opacity: 0.6;
} }
} }
@ -71,7 +69,6 @@ export default {
> h4, > h4,
> h5, > h5,
> h6 { > h6 {
color: @van-doc-black;
font-weight: normal; font-weight: normal;
line-height: 1.6; line-height: 1.6;
@ -100,23 +97,19 @@ export default {
> p { > p {
margin-top: 8px; margin-top: 8px;
} color: var(--van-doc-text-color-3);
> p,
> blockquote p {
color: @van-doc-text-color;
font-size: 15px; font-size: 15px;
line-height: 26px; line-height: 26px;
strong { strong {
color: black; color: var(--van-doc-text-color-1);
} }
} }
> table { > table {
width: 100%; width: 100%;
margin-top: 12px; margin-top: 12px;
color: @van-doc-text-color; color: var(--van-doc-text-color-3);
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 1.5;
border-collapse: collapse; border-collapse: collapse;
@ -137,7 +130,7 @@ export default {
td { td {
padding: 8px; padding: 8px;
border-top: 1px solid @van-doc-code-background-color; border-top: 1px solid var(--van-doc-border-color);
&:first-child { &:first-child {
padding-left: 0; padding-left: 0;
@ -146,10 +139,10 @@ export default {
code { code {
margin: 0; margin: 0;
padding: 2px 6px; padding: 2px 6px;
color: @van-doc-blue; color: var(--van-doc-blue);
font-weight: 600; font-weight: 600;
font-size: 11px; font-size: 11px;
background-color: fade(@van-doc-blue, 10%); background-color: rgba(25, 137, 250, 0.15);
border-radius: 20px; border-radius: 20px;
} }
} }
@ -161,9 +154,9 @@ export default {
em { em {
display: inline-block; display: inline-block;
color: @van-doc-green; color: var(--van-doc-green);
font-size: 14px; font-size: 14px;
font-family: @van-doc-code-font-family; font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
font-style: normal; font-style: normal;
max-width: 300px; max-width: 300px;
-webkit-font-smoothing: auto; -webkit-font-smoothing: auto;
@ -179,7 +172,7 @@ export default {
position: relative; position: relative;
margin: 5px 0 5px 10px; margin: 5px 0 5px 10px;
padding-left: 15px; padding-left: 15px;
color: @van-doc-text-color; color: var(--van-doc-text-color-3);
font-size: 15px; font-size: 15px;
line-height: 26px; line-height: 26px;
@ -191,7 +184,7 @@ export default {
width: 6px; width: 6px;
height: 6px; height: 6px;
margin-top: 10px; margin-top: 10px;
border: 1px solid @van-doc-dark-grey; border: 1px solid currentColor;
border-radius: 50%; border-radius: 50%;
content: ''; content: '';
} }
@ -221,15 +214,17 @@ export default {
> blockquote { > blockquote {
margin: 16px 0 0; margin: 16px 0 0;
padding: 16px; padding: 16px;
background-color: #ecf9ff; font-size: 14px;
border-radius: @van-doc-border-radius; color: var(--van-doc-blockquote-color);
background-color: var(--van-doc-blockquote-background);
border-radius: var(--van-doc-border-radius);
} }
> img, > img,
> p img { > p img {
width: 100%; width: 100%;
margin: 16px 0; margin: 16px 0;
border-radius: @van-doc-border-radius; border-radius: var(--van-doc-border-radius);
} }
} }
@ -244,7 +239,6 @@ export default {
h1, h1,
h2 { h2 {
color: @van-doc-black;
font-weight: normal; font-weight: normal;
line-height: 1.5; line-height: 1.5;

50
packages/vant-cli/site/desktop/components/Header.vue
View File

@ -21,6 +21,16 @@
</a> </a>
</li> </li>
<li v-if="supportDarkMode" class="van-doc-header__top-nav-item">
<a
class="van-doc-header__link"
target="_blank"
@click="toggleTheme"
>
<img :src="themeImg" />
</a>
</li>
<li <li
ref="version" ref="version"
v-if="versions" v-if="versions"
@ -79,10 +89,12 @@ export default {
config: Object, config: Object,
versions: Array, versions: Array,
langConfigs: Array, langConfigs: Array,
supportDarkMode: Boolean,
}, },
data() { data() {
return { return {
currentTheme: this.getDefaultTheme(),
packageVersion, packageVersion,
showVersionPop: false, showVersionPop: false,
}; };
@ -109,9 +121,35 @@ export default {
searchConfig() { searchConfig() {
return this.config.searchConfig; return this.config.searchConfig;
}, },
themeImg() {
if (this.currentTheme === 'light') {
return 'https://b.yzcdn.cn/vant/dark-theme.svg';
}
return 'https://b.yzcdn.cn/vant/light-theme.svg';
},
},
watch: {
currentTheme: {
handler(newVal, oldVal) {
window.localStorage.setItem('vantTheme', newVal);
document.body.classList.remove(`van-doc-theme-${oldVal}`);
document.body.classList.add(`van-doc-theme-${newVal}`);
},
immediate: true,
},
}, },
methods: { methods: {
getDefaultTheme() {
return window.localStorage.getItem('vantTheme') || 'light';
},
toggleTheme() {
this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
},
toggleVersionPop() { toggleVersionPop() {
const val = !this.showVersionPop; const val = !this.showVersionPop;
@ -144,18 +182,16 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import '../../common/style/var';
.van-doc-header { .van-doc-header {
width: 100%; width: 100%;
background-color: #001938; background-color: var(--van-doc-header-background);
user-select: none; user-select: none;
&__top { &__top {
display: flex; display: flex;
align-items: center; align-items: center;
height: @van-doc-header-top-height; height: var(--van-doc-header-top-height);
padding: 0 @van-doc-padding; padding: 0 var(--van-doc-padding);
&-nav { &-nav {
flex: 1; flex: 1;
@ -231,7 +267,7 @@ export default {
transition: 0.2s; transition: 0.2s;
&:hover { &:hover {
color: @van-doc-blue; color: var(--van-doc-link-color);
background-color: #f7f8fa; background-color: #f7f8fa;
} }
} }
@ -259,6 +295,8 @@ export default {
} }
&__link { &__link {
cursor: pointer;
span { span {
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;

28
packages/vant-cli/site/desktop/components/Nav.vue
View File

@ -71,22 +71,20 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import '../../common/style/var';
.van-doc-nav { .van-doc-nav {
position: fixed; position: fixed;
left: 0; left: 0;
z-index: 1; z-index: 1;
min-width: @van-doc-nav-width; min-width: var(--van-doc-nav-width);
max-width: @van-doc-nav-width; max-width: var(--van-doc-nav-width);
padding: @van-doc-padding 0; padding: 8px 0;
overflow-y: scroll; overflow-y: scroll;
background-color: #fff; background-color: var(--van-doc-background-light);
box-shadow: 0 8px 12px #ebedf0; box-shadow: 0 8px 12px var(--van-doc-shadow-color);
@media (min-width: @van-doc-row-max-width) { @media (min-width: var(--van-doc-row-max-width)) {
left: 50%; left: 50%;
margin-left: -(@van-doc-row-max-width / 2); margin-left: calc((var(--van-doc-row-max-width) / 2 * -1));
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
@ -110,8 +108,8 @@ export default {
} }
&__title { &__title {
padding: 8px 0 8px @van-doc-padding; padding: 24px 0 0 var(--van-doc-padding);
color: #455a64; color: var(--van-doc-text-color-2);
font-weight: 600; font-weight: 600;
font-size: 15px; font-size: 15px;
line-height: 28px; line-height: 28px;
@ -121,21 +119,19 @@ export default {
a { a {
display: block; display: block;
margin: 8px 0; margin: 8px 0;
padding: 8px 0 8px @van-doc-padding; padding: 6px 0 6px var(--van-doc-padding);
color: #455a64; color: var(--van-doc-text-color-3);
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
transition: color 0.2s; transition: color 0.2s;
&:hover, &:hover,
&.active { &.active {
color: @van-doc-green; color: var(--van-doc-link-color);
} }
&.active { &.active {
font-weight: 600; font-weight: 600;
background-color: #ebfff0;
border-radius: 999px;
} }
span { span {

2
packages/vant-cli/site/desktop/components/SearchInput.vue
View File

@ -38,8 +38,6 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import '../../common/style/var';
#docsearch { #docsearch {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;

22
packages/vant-cli/site/desktop/components/Simulator.vue
View File

@ -44,34 +44,32 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import '../../common/style/var';
.van-doc-simulator { .van-doc-simulator {
position: absolute; position: absolute;
top: @van-doc-padding + @van-doc-header-top-height; top: calc(var(--van-doc-padding) + var(--van-doc-header-top-height));
right: @van-doc-padding; right: var(--van-doc-padding);
z-index: 1; z-index: 1;
box-sizing: border-box; box-sizing: border-box;
width: @van-doc-simulator-width; width: var(--van-doc-simulator-width);
min-width: @van-doc-simulator-width; min-width: var(--van-doc-simulator-width);
overflow: hidden; overflow: hidden;
background: #fafafa; background: var(--van-doc-background-light);
border-radius: @van-doc-border-radius; border-radius: var(--van-doc-border-radius);
box-shadow: 0 8px 12px #ebedf0; box-shadow: 0 8px 12px var(--van-doc-shadow-color);
@media (max-width: 1100px) { @media (max-width: 1100px) {
right: auto; right: auto;
left: 750px; left: 750px;
} }
@media (min-width: @van-doc-row-max-width) { @media (min-width: var(--van-doc-row-max-width)) {
right: 50%; right: 50%;
margin-right: -(@van-doc-row-max-width / 2) + 24px; margin-right: calc(var(--van-doc-row-max-width) / 2 * -1 + 24px);
} }
&-fixed { &-fixed {
position: fixed; position: fixed;
top: @van-doc-padding; top: var(--van-doc-padding);
} }
iframe { iframe {

8
packages/vant-cli/site/desktop/components/index.vue
View File

@ -5,6 +5,7 @@
:config="config" :config="config"
:versions="versions" :versions="versions"
:lang-configs="langConfigs" :lang-configs="langConfigs"
:support-dark-mode="supportDarkMode"
@switch-version="$emit('switch-version', $event)" @switch-version="$emit('switch-version', $event)"
/> />
<doc-nav :lang="lang" :nav-config="config.nav" /> <doc-nav :lang="lang" :nav-config="config.nav" />
@ -39,8 +40,9 @@ export default {
lang: String, lang: String,
versions: Array, versions: Array,
simulator: String, simulator: String,
hasSimulator: Boolean,
langConfigs: Array, langConfigs: Array,
hasSimulator: Boolean,
supportDarkMode: Boolean,
config: { config: {
type: Object, type: Object,
required: true, required: true,
@ -108,7 +110,3 @@ export default {
}, },
}; };
</script> </script>
<style lang="less">
@import '../../common/style/var';
</style>

1
packages/vant-cli/site/mobile/App.vue
View File

@ -18,7 +18,6 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import '../common/style/var';
@import '../common/style/base'; @import '../common/style/base';
body { body {

4
packages/vant-cli/site/mobile/components/DemoBlock.vue
View File

@ -20,13 +20,11 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import '../../common/style/var';
.van-doc-demo-block { .van-doc-demo-block {
&__title { &__title {
margin: 0; margin: 0;
padding: 32px 16px 16px; padding: 32px 16px 16px;
color: @van-doc-text-light-blue; color: rgba(69, 90, 100, 0.6);
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;

2
packages/vant-cli/site/mobile/components/DemoHome.vue
View File

@ -52,8 +52,6 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import '../../common/style/var';
.demo-home { .demo-home {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;

2
packages/vant-cli/site/mobile/components/DemoHomeNav.vue
View File

@ -43,8 +43,6 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
@import '../../common/style/var';
.demo-home-nav { .demo-home-nav {
&__title { &__title {
margin: 24px 0 8px 16px; margin: 24px 0 8px 16px;

BIN
packages/vant/docs/assets/nav-logo.sketch
View File

Binary file not shown.

1
packages/vant/vant.config.mjs
View File

@ -16,6 +16,7 @@ export default {
}, },
site: { site: {
defaultLang: 'en-US', defaultLang: 'en-US',
supportDarkMode: true,
versions: [ versions: [
{ label: 'v1', link: '/vant/v1/' }, { label: 'v1', link: '/vant/v1/' },
{ label: 'v2', link: '/vant/' }, { label: 'v2', link: '/vant/' },