javascript/weui
1
0
Fork 0
mirror of https://github.com/Tencent/weui.git synced 2026-03-13 08:02:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: DarkMode 黑暗模式 适配

Browse Source
This commit is contained in:
bearyan
2020-02-14 19:42:27 +08:00
parent a2c83d3c17
commit d2aa33603f
17 changed files with 126 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/example/example.css vendored
View File

File diff suppressed because one or more lines are too long

123
dist/style/weui.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/style/weui.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
src/example/example.less
View File

@@ -322,11 +322,11 @@ body,
.placeholder {
margin: 5px;
padding: 0 10px;
background-color: #f7f7f7;
background-color: var(--weui-BG-1);
height: 2.3em;
line-height: 2.3em;
text-align: center;
color: rgba(0, 0, 0, 0.3);
color: var(--weui-FG-1);
}
}
@@ -366,7 +366,7 @@ body,
background: url(images/layers/transparent.gif) no-repeat center center;
background-size: contain;
font-size: 14px;
color: #fff;
color: var(--weui-WHITE);
span {
position: absolute;
bottom: 5px;

1
src/style/base/theme/dark.less
View File

@@ -20,6 +20,7 @@
--weui-BLUE: #10aeff;
--weui-INDIGO: #1196ff;
--weui-PURPLE: #8183ff;
--weui-WHITE: rgba(255, 255, 255, 0.8);
--weui-LINK: #7d90a9;
--weui-TEXTGREEN: #259c5c;
--weui-FG: white;

1
src/style/base/theme/light.less
View File

@@ -19,6 +19,7 @@ body {
--weui-BLUE: #10aeff;
--weui-INDIGO: #1485ee;
--weui-PURPLE: #6467f0;
--weui-WHITE: #fff;
--weui-LINK: #576b95;
--weui-TEXTGREEN: #06ae56;
--weui-FG: black;

12
src/style/base/variable/weui-button.less
View File

@@ -17,9 +17,9 @@
@import "../../base/fn";
.setColor(--weui-BTN-DISABLED-FONT-COLOR, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
.setColor(--weui-BTN-DISABLED-BG, #f2f2f2, #3c3c3c);
.setColor(--weui-BTN-DEFAULT-BG, #f2f2f2, #3c3c3c);
.setColor(--weui-BTN-DEFAULT-ACTIVE-BG, overlay(rgba(0, 0, 0, 0.05), #f2f2f2), overlay(rgba(0, 0, 0, 0.08), #3c3c3c));
.setColor(--weui-BTN-DEFAULT-BG, #f2f2f2, rgba(255, 255, 255, 0.08));
.setColor(--weui-BTN-DEFAULT-COLOR, #06ae56, rgba(255, 255, 255, 0.8));
.setColor(--weui-BTN-DEFAULT-ACTIVE-BG, overlay(rgba(0, 0, 0, 0.05), #f2f2f2), overlay(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08)));
@weuiBtnWidth: 184px;
@weuiBtnHeight: 40px;
@@ -34,12 +34,12 @@
@weuiBtnCellGap: 16px;
@weuiBtnCellLineHeight:unit((@weuiBtnCellHeight - 2 * @weuiBtnCellGap) / @weuiBtnFontSize);
@weuiBtnFontColor: #fff; // 固定色值
@weuiBtnFontColor: #fff;
@weuiBtnDisabledFontColor: var(--weui-BTN-DISABLED-FONT-COLOR);
@weuiBtnDisabledBg: var(--weui-BTN-DISABLED-BG);
@weuiBtnDisabledBg: var(--weui-BTN-DEFAULT-BG);
// default
@weuiBtnDefaultFontColor: var(--weui-TAG-TEXT-GREEN);
@weuiBtnDefaultFontColor: var(--weui-BTN-DEFAULT-COLOR);
@weuiBtnDefaultDisabledFontColor: @weuiBtnDisabledFontColor;
@weuiBtnDefaultBg: var(--weui-BTN-DEFAULT-BG);
@weuiBtnDefaultActiveBg: var(--weui-BTN-DEFAULT-ACTIVE-BG);

2
src/style/base/variable/weui-cell.less
View File

@@ -33,8 +33,6 @@
@weuiSwitchHeight: 32px;
// weui uploader
@weuiUploaderBorderColor: #a3a3a3; // TODO 咨询视觉
@weuiUploaderActiveBorderColor: overlay(@weuiActiveMaskBlack, @weuiUploaderBorderColor);
@weuiUploaderFileSpacing: 8px;
@weuiUploaderSize: 96px;
@weuiUploaderBorderWidth: 1px;

2
src/style/icon/weui-icon.less
View File

@@ -174,7 +174,7 @@
.weui-icon-delete {
&.weui-icon_gallery-delete {
color: #fff; // 固定色值
color: var(--weui-WHITE);
}
}
.weui-icon-arrow,

2
src/style/widget/weui-button/weui-btn_loading.less
View File

@@ -22,7 +22,7 @@
}
&.weui-btn_primary {
background-color: @weuiBtnPrimaryActiveBg;
color: @weuiBtnFontColor;
color: var(--weui-WHITE);
}
&.weui-btn_default {
background-color: @weuiBtnDefaultActiveBg;

2
src/style/widget/weui-cell/weui-gallery.less
View File

@@ -54,7 +54,7 @@
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
background-color: #0d0d0d; // 固定色值
color: #fff; // 固定色值
color: var(--weui-WHITE);
line-height: @weuiGalleryOprHeight;
text-align: center;
}

15
src/style/widget/weui-cell/weui-uploader.less
View File

@@ -69,7 +69,7 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff; // 固定色值
color: var(--weui-WHITE);
.weui-icon-warn {
display: inline-block;
}
@@ -82,7 +82,10 @@
width: @weuiUploaderSize;
height: @weuiUploaderSize;
box-sizing: border-box;
background-color: @weuiBgColorDefault;
background-color: #ededed;
.dark({
background-color: #2e2e2e;
});
&:before,
&:after {
content: " ";
@@ -90,7 +93,10 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: @weuiUploaderBorderColor;
background-color: #a3a3a3;
.dark({
background-color: #6d6d6d;
});
}
&:before {
width: @weuiUploaderBorderWidth + 1;
@@ -101,10 +107,9 @@
height: @weuiUploaderBorderWidth + 1;
}
&:active {
border-color: @weuiUploaderActiveBorderColor;
&:before,
&:after {
background-color: @weuiUploaderActiveBorderColor;
opacity: 0.7;
}
}
}

6
src/style/widget/weui-picker/weui-picker.less
View File

@@ -59,7 +59,6 @@
flex: 1;
position: relative;
height: 100%;
//-webkit-mask-box-image: -webkit-linear-gradient(bottom,transparent,transparent 5%,#fff 50%,#fff 50%,transparent 95%,transparent);
&:first-child {
.weui-picker__item {
padding-left: constant(safe-area-inset-left);
@@ -82,7 +81,10 @@
height: 100%;
margin: 0 auto;
z-index: 3;
background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.6)), linear-gradient(0deg, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.6)); // TODO 咨询视觉
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
.dark({
background-image: linear-gradient(180deg, rgba(35, 35, 35, 0.95), rgba(35, 35, 35, 0.6)), linear-gradient(0deg, rgba(35, 35, 35, 0.95), rgba(35, 35, 35, 0.6));
});
background-position: top, bottom;
background-size: 100% 92px;
background-repeat: no-repeat;

2
src/style/widget/weui-tips/weui-actionsheet.less
View File

@@ -25,7 +25,7 @@
backface-visibility: hidden;
z-index: 5000;
width: 100%;
background-color: @weuiBgColorDefault;
background-color: @weuiBgColorPrimary;
//slide up animation
transition: transform 0.3s;
border-top-left-radius: 12px;

4
src/style/widget/weui-tips/weui-dialog.less
View File

@@ -101,7 +101,7 @@
}
}
.weui-dialog__btn_default {
color: @weuiTextColorTitle;
color: var(--weui-FG-HALF);
}
.weui-skin_android {
@@ -145,7 +145,7 @@
}
}
.weui-dialog__btn_default {
color: @weuiTextColorTitle;
color: var(--weui-FG-HALF);
}
}

2
src/style/widget/weui-tips/weui-mask.less
View File

@@ -23,7 +23,7 @@
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6); // TODO 咨询视觉
background: rgba(0, 0, 0, 0.6);
}
.weui-mask_transparent {

9
src/style/widget/weui-tips/weui-toast.less
View File

@@ -24,19 +24,22 @@
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(17, 17, 17, 0.7); // TODO 咨询视觉
text-align: center;
border-radius: 5px;
color: #fff; // TODO 咨询视觉
color: rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #4c4c4c;
.dark({
background-color: #606060;
});
}
.weui-icon_toast {
display: block;
&.weui-icon-success-no-circle {
color: #fff; // TODO 咨询视觉
color: rgba(255, 255, 255, 0.9);
width: 55px;
height: 55px;
}