diff options
Diffstat (limited to 'src')
4 files changed, 58 insertions, 18 deletions
diff --git a/src/client/app/common/views/components/messaging-room.form.vue b/src/client/app/common/views/components/messaging-room.form.vue index 32a43ace57..050906cf44 100644 --- a/src/client/app/common/views/components/messaging-room.form.vue +++ b/src/client/app/common/views/components/messaging-room.form.vue @@ -197,7 +197,7 @@ export default Vue.extend({ <style lang="stylus" scoped> @import '~const.styl' -.mk-messaging-form +root(isDark) > textarea cursor auto display block @@ -209,10 +209,10 @@ export default Vue.extend({ padding 8px resize none font-size 1em - color #000 + color isDark ? #fff : #000 outline none border none - border-top solid 1px #eee + border-top solid 1px isDark ? #4b5056 : #eee border-radius 0 box-shadow none background transparent @@ -302,4 +302,10 @@ export default Vue.extend({ input[type=file] display none +.mk-messaging-form[data-darkmode] + root(true) + +.mk-messaging-form:not([data-darkmode]) + root(false) + </style> diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue index ba0ab3209f..ef39199dc4 100644 --- a/src/client/app/common/views/components/messaging-room.message.vue +++ b/src/client/app/common/views/components/messaging-room.message.vue @@ -59,8 +59,10 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -.message - $me-balloon-color = #23A7B6 +@import '~const.styl' + +root(isDark) + $me-balloon-color = $theme-color padding 10px 12px 10px 12px background-color transparent @@ -126,7 +128,7 @@ export default Vue.extend({ bottom -4px left -12px margin 0 - color rgba(#000, 0.5) + color isDark ? rgba(#fff, 0.5) : rgba(#000, 0.5) font-size 11px > .content @@ -187,7 +189,7 @@ export default Vue.extend({ display block margin 2px 0 0 0 font-size 10px - color rgba(#000, 0.4) + color isDark ? rgba(#fff, 0.4) : rgba(#000, 0.4) > [data-fa] margin-left 4px @@ -200,8 +202,9 @@ export default Vue.extend({ padding-left 66px > .balloon + $color = isDark ? #2d3338 : #eee float left - background #eee + background $color &[data-no-text] background transparent @@ -209,10 +212,15 @@ export default Vue.extend({ &:not([data-no-text]):before left -14px border-top solid 8px transparent - border-right solid 8px #eee + border-right solid 8px $color border-bottom solid 8px transparent border-left solid 8px transparent + > .content + > .text + if isDark + color #fff + > footer text-align left @@ -241,7 +249,7 @@ export default Vue.extend({ > .content > p.is-deleted - color rgba(255, 255, 255, 0.5) + color rgba(#fff, 0.5) > .text >>> &, * @@ -254,4 +262,10 @@ export default Vue.extend({ > .baloon opacity 0.5 +.message[data-darkmode] + root(true) + +.message:not([data-darkmode]) + root(false) + </style> diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue index 496d66a826..34280d7a22 100644 --- a/src/client/app/common/views/components/messaging-room.vue +++ b/src/client/app/common/views/components/messaging-room.vue @@ -244,11 +244,12 @@ export default Vue.extend({ <style lang="stylus" scoped> @import '~const.styl' -.mk-messaging-room +root(isDark) display flex flex 1 flex-direction column height 100% + background isDark ? #191b22 : #fff > .stream width 100% @@ -273,7 +274,7 @@ export default Vue.extend({ padding 16px 8px 8px 8px text-align center font-size 0.8em - color rgba(#000, 0.4) + color rgba(isDark ? #fff : #000, 0.4) [data-fa] margin-right 4px @@ -284,7 +285,7 @@ export default Vue.extend({ padding 16px text-align center font-size 0.8em - color rgba(#000, 0.4) + color rgba(isDark ? #fff : #000, 0.4) [data-fa] margin-right 4px @@ -328,7 +329,7 @@ export default Vue.extend({ left 0 right 0 margin 0 auto - background rgba(#000, 0.1) + background rgba(isDark ? #fff : #000, 0.1) > span display inline-block @@ -337,7 +338,7 @@ export default Vue.extend({ //font-weight bold line-height 32px color rgba(#000, 0.3) - background #fff + background isDark ? #191b22 : #fff > footer position -webkit-sticky @@ -348,7 +349,7 @@ export default Vue.extend({ max-width 600px margin 0 auto padding 0 - background rgba(255, 255, 255, 0.95) + background rgba(isDark ? #282c37 : #fff, 0.95) background-clip content-box > .new-message @@ -389,4 +390,10 @@ export default Vue.extend({ transition opacity 0.5s opacity 0 +.mk-messaging-room[data-darkmode] + root(true) + +.mk-messaging-room:not([data-darkmode]) + root(false) + </style> diff --git a/src/client/app/mobile/views/pages/messaging-room.vue b/src/client/app/mobile/views/pages/messaging-room.vue index c26a9b735e..7fbfa056d1 100644 --- a/src/client/app/mobile/views/pages/messaging-room.vue +++ b/src/client/app/mobile/views/pages/messaging-room.vue @@ -16,16 +16,29 @@ export default Vue.extend({ data() { return { fetching: true, - user: null + user: null, + unwatchDarkmode: null }; }, watch: { $route: 'fetch' }, created() { - document.documentElement.style.background = '#fff'; + const applyBg = v => + document.documentElement.style.setProperty('background', v ? '#191b22' : '#fff', 'important'); + + this.$nextTick(() => applyBg(this.$store.state.device.darkmode)); + + this.unwatchDarkmode = this.$store.watch(s => { + return s.device.darkmode; + }, applyBg); + this.fetch(); }, + beforeDestroy() { + document.documentElement.style.removeProperty('background'); + this.unwatchDarkmode(); + }, methods: { fetch() { this.fetching = true; |