Skip to content

U
uni-app

m0_68066342 / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 0
Fork 0
U
uni-app

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 0ae63815 编写于 作者: D DCloud_LXH
浏览文件
操作

feat(h5): darkmode toast、actionSheet、modal

上级 7edf7fb9
展开全部 隐藏空白更改
内联 并排
Showing with 331 addition and 162 deletion
packages/uni-h5/dist/index.css
浏览文件 @ 0ae63815
此差异已折叠。
packages/uni-h5/dist/index.dark.css
浏览文件 @ 0ae63815
@media(prefers-color-scheme:dark){body{background-color:#191919;color:hsla(0,0%,100%,0.8)}}@media(prefers-color-scheme:dark){uni-page-body{background-color:#191919;color:hsla(0,0%,100%,0.8)}}
\ No newline at end of file
@media(prefers-color-scheme:dark){html{--UI-BG-CLOLOR-ACTIVE:#373737;--UI-BORDER-CLOLOR-1:#373737;--UI-BG:#000;--UI-BG-0:#191919;--UI-BG-1:#1f1f1f;--UI-BG-2:#232323;--UI-BG-3:#2f2f2f;--UI-BG-4:#606060;--UI-BG-5:#2c2c2c;--UI-FG:#fff;--UI-FG-0:hsla(0,0%,100%,0.8);--UI-FG-HALF:hsla(0,0%,100%,0.6);--UI-FG-1:hsla(0,0%,100%,0.5);--UI-FG-2:hsla(0,0%,100%,0.3);--UI-FG-3:hsla(0,0%,100%,0.05)}}@media(prefers-color-scheme:dark){uni-page-body{background-color:#191919;color:hsla(0,0%,100%,0.8)}}@media(prefers-color-scheme:dark){uni-toast .uni-toast{background-color:#606060;color:var(--UI-FG-0)}uni-toast .uni-icon_toast.uni-icon-error:before,uni-toast .uni-icon_toast.uni-icon-success-no-circle:before{color:rgba(255,255,255,0.9)}}@media(prefers-color-scheme:dark){uni-actionsheet .uni-actionsheet__title{background-color:var(--UI-BG-1);border-bottom-color:var(--UI-BORDER-CLOLOR-1)}uni-actionsheet .uni-actionsheet__action,uni-actionsheet .uni-actionsheet__menu{background-color:var(--UI-BG-2)}uni-actionsheet .uni-actionsheet__cell:active{background-color:var(--UI-BG-CLOLOR-ACTIVE)}uni-actionsheet .uni-actionsheet__cell:before{border-top-color:var(--UI-BORDER-CLOLOR-1);color:var(--UI-BORDER-CLOLOR-1)}}@media(prefers-color-scheme:dark){uni-modal .uni-modal{color:var(--UI-FG-0);background-color:var(--UI-BG-2)}uni-modal .uni-modal__bd{color:var(--UI-FG-1)}uni-modal .uni-modal__btn:active{color:#aaa;background-color:var(--UI-BG-CLOLOR-ACTIVE)}uni-modal .uni-modal__ft:after,uni-modal .uni-modal__btn:after{color:var(--UI-BORDER-CLOLOR-1);border-color:var(--UI-BORDER-CLOLOR-1)}}
\ No newline at end of file
src/core/helpers/protocol/ui/popup.js
浏览文件 @ 0ae63815
......@@ -25,7 +25,7 @@ export const showModal = {
},
cancelColor: {
type: String,
default: '#000000'
default: '#000'
},
confirmText: {
type: String,
......@@ -113,7 +113,7 @@ export const showActionSheet = {
},
itemColor: {
type: String,
default: '#000000'
default: '#000'
},
visible: {
type: Boolean,
......
src/core/view/index.css
浏览文件 @ 0ae63815
......@@ -33,11 +33,10 @@ body {
overflow-x: hidden;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #191919;
color: hsla(0, 0%, 100%, 0.8);
}
body,
uni-page-body {
background-color: var(--UI-BG-0);
color: var(--UI-FG-0);
}
[class^="uni-icon-"],
......@@ -189,3 +188,41 @@ uni-page {
[nvue] uni-swiper-item {
position: absolute;
}
html {
/* --UI-BG-0: #ededed; */
--UI-BG: #fff;
--UI-BG-1: #f7f7f7;
--UI-BG-2: #fff;
--UI-BG-3: #f7f7f7;
--UI-BG-4: #4c4c4c;
--UI-BG-5: #fff;
--UI-FG: #000;
--UI-FG-0: rgba(0, 0, 0, 0.9);
--UI-FG-HALF: rgba(0, 0, 0, 0.9);
--UI-FG-1: rgba(0, 0, 0, 0.5);
--UI-FG-2: rgba(0, 0, 0, 0.3);
--UI-FG-3: rgba(0, 0, 0, 0.1);
}
@media (prefers-color-scheme: dark) {
html {
--UI-BG-CLOLOR-ACTIVE: #373737;
--UI-BORDER-CLOLOR-1: #373737;
/* UI */
--UI-BG: #000;
--UI-BG-0: #191919;
--UI-BG-1: #1f1f1f;
--UI-BG-2: #232323;
--UI-BG-3: #2f2f2f;
--UI-BG-4: #606060;
--UI-BG-5: #2c2c2c;
--UI-FG: #fff;
--UI-FG-0: hsla(0, 0%, 100%, 0.8);
--UI-FG-HALF: hsla(0, 0%, 100%, 0.6);
--UI-FG-1: hsla(0, 0%, 100%, 0.5);
--UI-FG-2: hsla(0, 0%, 100%, 0.3);
--UI-FG-3: hsla(0, 0%, 100%, 0.05);
}
}
\ No newline at end of file
src/platforms/h5/components/app/popup/actionSheet.vue
浏览文件 @ 0ae63815
<template>
<uni-actionsheet @touchmove.prevent>
<transition name="uni-fade">
<div
v-show="visible"
class="uni-mask uni-actionsheet__mask"
@click="_close(-1)"
<div
v-show="visible"
class="uni-mask uni-actionsheet__mask"
@click="_close(-1)"
/>
</transition>
<div
:class="{ 'uni-actionsheet_toggle': visible }"
:style="popupStyle.content"
class="uni-actionsheet"
<div
:class="{ 'uni-actionsheet_toggle': visible }"
:style="popupStyle.content"
class="uni-actionsheet"
>
<div
ref="main"
class="uni-actionsheet__menu"
@wheel="_handleWheel"
<div
ref="main"
class="uni-actionsheet__menu"
@wheel="_handleWheel"
>
<!-- title占位 -->
<div
v-if="title"
class="uni-actionsheet__cell"
:style="{height:`${titleHeight}px`}"
<div
v-if="title"
class="uni-actionsheet__cell"
:style="{height:`${titleHeight}px`}"
/>
<div
v-if="title"
class="uni-actionsheet__title"
<div
v-if="title"
class="uni-actionsheet__title"
>
{{ title }}
</div>
<div :style="{maxHeight:`${HEIGHT}px`,overflow:'hidden'}">
<div ref="content">
<div
v-for="(itemTitle, index) in itemList"
:key="index"
:style="{ color: itemColor }"
<div
v-for="(itemTitle, index) in itemList"
:key="index"
:style="{ color: listItemColor }"
class="uni-actionsheet__cell"
@click="_close(index)"
@click="_close(index)"
>
{{ itemTitle }}
</div>
......@@ -44,19 +44,19 @@
</div>
</div>
<div class="uni-actionsheet__action">
<div
:style="{ color: itemColor }"
class="uni-actionsheet__cell"
@click="_close(-1)"
<div
:style="{ color: cancelItemColor }"
class="uni-actionsheet__cell"
@click="_close(-1)"
>
{{ $$t('uni.showActionSheet.cancel') }}
</div>
</div>
<div :style="popupStyle.triangle" />
</div>
<keypress
:disable="!visible"
@esc="_close(-1)"
<keypress
:disable="!visible"
@esc="_close(-1)"
/>
</uni-actionsheet>
</template>
......@@ -78,6 +78,7 @@ import {
initScrollBounce,
disableScrollBounce
} from 'uni-platform/helpers/scroll'
import { onThemeChange, offThemeChange, getTheme } from '../../theme'
// 由于模拟滚动阻止了点击，使用自定义事件来触发点击事件
function initClick (dom) {
......@@ -106,6 +107,23 @@ function initClick (dom) {
})
}
const ACTION_SHEET_THEME = {
light: {
listItemColor: '#000000',
cancelItemColor: '#000000'
},
dark: {
listItemColor: 'rgba(255, 255, 255, 0.8)',
cancelItemColor: 'rgba(255, 255, 255)'
}
}
function setActionSheetTheme (theme) {
['listItemColor', 'cancelItemColor'].forEach(key => {
this[key] = ACTION_SHEET_THEME[theme][key]
})
}
export default {
name: 'ActionSheet',
components: {
......@@ -142,7 +160,9 @@ export default {
contentHeight: 0,
titleHeight: 0,
deltaY: 0,
scrollTop: 0
scrollTop: 0,
listItemColor: '#000000',
cancelItemColor: '#000000'
}
},
watch: {
......@@ -162,6 +182,15 @@ export default {
initClick(item)
})
})
this.listItemColor = this.cancelItemColor = this.itemColor
// #000 by default in protocols
if (this.$parent.showActionSheet.itemColor === '#000') {
if (getTheme() === 'dark') this._onThemeChange({ theme: 'dark' })
onThemeChange(this._onThemeChange)
}
} else {
offThemeChange(this._onThemeChange)
}
}
},
......@@ -181,6 +210,9 @@ export default {
initScrollBounce()
},
methods: {
_onThemeChange ({ theme }) {
setActionSheetTheme.call(this, theme)
},
_close (tapIndex) {
this.$emit('close', tapIndex)
},
......@@ -277,6 +309,7 @@ export default {
right: 0;
left: 0;
z-index: 1;
color: var(--UI-FG);
background-color: #fff;
border-radius: 5px 5px 0 0;
border-bottom: 1px solid #e5e5e5;
......@@ -332,4 +365,25 @@ export default {
display: none;
}
}
</style>
@media (prefers-color-scheme: dark) {
uni-actionsheet .uni-actionsheet__title {
background-color: var(--UI-BG-1);
border-bottom-color: var(--UI-BORDER-CLOLOR-1);
}
uni-actionsheet .uni-actionsheet__action,
uni-actionsheet .uni-actionsheet__menu {
background-color: var(--UI-BG-2);
}
uni-actionsheet .uni-actionsheet__cell:active {
background-color: var(--UI-BG-CLOLOR-ACTIVE);
}
uni-actionsheet .uni-actionsheet__cell:before {
border-top-color: var(--UI-BORDER-CLOLOR-1);
color: var(--UI-BORDER-CLOLOR-1);
}
}
</style>
src/platforms/h5/components/app/popup/modal.vue
浏览文件 @ 0ae63815
......@@ -32,7 +32,7 @@
<div class="uni-modal__ft">
<div
v-if="showCancel"
:style="{color:cancelColor}"
:style="{color:cancelColor_}"
class="uni-modal__btn uni-modal__btn_default"
@click="_close('cancel')"
>
......@@ -58,6 +58,19 @@
<script>
import transition from './mixins/transition'
import keypress from '../../../helpers/keypress'
import { onThemeChange, offThemeChange, getTheme } from '../../theme'
const ModalTheme = {
light: {
cancelColor: '#000000'
},
dark: {
cancelColor: 'rgb(170, 170, 170)'
}
}
function setCancelColor (theme) {
this.cancelColor_ = ModalTheme[theme].cancelColor
}
export default {
name: 'Modal',
......@@ -105,7 +118,29 @@ export default {
default: ''
}
},
data () {
return {
cancelColor_: '#000'
}
},
watch: {
visible (visible) {
if (visible) {
this.cancelColor_ = this.$parent.showModal.cancelColor
// #000 by default in protocols
if (this.$parent.showModal.cancelColor === '#000') {
if (getTheme() === 'dark') this._onThemeChange({ theme: 'dark' })
onThemeChange(this._onThemeChange)
}
} else {
offThemeChange(this._onThemeChange)
}
}
},
methods: {
_onThemeChange ({ theme }) {
setCancelColor.call(this, theme)
},
_close (type) {
const res = {
[type]: true
......@@ -119,67 +154,67 @@ export default {
}
</script>
<style>
uni-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
display: block;
box-sizing: border-box;
}
uni-modal .uni-modal {
position: fixed;
z-index: 999;
width: 80%;
max-width: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
uni-modal .uni-modal * {
box-sizing: border-box;
}
uni-modal .uni-modal__hd {
padding: 1em 1.6em 0.3em;
}
uni-modal .uni-modal__title {
font-weight: 400;
font-size: 18px;
word-wrap:break-word;
word-break:break-all;
white-space: pre-wrap;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
uni-modal .uni-modal__bd {
padding: 1.3em 1.6em 1.3em;
min-height: 40px;
font-size: 15px;
line-height: 1.4;
word-wrap: break-word;
word-break: break-all;
white-space: pre-wrap;
color: #999999;
max-height: 400px;
overflow-x: hidden;
overflow-y: auto;
}
uni-modal .uni-modal__textarea {
uni-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
display: block;
box-sizing: border-box;
}
uni-modal .uni-modal {
position: fixed;
z-index: 999;
width: 80%;
max-width: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
uni-modal .uni-modal * {
box-sizing: border-box;
}
uni-modal .uni-modal__hd {
padding: 1em 1.6em 0.3em;
}
uni-modal .uni-modal__title {
font-weight: 400;
font-size: 18px;
word-wrap: break-word;
word-break: break-all;
white-space: pre-wrap;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
uni-modal .uni-modal__bd {
padding: 1.3em 1.6em 1.3em;
min-height: 40px;
font-size: 15px;
line-height: 1.4;
word-wrap: break-word;
word-break: break-all;
white-space: pre-wrap;
color: #999999;
max-height: 400px;
overflow-x: hidden;
overflow-y: auto;
}
uni-modal .uni-modal__textarea {
resize: none;
border: 0;
margin: 0;
......@@ -192,62 +227,84 @@ export default {
text-decoration: inherit;
}
uni-modal .uni-modal__ft {
position: relative;
line-height: 48px;
font-size: 18px;
display: flex;
}
uni-modal .uni-modal__ft:after {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #d5d5d6;
color: #d5d5d6;
transform-origin: 0 0;
transform: scaleY(0.5);
}
uni-modal .uni-modal__btn {
display: block;
flex: 1;
color: #3cc51f;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
cursor: pointer;
}
uni-modal .uni-modal__btn:active {
background-color: #eeeeee;
}
uni-modal .uni-modal__btn:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 1px;
bottom: 0;
border-left: 1px solid #d5d5d6;
color: #d5d5d6;
transform-origin: 0 0;
transform: scaleX(0.5);
}
uni-modal .uni-modal__btn:first-child:after {
display: none;
}
uni-modal .uni-modal__btn_default {
color: #353535;
}
uni-modal .uni-modal__btn_primary {
color: #007aff;
}
uni-modal .uni-modal__ft {
position: relative;
line-height: 48px;
font-size: 18px;
display: flex;
}
uni-modal .uni-modal__ft:after {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #d5d5d6;
color: #d5d5d6;
transform-origin: 0 0;
transform: scaleY(0.5);
}
uni-modal .uni-modal__btn {
display: block;
flex: 1;
color: #3cc51f;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
cursor: pointer;
}
uni-modal .uni-modal__btn:active {
background-color: #eeeeee;
}
uni-modal .uni-modal__btn:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 1px;
bottom: 0;
border-left: 1px solid #d5d5d6;
color: #d5d5d6;
transform-origin: 0 0;
transform: scaleX(0.5);
}
uni-modal .uni-modal__btn:first-child:after {
display: none;
}
uni-modal .uni-modal__btn_default {
color: #353535;
}
uni-modal .uni-modal__btn_primary {
color: #007aff;
}
@media (prefers-color-scheme: dark) {
uni-modal .uni-modal {
color: var(--UI-FG-0);
background-color: var(--UI-BG-2);
}
uni-modal .uni-modal__bd {
color: var(--UI-FG-1);
}
uni-modal .uni-modal__btn:active {
color: rgb(170, 170, 170);
background-color: var(--UI-BG-CLOLOR-ACTIVE);
}
uni-modal .uni-modal__ft:after,
uni-modal .uni-modal__btn:after {
color: var(--UI-BORDER-CLOLOR-1);
border-color: var(--UI-BORDER-CLOLOR-1);
}
}
</style>
src/platforms/h5/components/app/popup/toast.vue
浏览文件 @ 0ae63815
......@@ -186,4 +186,16 @@ uni-toast .uni-icon_toast.uni-loading {
uni-toast .uni-toast__content {
margin: 0 0 15px;
}
@media (prefers-color-scheme: dark) {
uni-toast .uni-toast {
background-color: #606060;
color: var(--UI-FG-0);
}
uni-toast .uni-icon_toast.uni-icon-error:before,
uni-toast .uni-icon_toast.uni-icon-success-no-circle:before {
color: rgba(255,255,255,0.9);
}
}
</style>
src/platforms/h5/components/theme.js
浏览文件 @ 0ae63815
......@@ -4,12 +4,18 @@ import {
ON_THEME_CHANGE
} from 'uni-helpers/constants'
export { getTheme }
export function onThemeChange (callback = () => { }) {
if (__uniConfig.darkmode) {
UniServiceJSBridge.on('api.' + ON_THEME_CHANGE, callback)
}
}
export function offThemeChange (callback = () => { }) {
UniServiceJSBridge.off('api.' + ON_THEME_CHANGE, callback)
}
export function parseTheme (pageStyle) {
let parsedStyle = {}
if (__uniConfig.darkmode) {
......
src/platforms/h5/service/api/base/get-browser-info.js
浏览文件 @ 0ae63815
import { isStr } from 'uni-shared'
function IEVersion () {
const userAgent = navigator.userAgent
const isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1
......@@ -22,6 +24,7 @@ function IEVersion () {
}
export function getTheme () {
if (__uniConfig.darkmode !== true) return isStr(__uniConfig.darkmode) ? __uniConfig.darkmode : 'light'
try {
return window.matchMedia('(prefers-color-scheme: light)').matches
? 'light'
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或