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

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

View File

@@ -1,6 +1,6 @@
body {
// colors
--van-doc-black: #1a1a1a;
--van-doc-black: #000;
--van-doc-white: #fff;
--van-doc-gray-1: #f7f8fa;
--van-doc-gray-2: #f2f3f5;
@@ -32,11 +32,11 @@ body {
--van-doc-link-color: var(--van-doc-blue);
// background
--van-doc-background: #f7f8fa;
--van-doc-background-light: var(--van-doc-white);
--van-doc-background: #eeeff2;
--van-doc-background-2: var(--van-doc-white);
--van-doc-background-3: 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;
@@ -58,10 +58,10 @@ body {
// background
--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-border-color: #3a3a3c;
--van-doc-shadow-color: transparent;
// code
--van-doc-code-color: rgba(200, 200, 200, 0.85);

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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