Darken

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>

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>

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>

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;