blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

style(@vant/cli): improve mobile style in dark mode

Browse Source
This commit is contained in:
chenjiahan 2022-01-27 11:00:38 +08:00
parent 98b999d911
commit f5c32c29f1
15 changed files with 16 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/vant-cli/site/common/style/vars.less
View File

@ -1,6 +1,6 @@
body { body {
// colors // colors
--van-doc-black: #1a1a1a; --van-doc-black: #000;
--van-doc-white: #fff; --van-doc-white: #fff;
--van-doc-gray-1: #f7f8fa; --van-doc-gray-1: #f7f8fa;
--van-doc-gray-2: #f2f3f5; --van-doc-gray-2: #f2f3f5;
@ -32,11 +32,11 @@ body {
--van-doc-link-color: var(--van-doc-blue); --van-doc-link-color: var(--van-doc-blue);
// background // background
--van-doc-background: #f7f8fa; --van-doc-background: #eeeff2;
--van-doc-background-light: var(--van-doc-white); --van-doc-background-2: var(--van-doc-white);
--van-doc-background-3: var(--van-doc-white);
--van-doc-header-background: #011f3c; --van-doc-header-background: #011f3c;
--van-doc-border-color: var(--van-doc-gray-2); --van-doc-border-color: var(--van-doc-gray-2);
--van-doc-shadow-color: var(--van-doc-gray-3);
// code // code
--van-doc-code-color: #58727e; --van-doc-code-color: #58727e;
@ -58,10 +58,10 @@ body {
// background // background
--van-doc-background: #202124; --van-doc-background: #202124;
--van-doc-background-light: rgba(255, 255, 255, 0.06); --van-doc-background-2: rgba(255, 255, 255, 0.06);
--van-doc-background-3: rgba(255, 255, 255, 0.1);
--van-doc-header-background: rgba(1, 31, 60, 0.3); --van-doc-header-background: rgba(1, 31, 60, 0.3);
--van-doc-border-color: #3a3a3c; --van-doc-border-color: #3a3a3c;
--van-doc-shadow-color: transparent;
// code // code
--van-doc-code-color: rgba(200, 200, 200, 0.85); --van-doc-code-color: rgba(200, 200, 200, 0.85);

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

@ -44,9 +44,8 @@ export default {
.van-doc-card { .van-doc-card {
margin-bottom: 24px; margin-bottom: 24px;
padding: 24px; padding: 24px;
background-color: var(--van-doc-background-light); background-color: var(--van-doc-background-2);
border-radius: var(--van-doc-border-radius); border-radius: var(--van-doc-border-radius);
box-shadow: 0 8px 12px var(--van-doc-shadow-color);
> p a, > p a,
> ul a, > ul a,

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

@ -79,8 +79,7 @@ export default {
max-width: var(--van-doc-nav-width); max-width: var(--van-doc-nav-width);
padding: 8px 0; padding: 8px 0;
overflow-y: scroll; overflow-y: scroll;
background-color: var(--van-doc-background-light); background-color: var(--van-doc-background-2);
box-shadow: 0 8px 12px var(--van-doc-shadow-color);
@media (min-width: var(--van-doc-row-max-width)) { @media (min-width: var(--van-doc-row-max-width)) {
left: 50%; left: 50%;

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

@ -53,9 +53,8 @@ export default {
width: var(--van-doc-simulator-width); width: var(--van-doc-simulator-width);
min-width: var(--van-doc-simulator-width); min-width: var(--van-doc-simulator-width);
overflow: hidden; overflow: hidden;
background: var(--van-doc-background-light); background: var(--van-doc-background-2);
border-radius: var(--van-doc-border-radius); border-radius: var(--van-doc-border-radius);
box-shadow: 0 8px 12px var(--van-doc-shadow-color);
@media (max-width: 1100px) { @media (max-width: 1100px) {
right: auto; right: auto;

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

@ -45,8 +45,12 @@ body {
min-width: 100vw; min-width: 100vw;
} }
.van-doc-theme-light {
background-color: var(--van-doc-gray-1);
}
.van-doc-theme-dark { .van-doc-theme-dark {
background-color: #000; background-color: var(--van-doc-black);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {

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

@ -59,7 +59,7 @@ export default {
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
line-height: 40px; line-height: 40px;
background-color: var(--van-doc-background-light); background-color: var(--van-doc-background-3);
border-radius: 99px; border-radius: 99px;
transition: opacity 0.3s; transition: opacity 0.3s;

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

@ -42,7 +42,7 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 56px; height: 56px;
background-color: var(--van-doc-background-light); background-color: var(--van-doc-background-2);
&__title { &__title {
font-weight: 600; font-weight: 600;

2
packages/vant/src/button/demo/index.vue
View File

@ -144,8 +144,6 @@ const t = useTranslate({
<style lang="less"> <style lang="less">
.demo-button { .demo-button {
background: var(--van-background-2);
.van-button { .van-button {
&--large { &--large {
margin-bottom: var(--van-padding-md); margin-bottom: var(--van-padding-md);

2
packages/vant/src/col/demo/index.vue
View File

@ -70,8 +70,6 @@ const t = useTranslate({
<style lang="less"> <style lang="less">
.demo-col { .demo-col {
background: var(--van-background-2);
.van-doc-demo-block { .van-doc-demo-block {
padding: 0 var(--van-padding-md); padding: 0 var(--van-padding-md);
} }

2
packages/vant/src/empty/demo/index.vue
View File

@ -68,8 +68,6 @@ const active = ref('error');
<style lang="less"> <style lang="less">
.demo-empty { .demo-empty {
background: var(--van-background-2);
.custom-image { .custom-image {
.van-empty__image { .van-empty__image {
width: 90px; width: 90px;

2
packages/vant/src/loading/demo/index.vue
View File

@ -62,8 +62,6 @@ const t = useTranslate({
<style lang="less"> <style lang="less">
.demo-loading { .demo-loading {
background: var(--van-background-2);
.van-loading { .van-loading {
display: inline-block; display: inline-block;
margin: 5px 0 5px 20px; margin: 5px 0 5px 20px;

2
packages/vant/src/notice-bar/demo/index.vue
View File

@ -81,8 +81,6 @@ const t = useTranslate({
<style lang="less"> <style lang="less">
.demo-notice-bar { .demo-notice-bar {
background: var(--van-background-2);
.van-notice-bar:not(:first-of-type) { .van-notice-bar:not(:first-of-type) {
margin-top: 4px; margin-top: 4px;
} }

2
packages/vant/src/overlay/demo/index.vue
View File

@ -47,8 +47,6 @@ const showEmbedded = ref(false);
<style lang="less"> <style lang="less">
.demo-overlay { .demo-overlay {
background: var(--van-background-2);
.wrapper { .wrapper {
display: flex; display: flex;
align-items: center; align-items: center;

2
packages/vant/src/progress/demo/index.vue
View File

@ -72,8 +72,6 @@ const reduce = () => {
<style lang="less"> <style lang="less">
.demo-progress { .demo-progress {
background: var(--van-background-2);
.van-progress { .van-progress {
margin: 20px 16px; margin: 20px 16px;

1
packages/vant/src/slider/demo/index.vue
View File

@ -96,7 +96,6 @@ const onChange = (value: string) => Toast(t('text') + value);
<style lang="less"> <style lang="less">
.demo-slider { .demo-slider {
background: var(--van-background-2);
user-select: none; user-select: none;
.van-doc-demo-block { .van-doc-demo-block {