alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages 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
Download Patch File Download Diff File Expand all files Collapse all files
packages/vant-cli/site/desktop/components/Container.vue
+5 -5
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);
}
}
}
packages/vant-cli/site/desktop/components/Content.vue
+21 -27
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;
packages/vant-cli/site/desktop/components/Header.vue
+44 -6
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;
packages/vant-cli/site/desktop/components/Nav.vue
+12 -16
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 {
packages/vant-cli/site/desktop/components/SearchInput.vue
-2
View File
@@ -38,8 +38,6 @@ export default {
</script>
<style lang="less">
@import '../../common/style/var';
#docsearch {
display: inline-block;
vertical-align: middle;
packages/vant-cli/site/desktop/components/Simulator.vue
+10 -12
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 {
packages/vant-cli/site/desktop/components/index.vue
+3 -5
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>