Skip to content

U
uni-app

DCloud / uni-app
4 个月 前同步成功

通知 725
Star 38705
Fork 3642
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

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