[wip] darkmode

src/client/app/desktop/script.ts

@@ -46,15 +46,28 @@ init(async (launch) => {
 
 	// Dark/Light
 	Vue.mixin({
+		data() {
+			return {
+				_darkmode_: false
+			};
+		},
+		beforeCreate() {
+			// なぜか警告が出るため
+			this._darkmode_ = false;
+		},
 		mounted() {
 			const set = () => {
-				if (!this.$el || !this.os || !this.os.i) return;
+				if (!this.$el || !this.$el.setAttribute || !this.os || !this.os.i) return;
 				if (this.os.i.clientSettings.dark) {
 					document.documentElement.setAttribute('data-darkmode', 'true');
 					this.$el.setAttribute('data-darkmode', 'true');
+					this._darkmode_ = true;
+					this.$forceUpdate();
 				} else {
 					document.documentElement.removeAttribute('data-darkmode');
 					this.$el.removeAttribute('data-darkmode');
+					this._darkmode_ = false;
+					this.$forceUpdate();
 				}
 			};
 

src/client/app/desktop/views/widgets/users.vue

 <template>
 <div class="mkw-users">
-	<template v-if="!props.compact">
-		<p class="title">%fa:users%%i18n:@title%</p>
-		<button @click="refresh" title="%i18n:@refresh%">%fa:sync%</button>
-	</template>
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-	<template v-else-if="users.length != 0">
-		<div class="user" v-for="_user in users">
-			<router-link class="avatar-anchor" :to="_user | userPage">
-				<img class="avatar" :src="`${_user.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="_user.id"/>
-			</router-link>
-			<div class="body">
-				<router-link class="name" :to="_user | userPage" v-user-preview="_user.id">{{ _user | userName }}</router-link>
-				<p class="username">@{{ _user | acct }}</p>
-			</div>
-			<mk-follow-button :user="_user"/>
+	<mk-widget-container :show-header="!props.compact">
+		<template slot="header">%fa:users%%i18n:@title%</template>
+		<button slot="func" title="%i18n:@refresh%" @click="refresh">%fa:sync%</button>
+
+		<div class="mkw-users--body" :data-darkmode="_darkmode_">
+			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+			<template v-else-if="users.length != 0">
+				<div class="user" v-for="_user in users">
+					<router-link class="avatar-anchor" :to="_user | userPage">
+						<img class="avatar" :src="`${_user.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="_user.id"/>
+					</router-link>
+					<div class="body">
+						<router-link class="name" :to="_user | userPage" v-user-preview="_user.id">{{ _user | userName }}</router-link>
+						<p class="username">@{{ _user | acct }}</p>
+					</div>
+					<mk-follow-button :user="_user"/>
+				</div>
+			</template>
+			<p class="empty" v-else>%i18n:@no-one%</p>
 		</div>
-	</template>
-	<p class="empty" v-else>%i18n:@no-one%</p>
+	</mk-widget-container>
 </div>
 </template>
 
@@ -71,43 +74,10 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-.mkw-users
-	background #fff
-	border solid 1px rgba(0, 0, 0, 0.075)
-	border-radius 6px
-
-	> .title
-		margin 0
-		padding 0 16px
-		line-height 42px
-		font-size 0.9em
-		font-weight bold
-		color #888
-		border-bottom solid 1px #eee
-
-		> [data-fa]
-			margin-right 4px
-
-	> button
-		position absolute
-		z-index 2
-		top 0
-		right 0
-		padding 0
-		width 42px
-		font-size 0.9em
-		line-height 42px
-		color #ccc
-
-		&:hover
-			color #aaa
-
-		&:active
-			color #999
-
+root(isDark)
 	> .user
 		padding 16px
-		border-bottom solid 1px #eee
+		border-bottom solid 1px isDark ? #1c2023 : #eee
 
 		&:last-child
 			border-bottom none
@@ -138,14 +108,14 @@ export default define({
 				margin 0
 				font-size 16px
 				line-height 24px
-				color #555
+				color isDark ? #fff : #555
 
 			> .username
 				display block
 				margin 0
 				font-size 15px
 				line-height 16px
-				color #ccc
+				color isDark ? #606984 : #ccc
 
 		> .mk-follow-button
 			position absolute
@@ -167,4 +137,10 @@ export default define({
 		> [data-fa]
 			margin-right 4px
 
+.mkw-users--body[data-darkmode]
+	root(true)
+
+.mkw-users--body:not([data-darkmode])
+	root(false)
+
 </style>