From 2df309913365a9161ae19fa90f0ddbb2a933b669 Mon Sep 17 00:00:00 2001 From: bearyan Date: Sun, 26 Jan 2020 16:27:27 +0800 Subject: [PATCH] =?UTF-8?q?dark=20mode=20=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/example/example.less | 20 +++++++++---------- .../widget/weui-media-box/weui-media-box.less | 6 +++--- src/style/widget/weui-page/weui-article.less | 2 +- src/style/widget/weui-page/weui-form.less | 7 +++---- src/style/widget/weui-page/weui-msg.less | 2 +- src/style/widget/weui-panel/weui-panel.less | 2 +- src/style/widget/weui-picker/weui-picker.less | 6 +++--- .../widget/weui-searchbar/weui-searchbar.less | 4 ++-- src/style/widget/weui-slider/weui-slider.less | 4 ++-- src/style/widget/weui-tab/weui-navbar.less | 2 +- .../weui-tips/weui-half-screen-dialog.less | 6 +++--- 11 files changed, 30 insertions(+), 31 deletions(-) diff --git a/src/example/example.less b/src/example/example.less index 930186b..584c1ba 100644 --- a/src/example/example.less +++ b/src/example/example.less @@ -110,7 +110,7 @@ body, .page { } .page.progress{ - background-color: #FFFFFF; + background-color: var(--weui-BG-2); } .page.home{ @pageHomePadding: 20px; @@ -246,18 +246,18 @@ body, .page { } .page.form { - background-color: #FFFFFF; + background-color: var(--weui-BG-2); .page__bd { padding-bottom: 30px; } } .page.actionsheet{ - background-color: #FFFFFF; + background-color: var(--weui-BG-2); } .page.dialog { - background-color: #FFFFFF; + background-color: var(--weui-BG-2); .page__bd { padding: 0 15px; } @@ -268,11 +268,11 @@ body, .page { .page.msg_text_primary, .page.msg_success, .page.msg_warn { - background-color: #FFFFFF; + background-color: var(--weui-BG-2); } .page.toast{ - background-color: #FFFFFF; + background-color: var(--weui-BG-2); } .page.panel { @@ -282,7 +282,7 @@ body, .page { } .page.article { - background-color: #FFFFFF; + background-color: var(--weui-BG-2); } .page.icons-svg, @@ -333,7 +333,7 @@ body, .page { } .page.loadmore{ - background-color: #FFFFFF; + background-color: var(--weui-BG-2); } .page.layers{ @@ -440,7 +440,7 @@ body, .page { } } .layers__layer_content{ - background-color: #FFFFFF; + background-color: var(--weui-BG-2); z-index: 1; &.j_transform{ transform: @layerBaseTransform translateZ(@layerStartPos - 3 * @layerSpacing); @@ -471,7 +471,7 @@ body, .page { } .page.picker{ - background-color: #FFFFFF; + background-color: var(--weui-BG-2); overflow: hidden; } diff --git a/src/style/widget/weui-media-box/weui-media-box.less b/src/style/widget/weui-media-box/weui-media-box.less index e9452ac..d4283f5 100644 --- a/src/style/widget/weui-media-box/weui-media-box.less +++ b/src/style/widget/weui-media-box/weui-media-box.less @@ -33,7 +33,7 @@ color:#000000; .setTapColor(); &:active{ - background-color:#ECECEC; + background-color: @weuiBgColorActive; } } } @@ -57,7 +57,7 @@ margin-top: 16px; padding-bottom: 4px; font-size: 13px; - color: #CECECE; + color: @weuiTextColorTips; line-height: 1em; list-style: none; overflow: hidden; @@ -68,7 +68,7 @@ } .weui-media-box__info__meta_extra { padding-left: 1em; - border-left: 1px solid #CECECE; + border-left: 1px solid @weuiTextColorTips; } .weui-media-box_appmsg { display: flex; diff --git a/src/style/widget/weui-page/weui-article.less b/src/style/widget/weui-page/weui-article.less index 2dba85d..f2a757f 100644 --- a/src/style/widget/weui-page/weui-article.less +++ b/src/style/widget/weui-page/weui-article.less @@ -21,7 +21,7 @@ padding:24px calc(16px ~"+ constant(safe-area-inset-right)") calc(24px ~"+ constant(safe-area-inset-bottom)") calc(16px ~"+ constant(safe-area-inset-left)"); padding:24px calc(16px ~"+ env(safe-area-inset-right)") calc(24px ~"+ env(safe-area-inset-bottom)") calc(16px ~"+ env(safe-area-inset-left)"); font-size: 17px; - color:rgba(0,0,0,.9); + color: var(--weui-FG-0); section { margin-bottom: 1.5em; } diff --git a/src/style/widget/weui-page/weui-form.less b/src/style/widget/weui-page/weui-form.less index 7e4d433..723f286 100644 --- a/src/style/widget/weui-page/weui-form.less +++ b/src/style/widget/weui-page/weui-form.less @@ -26,8 +26,7 @@ line-height:1.4; min-height:100%; box-sizing:border-box; - line-height:1.4; - background-color:#FFFFFF; + background-color: var(--weui-BG-2); .weui-footer,.weui-footer__link{ font-size:14px; @@ -38,7 +37,7 @@ } .weui-form__text-area{ padding:0 32px; - color:rgba(0,0,0,.9); + color: var(--weui-FG-0); text-align:center; } .weui-form__control-area{ @@ -68,7 +67,7 @@ margin-top:16px; } .weui-form__tips{ - color:rgba(0,0,0,.5); + color: @weuiTextColorDesc; font-size:14px; a{ color:@weuiLinkColorDefault; diff --git a/src/style/widget/weui-page/weui-msg.less b/src/style/widget/weui-page/weui-msg.less index 6079a50..12d47c6 100644 --- a/src/style/widget/weui-page/weui-msg.less +++ b/src/style/widget/weui-page/weui-msg.less @@ -27,7 +27,7 @@ box-sizing:border-box; display:flex; flex-direction: column; - background-color: #FFFFFF; + background-color: var(--weui-BG-2); a:not(.weui-btn){ color: @weuiLinkColorDefault; display: inline-block; diff --git a/src/style/widget/weui-panel/weui-panel.less b/src/style/widget/weui-panel/weui-panel.less index 3408df0..c5adaef 100644 --- a/src/style/widget/weui-panel/weui-panel.less +++ b/src/style/widget/weui-panel/weui-panel.less @@ -18,7 +18,7 @@ .weui-panel { - background-color: #FFFFFF; + background-color: var(--weui-BG-2); margin-top: 10px; &:first-child { margin-top: 0; diff --git a/src/style/widget/weui-picker/weui-picker.less b/src/style/widget/weui-picker/weui-picker.less index 46dca0a..3580fd7 100644 --- a/src/style/widget/weui-picker/weui-picker.less +++ b/src/style/widget/weui-picker/weui-picker.less @@ -24,7 +24,7 @@ left: 0; bottom: 0; z-index: 5000; - background-color: #fff; + background-color: var(--weui-BG-2); padding-bottom:constant(safe-area-inset-bottom); padding-bottom:env(safe-area-inset-bottom); backface-visibility: hidden; @@ -50,7 +50,7 @@ .weui-picker__bd { display: flex; position: relative; - background-color: #fff; + background-color: var(--weui-BG-2); height: 240px; overflow: hidden; } @@ -81,7 +81,7 @@ height: 100%; margin: 0 auto; z-index: 3; - background: linear-gradient(180deg, hsla(0, 0%, 100%, .95), hsla(0, 0%, 100%, .6)), linear-gradient(0deg, hsla(0, 0%, 100%, .95), hsla(0, 0%, 100%, .6)); + background: linear-gradient(180deg, hsla(0, 0%, 100%, .95), hsla(0, 0%, 100%, .6)), linear-gradient(0deg, hsla(0, 0%, 100%, .95), hsla(0, 0%, 100%, .6)); // TODO 咨询视觉 background-position: top, bottom; background-size: 100% 92px; background-repeat: no-repeat; diff --git a/src/style/widget/weui-searchbar/weui-searchbar.less b/src/style/widget/weui-searchbar/weui-searchbar.less index 9afe5db..cf39ce2 100644 --- a/src/style/widget/weui-searchbar/weui-searchbar.less +++ b/src/style/widget/weui-searchbar/weui-searchbar.less @@ -42,7 +42,7 @@ .weui-search-bar__form { position: relative; flex: auto; - background-color: #FFFFFF; + background-color: var(--weui-BG-2); border-radius:4px; } .weui-search-bar__box { @@ -96,7 +96,7 @@ line-height:32px; text-align: center; color: @weuiTextColorDesc; - background: #FFFFFF; + background: var(--weui-BG-2); span { display: inline-block; font-size: 14px; diff --git a/src/style/widget/weui-slider/weui-slider.less b/src/style/widget/weui-slider/weui-slider.less index e29ac5a..cc674a8 100644 --- a/src/style/widget/weui-slider/weui-slider.less +++ b/src/style/widget/weui-slider/weui-slider.less @@ -42,8 +42,8 @@ margin-left: -14px; margin-top: -14px; border-radius: 50%; - background-color: #FFFFFF; - box-shadow: 0 0 4px rgba(0, 0, 0, .2); + background-color: #FFFFFF; // 固定色值 + box-shadow: 0 0 4px var(--weui-FG-3); } diff --git a/src/style/widget/weui-tab/weui-navbar.less b/src/style/widget/weui-tab/weui-navbar.less index 707d10a..0971771 100644 --- a/src/style/widget/weui-tab/weui-navbar.less +++ b/src/style/widget/weui-tab/weui-navbar.less @@ -20,7 +20,7 @@ display: flex; position: relative; z-index: 500; - background-color: #FFFFFF; + background-color: var(--weui-BG-2); padding-top:constant(safe-area-inset-top); padding-top:env(safe-area-inset-top); diff --git a/src/style/widget/weui-tips/weui-half-screen-dialog.less b/src/style/widget/weui-tips/weui-half-screen-dialog.less index 0b7d352..22fe2bc 100644 --- a/src/style/widget/weui-tips/weui-half-screen-dialog.less +++ b/src/style/widget/weui-tips/weui-half-screen-dialog.less @@ -25,7 +25,7 @@ z-index:5000; line-height:1.4; - background-color:#FFFFFF; + background-color: var(--weui-BG-2); border-top-left-radius:12px; border-top-right-radius:12px; overflow:hidden; @@ -68,7 +68,7 @@ } .weui-half-screen-dialog__title { display:block; - color:rgba(0,0,0,.9); + color: var(--weui-FG-0); font-weight:700; font-size:15px; } @@ -145,7 +145,7 @@ color: @weuiTextColorTitle; display: inline-block; vertical-align: middle; - width: 12px; + width: 14px; height: 24px; mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.25%2010.693L6.057%204.5%205%205.557l6.193%206.193L5%2017.943%206.057%2019l6.193-6.193L18.443%2019l1.057-1.057-6.193-6.193L19.5%205.557%2018.443%204.5z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%; -webkit-mask-size: cover;