blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-22 06:31:45 +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';
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;
}
}

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

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

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

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

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

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

@ -21,6 +21,16 @@
</a>
</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
ref="version"
v-if="versions"
@ -79,10 +89,12 @@ export default {
config: Object,
versions: Array,
langConfigs: Array,
supportDarkMode: Boolean,
},
data() {
return {
currentTheme: this.getDefaultTheme(),
packageVersion,
showVersionPop: false,
};
@ -109,9 +121,35 @@ export default {
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: {
getDefaultTheme() {
return window.localStorage.getItem('vantTheme') || 'light';
},
toggleTheme() {
this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
},
toggleVersionPop() {
const val = !this.showVersionPop;
@ -144,18 +182,16 @@ export default {
</script>
<style lang="less">
@import '../../common/style/var';
.van-doc-header {
width: 100%;
background-color: #001938;
background-color: var(--van-doc-header-background);
user-select: none;
&__top {
display: flex;
align-items: center;
height: @van-doc-header-top-height;
padding: 0 @van-doc-padding;
height: var(--van-doc-header-top-height);
padding: 0 var(--van-doc-padding);
&-nav {
flex: 1;
@ -231,7 +267,7 @@ export default {
transition: 0.2s;
&:hover {
color: @van-doc-blue;
color: var(--van-doc-link-color);
background-color: #f7f8fa;
}
}
@ -259,6 +295,8 @@ export default {
}
&__link {
cursor: pointer;
span {
color: #fff;
font-size: 16px;

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -43,8 +43,6 @@ export default {
</script>
<style lang="less">
@import '../../common/style/var';
.demo-home-nav {
&__title {
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: {
defaultLang: 'en-US',
supportDarkMode: true,
versions: [
{ label: 'v1', link: '/vant/v1/' },
{ label: 'v2', link: '/vant/' },