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 demo style in dark mode

Browse Source
This commit is contained in:
chenjiahan 2022-01-26 17:05:47 +08:00
parent 73322fd310
commit 0e8e3200a2
5 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,6 +28,7 @@ body {
--van-doc-text-color-1: var(--van-doc-black); --van-doc-text-color-1: var(--van-doc-black);
--van-doc-text-color-2: var(--van-doc-gray-8); --van-doc-text-color-2: var(--van-doc-gray-8);
--van-doc-text-color-3: #34495e; --van-doc-text-color-3: #34495e;
--van-doc-text-color-4: var(--van-doc-gray-6);
--van-doc-link-color: var(--van-doc-blue); --van-doc-link-color: var(--van-doc-blue);
// background // background
@ -52,6 +53,7 @@ body {
--van-doc-text-color-1: var(--van-doc-white); --van-doc-text-color-1: var(--van-doc-white);
--van-doc-text-color-2: rgba(255, 255, 255, 0.9); --van-doc-text-color-2: rgba(255, 255, 255, 0.9);
--van-doc-text-color-3: rgba(255, 255, 255, 0.75); --van-doc-text-color-3: rgba(255, 255, 255, 0.75);
--van-doc-text-color-4: rgba(255, 255, 255, 0.6);
--van-doc-link-color: #1bb5fe; --van-doc-link-color: #1bb5fe;
// background // background

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

@ -46,7 +46,7 @@ body {
} }
.van-doc-theme-dark { .van-doc-theme-dark {
background-color: var(--van-doc-background); background-color: var(--van-doc-black);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {

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

@ -24,7 +24,7 @@ export default {
&__title { &__title {
margin: 0; margin: 0;
padding: 32px 16px 16px; padding: 32px 16px 16px;
color: rgba(69, 90, 100, 0.6); color: var(--van-doc-text-color-4);
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;

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

@ -57,7 +57,6 @@ export default {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
padding: 46px 20px 20px; padding: 46px 20px 20px;
background: #fff;
&__title, &__title,
&__desc { &__desc {
@ -92,7 +91,7 @@ export default {
&__desc { &__desc {
margin: 0 0 40px; margin: 0 0 40px;
color: rgba(69, 90, 100, 0.6); color: var(--van-doc-text-color-4);
font-size: 14px; font-size: 14px;
} }
} }

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

@ -46,7 +46,7 @@ export default {
.demo-home-nav { .demo-home-nav {
&__title { &__title {
margin: 24px 0 8px 16px; margin: 24px 0 8px 16px;
color: rgba(69, 90, 100, 0.6); color: var(--van-doc-text-color-4);
font-size: 14px; font-size: 14px;
} }
@ -55,20 +55,20 @@ export default {
display: flex; display: flex;
margin: 0 0 12px; margin: 0 0 12px;
padding-left: 20px; padding-left: 20px;
color: #323233; color: var(--van-doc-text-color-3);
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
line-height: 40px; line-height: 40px;
background: #f7f8fa; background-color: var(--van-doc-background-light);
border-radius: 99px; border-radius: 99px;
transition: background 0.3s; transition: opacity 0.3s;
&:hover { &:hover {
background: darken(#f7f8fa, 3%); opacity: 0.8;
} }
&:active { &:active {
background: darken(#f7f8fa, 6%); opacity: 0.6;
} }
} }