From 46718f92f372b76fef6bd6af441270fff9f3085a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 23 May 2018 15:48:41 +0900
Subject: [PATCH] :art:

---
 assets/title-dark.svg                         |  3 ++
 .../app/desktop/views/pages/welcome.vue       | 34 +++++++++++++++----
 2 files changed, 30 insertions(+), 7 deletions(-)
 create mode 100644 assets/title-dark.svg

diff --git a/assets/title-dark.svg b/assets/title-dark.svg
new file mode 100644
index 000000000..194741e67
--- /dev/null
+++ b/assets/title-dark.svg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:75266a683d673ae75ae34b7f02de128960b29f21f768c95f0079011f181d45f5
+size 13034
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index fb98f6974..bb3653f40 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -1,7 +1,11 @@
 <template>
 <div class="mk-welcome">
+	<button @click="dark">
+		<template v-if="_darkmode_">%fa:moon%</template>
+		<template v-else>%fa:R moon%</template>
+	</button>
 	<main>
-		<img src="assets/title.svg" alt="Misskey">
+		<img :src="_darkmode_ ? 'assets/title-dark.svg' : 'assets/title.svg'" alt="Misskey">
 		<p><button class="signup" @click="signup">%i18n:@signup-button%</button><button class="signin" @click="signin">%i18n:@signin-button%</button></p>
 
 		<div class="tl">
@@ -44,6 +48,9 @@ export default Vue.extend({
 		},
 		signin() {
 			this.$modal.show('signin');
+		},
+		dark() {
+			(this as any)._updateDarkmode_(!(this as any)._darkmode_);
 		}
 	}
 });
@@ -59,18 +66,25 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-@import url('https://fonts.googleapis.com/css?family=Sarpanch:700')
-
-.mk-welcome
+root(isDark)
 	display flex
 	flex-direction column
 	flex 1
 
+	> button
+		position absolute
+		z-index 1
+		top 0
+		left 0
+		padding 16px
+		font-size 18px
+		color isDark ? #fff : #555
+
 	> main
 		flex 1
 		padding 64px 0 0 0
 		text-align center
-		color #555
+		color isDark ? #9aa4b3 : #555
 
 		> img
 			width 350px
@@ -102,7 +116,7 @@ export default Vue.extend({
 
 			.signin
 				&:hover
-					color #000
+					color isDark ? #fff : #000
 
 		> .tl
 			margin 32px auto 0 auto
@@ -149,7 +163,7 @@ export default Vue.extend({
 
 	> footer
 		font-size 12px
-		color #949ea5
+		color isDark ? #949ea5 : #737c82
 
 		> div
 			margin 0 auto
@@ -161,6 +175,12 @@ export default Vue.extend({
 				font-size 10px
 				opacity 0.7
 
+.mk-welcome[data-darkmode]
+	root(true)
+
+.mk-welcome:not([data-darkmode])
+	root(false)
+
 </style>
 
 <style lang="stylus" module>