From 87d17517f3e79e09e30a89dad3f94817dda424d3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 3 Mar 2018 13:47:55 +0900
Subject: [PATCH] :v:

---
 .../common/views/components/autocomplete.vue  |  2 +
 .../views/components/connect-failed.vue       |  2 +
 .../app/common/views/components/forkit.vue    | 48 +++++++++---------
 .../views/components/messaging-room.form.vue  |  2 +
 .../views/components/messaging-room.vue       |  2 +
 .../app/common/views/components/messaging.vue |  2 +
 .../common/views/components/poll-editor.vue   |  2 +
 src/web/app/common/views/components/poll.vue  |  2 +
 .../views/components/reaction-picker.vue      |  2 +
 .../app/common/views/components/signin.vue    |  2 +
 .../app/common/views/components/signup.vue    |  2 +
 .../app/common/views/components/switch.vue    |  2 +
 .../app/common/views/components/uploader.vue  |  2 +
 src/web/app/common/views/widgets/calendar.vue |  2 +
 .../app/desktop/views/components/calendar.vue |  2 +
 .../choose-file-from-drive-window.vue         |  2 +
 .../choose-folder-from-drive-window.vue       |  2 +
 .../views/components/context-menu.menu.vue    |  2 +
 .../desktop/views/components/crop-window.vue  |  2 +
 .../app/desktop/views/components/dialog.vue   |  4 ++
 .../desktop/views/components/drive.file.vue   |  2 +
 .../desktop/views/components/drive.folder.vue |  2 +
 .../app/desktop/views/components/drive.vue    |  2 +
 .../views/components/follow-button.vue        |  2 +
 src/web/app/desktop/views/components/home.vue |  2 +
 .../desktop/views/components/input-dialog.vue |  2 +
 .../app/desktop/views/components/mentions.vue |  2 +
 .../desktop/views/components/post-detail.vue  |  2 +
 .../desktop/views/components/post-form.vue    |  2 +
 .../desktop/views/components/posts.post.vue   |  2 +
 .../views/components/progress-dialog.vue      |  2 +
 .../desktop/views/components/repost-form.vue  |  2 +
 .../app/desktop/views/components/settings.vue |  2 +
 .../views/components/ui.header.account.vue    |  2 +
 .../views/components/ui.header.nav.vue        |  2 +
 .../components/ui.header.notifications.vue    |  2 +
 .../views/components/ui.header.post.vue       |  2 +
 .../views/components/ui.header.search.vue     |  2 +
 .../desktop/views/components/user-preview.vue |  2 +
 .../desktop/views/components/users-list.vue   |  2 +
 .../app/desktop/views/components/window.vue   |  2 +
 .../app/desktop/views/pages/selectdrive.vue   |  2 +
 .../desktop/views/pages/user/user.header.vue  |  2 +
 .../views/pages/user/user.timeline.vue        |  2 +
 src/web/app/desktop/views/pages/welcome.vue   |  2 +
 .../app/desktop/views/widgets/post-form.vue   |  2 +
 .../mobile/views/components/drive.file.vue    |  2 +
 .../mobile/views/components/follow-button.vue |  2 +
 .../mobile/views/components/post-detail.vue   |  2 +
 .../app/mobile/views/components/post-form.vue |  2 +
 .../mobile/views/components/posts.post.vue    |  2 +
 src/web/app/mobile/views/components/posts.vue |  2 +
 .../app/mobile/views/components/ui.header.vue |  2 +
 .../app/mobile/views/components/ui.nav.vue    |  2 +
 .../mobile/views/components/users-list.vue    |  2 +
 .../mobile/views/pages/profile-setting.vue    |  2 +
 src/web/app/mobile/views/pages/user.vue       |  2 +
 webpack/webpack.config.ts                     | 50 ++++++++++---------
 58 files changed, 165 insertions(+), 47 deletions(-)

diff --git a/src/web/app/common/views/components/autocomplete.vue b/src/web/app/common/views/components/autocomplete.vue
index 2ad951b1f8..6d7d5cd1b1 100644
--- a/src/web/app/common/views/components/autocomplete.vue
+++ b/src/web/app/common/views/components/autocomplete.vue
@@ -223,6 +223,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-autocomplete
 	position fixed
 	z-index 65535
diff --git a/src/web/app/common/views/components/connect-failed.vue b/src/web/app/common/views/components/connect-failed.vue
index b48f7cecb9..185250dbd8 100644
--- a/src/web/app/common/views/components/connect-failed.vue
+++ b/src/web/app/common/views/components/connect-failed.vue
@@ -39,6 +39,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-connect-failed
 	width 100%
 	padding 32px 18px
diff --git a/src/web/app/common/views/components/forkit.vue b/src/web/app/common/views/components/forkit.vue
index 54fc011d16..6f334b965a 100644
--- a/src/web/app/common/views/components/forkit.vue
+++ b/src/web/app/common/views/components/forkit.vue
@@ -9,32 +9,34 @@
 </template>
 
 <style lang="stylus" scoped>
-	.a
+@import '~const.styl'
+
+.a
+	display block
+	position absolute
+	top 0
+	right 0
+
+	> svg
 		display block
-		position absolute
-		top 0
-		right 0
+		//fill #151513
+		//color #fff
+		fill $theme-color
+		color $theme-color-foreground
 
-		> svg
-			display block
-			//fill #151513
-			//color #fff
-			fill $theme-color
-			color $theme-color-foreground
+		.octo-arm
+			transform-origin 130px 106px
 
-			.octo-arm
-				transform-origin 130px 106px
+	&:hover
+		.octo-arm
+			animation octocat-wave 560ms ease-in-out
 
-		&:hover
-			.octo-arm
-				animation octocat-wave 560ms ease-in-out
-
-		@keyframes octocat-wave
-			0%, 100%
-				transform rotate(0)
-			20%, 60%
-				transform rotate(-25deg)
-			40%, 80%
-				transform rotate(10deg)
+	@keyframes octocat-wave
+		0%, 100%
+			transform rotate(0)
+		20%, 60%
+			transform rotate(-25deg)
+		40%, 80%
+			transform rotate(10deg)
 
 </style>
diff --git a/src/web/app/common/views/components/messaging-room.form.vue b/src/web/app/common/views/components/messaging-room.form.vue
index edcda069a3..01886b19c8 100644
--- a/src/web/app/common/views/components/messaging-room.form.vue
+++ b/src/web/app/common/views/components/messaging-room.form.vue
@@ -195,6 +195,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-messaging-form
 	> textarea
 		cursor auto
diff --git a/src/web/app/common/views/components/messaging-room.vue b/src/web/app/common/views/components/messaging-room.vue
index f7f31c557c..0a675ba03e 100644
--- a/src/web/app/common/views/components/messaging-room.vue
+++ b/src/web/app/common/views/components/messaging-room.vue
@@ -228,6 +228,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-messaging-room
 	display flex
 	flex 1
diff --git a/src/web/app/common/views/components/messaging.vue b/src/web/app/common/views/components/messaging.vue
index ea75c90812..fcc2dbe316 100644
--- a/src/web/app/common/views/components/messaging.vue
+++ b/src/web/app/common/views/components/messaging.vue
@@ -165,6 +165,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-messaging
 
 	&[data-compact]
diff --git a/src/web/app/common/views/components/poll-editor.vue b/src/web/app/common/views/components/poll-editor.vue
index 20a334d3c5..47d901d7b1 100644
--- a/src/web/app/common/views/components/poll-editor.vue
+++ b/src/web/app/common/views/components/poll-editor.vue
@@ -67,6 +67,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-poll-editor
 	padding 8px
 
diff --git a/src/web/app/common/views/components/poll.vue b/src/web/app/common/views/components/poll.vue
index 556d8ebf6c..8156c8bc58 100644
--- a/src/web/app/common/views/components/poll.vue
+++ b/src/web/app/common/views/components/poll.vue
@@ -66,6 +66,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-poll
 
 	> ul
diff --git a/src/web/app/common/views/components/reaction-picker.vue b/src/web/app/common/views/components/reaction-picker.vue
index f3731cd632..0ba15ba731 100644
--- a/src/web/app/common/views/components/reaction-picker.vue
+++ b/src/web/app/common/views/components/reaction-picker.vue
@@ -106,6 +106,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 $border-color = rgba(27, 31, 35, 0.15)
 
 .mk-reaction-picker
diff --git a/src/web/app/common/views/components/signin.vue b/src/web/app/common/views/components/signin.vue
index 31243e99a1..1738d0df7d 100644
--- a/src/web/app/common/views/components/signin.vue
+++ b/src/web/app/common/views/components/signin.vue
@@ -53,6 +53,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-signin
 	&.signing
 		&, *
diff --git a/src/web/app/common/views/components/signup.vue b/src/web/app/common/views/components/signup.vue
index 1fdc49a181..2ca1687be1 100644
--- a/src/web/app/common/views/components/signup.vue
+++ b/src/web/app/common/views/components/signup.vue
@@ -153,6 +153,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-signup
 	min-width 302px
 
diff --git a/src/web/app/common/views/components/switch.vue b/src/web/app/common/views/components/switch.vue
index e6cdfa152c..2ac57be6fc 100644
--- a/src/web/app/common/views/components/switch.vue
+++ b/src/web/app/common/views/components/switch.vue
@@ -84,6 +84,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-switch
 	display flex
 	margin 8px 0
diff --git a/src/web/app/common/views/components/uploader.vue b/src/web/app/common/views/components/uploader.vue
index 6367b69973..6465ad35e9 100644
--- a/src/web/app/common/views/components/uploader.vue
+++ b/src/web/app/common/views/components/uploader.vue
@@ -81,6 +81,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-uploader
 	overflow auto
 
diff --git a/src/web/app/common/views/widgets/calendar.vue b/src/web/app/common/views/widgets/calendar.vue
index 2bcdb07f9e..03f69a7597 100644
--- a/src/web/app/common/views/widgets/calendar.vue
+++ b/src/web/app/common/views/widgets/calendar.vue
@@ -107,6 +107,8 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mkw-calendar
 	padding 16px 0
 	color #777
diff --git a/src/web/app/desktop/views/components/calendar.vue b/src/web/app/desktop/views/components/calendar.vue
index 08b08f8d42..71aab2e8a5 100644
--- a/src/web/app/desktop/views/components/calendar.vue
+++ b/src/web/app/desktop/views/components/calendar.vue
@@ -131,6 +131,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-calendar
 	color #777
 	background #fff
diff --git a/src/web/app/desktop/views/components/choose-file-from-drive-window.vue b/src/web/app/desktop/views/components/choose-file-from-drive-window.vue
index 2322827459..9a1e9c958a 100644
--- a/src/web/app/desktop/views/components/choose-file-from-drive-window.vue
+++ b/src/web/app/desktop/views/components/choose-file-from-drive-window.vue
@@ -59,6 +59,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" module>
+@import '~const.styl'
+
 .title
 	> [data-fa]
 		margin-right 4px
diff --git a/src/web/app/desktop/views/components/choose-folder-from-drive-window.vue b/src/web/app/desktop/views/components/choose-folder-from-drive-window.vue
index 8111ffcf0d..f99533176d 100644
--- a/src/web/app/desktop/views/components/choose-folder-from-drive-window.vue
+++ b/src/web/app/desktop/views/components/choose-folder-from-drive-window.vue
@@ -37,6 +37,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" module>
+@import '~const.styl'
+
 .title
 	> [data-fa]
 		margin-right 4px
diff --git a/src/web/app/desktop/views/components/context-menu.menu.vue b/src/web/app/desktop/views/components/context-menu.menu.vue
index e2c34a5915..6359dbf1b4 100644
--- a/src/web/app/desktop/views/components/context-menu.menu.vue
+++ b/src/web/app/desktop/views/components/context-menu.menu.vue
@@ -29,6 +29,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .menu
 	$width = 240px
 	$item-height = 38px
diff --git a/src/web/app/desktop/views/components/crop-window.vue b/src/web/app/desktop/views/components/crop-window.vue
index 27d89a9ff9..eb6a55d959 100644
--- a/src/web/app/desktop/views/components/crop-window.vue
+++ b/src/web/app/desktop/views/components/crop-window.vue
@@ -61,6 +61,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" module>
+@import '~const.styl'
+
 .header
 	> [data-fa]
 		margin-right 4px
diff --git a/src/web/app/desktop/views/components/dialog.vue b/src/web/app/desktop/views/components/dialog.vue
index e89e8654e6..fa17e4a9d2 100644
--- a/src/web/app/desktop/views/components/dialog.vue
+++ b/src/web/app/desktop/views/components/dialog.vue
@@ -91,6 +91,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-dialog
 	> .bg
 		display block
@@ -151,6 +153,8 @@ export default Vue.extend({
 </style>
 
 <style lang="stylus" module>
+@import '~const.styl'
+
 .header
 	margin 1em 0
 	color $theme-color
diff --git a/src/web/app/desktop/views/components/drive.file.vue b/src/web/app/desktop/views/components/drive.file.vue
index 6390ed3514..924ff7052d 100644
--- a/src/web/app/desktop/views/components/drive.file.vue
+++ b/src/web/app/desktop/views/components/drive.file.vue
@@ -184,6 +184,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .root.file
 	padding 8px 0 0 0
 	height 180px
diff --git a/src/web/app/desktop/views/components/drive.folder.vue b/src/web/app/desktop/views/components/drive.folder.vue
index d5f4b11ee1..a8a9a01370 100644
--- a/src/web/app/desktop/views/components/drive.folder.vue
+++ b/src/web/app/desktop/views/components/drive.folder.vue
@@ -218,6 +218,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .root.folder
 	padding 8px
 	height 64px
diff --git a/src/web/app/desktop/views/components/drive.vue b/src/web/app/desktop/views/components/drive.vue
index 1d84c24098..99036bed83 100644
--- a/src/web/app/desktop/views/components/drive.vue
+++ b/src/web/app/desktop/views/components/drive.vue
@@ -568,6 +568,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-drive
 
 	> nav
diff --git a/src/web/app/desktop/views/components/follow-button.vue b/src/web/app/desktop/views/components/follow-button.vue
index 9056307bbf..fc4f871888 100644
--- a/src/web/app/desktop/views/components/follow-button.vue
+++ b/src/web/app/desktop/views/components/follow-button.vue
@@ -92,6 +92,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-follow-button
 	display block
 	cursor pointer
diff --git a/src/web/app/desktop/views/components/home.vue b/src/web/app/desktop/views/components/home.vue
index a7c61f4c57..562b22d11d 100644
--- a/src/web/app/desktop/views/components/home.vue
+++ b/src/web/app/desktop/views/components/home.vue
@@ -214,6 +214,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-home
 	display block
 
diff --git a/src/web/app/desktop/views/components/input-dialog.vue b/src/web/app/desktop/views/components/input-dialog.vue
index a735ce0f31..e27bc8da88 100644
--- a/src/web/app/desktop/views/components/input-dialog.vue
+++ b/src/web/app/desktop/views/components/input-dialog.vue
@@ -77,6 +77,8 @@ export default Vue.extend({
 
 
 <style lang="stylus" module>
+@import '~const.styl'
+
 .header
 	> [data-fa]
 		margin-right 4px
diff --git a/src/web/app/desktop/views/components/mentions.vue b/src/web/app/desktop/views/components/mentions.vue
index 28ba59f2b1..47066e813f 100644
--- a/src/web/app/desktop/views/components/mentions.vue
+++ b/src/web/app/desktop/views/components/mentions.vue
@@ -81,6 +81,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-mentions
 	background #fff
 	border solid 1px rgba(0, 0, 0, 0.075)
diff --git a/src/web/app/desktop/views/components/post-detail.vue b/src/web/app/desktop/views/components/post-detail.vue
index b410531336..32d401351d 100644
--- a/src/web/app/desktop/views/components/post-detail.vue
+++ b/src/web/app/desktop/views/components/post-detail.vue
@@ -177,6 +177,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-post-detail
 	margin 0
 	padding 0
diff --git a/src/web/app/desktop/views/components/post-form.vue b/src/web/app/desktop/views/components/post-form.vue
index b94b0f8533..1f98aed08c 100644
--- a/src/web/app/desktop/views/components/post-form.vue
+++ b/src/web/app/desktop/views/components/post-form.vue
@@ -250,6 +250,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-post-form
 	display block
 	padding 16px
diff --git a/src/web/app/desktop/views/components/posts.post.vue b/src/web/app/desktop/views/components/posts.post.vue
index 458e244b3f..52531818ef 100644
--- a/src/web/app/desktop/views/components/posts.post.vue
+++ b/src/web/app/desktop/views/components/posts.post.vue
@@ -256,6 +256,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .post
 	margin 0
 	padding 0
diff --git a/src/web/app/desktop/views/components/progress-dialog.vue b/src/web/app/desktop/views/components/progress-dialog.vue
index ed49b19d71..a4292e1aec 100644
--- a/src/web/app/desktop/views/components/progress-dialog.vue
+++ b/src/web/app/desktop/views/components/progress-dialog.vue
@@ -37,6 +37,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" module>
+@import '~const.styl'
+
 .body
 	padding 18px 24px 24px 24px
 
diff --git a/src/web/app/desktop/views/components/repost-form.vue b/src/web/app/desktop/views/components/repost-form.vue
index 5bf7eaaf03..f2774b817c 100644
--- a/src/web/app/desktop/views/components/repost-form.vue
+++ b/src/web/app/desktop/views/components/repost-form.vue
@@ -57,6 +57,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-repost-form
 
 	> .mk-post-preview
diff --git a/src/web/app/desktop/views/components/settings.vue b/src/web/app/desktop/views/components/settings.vue
index e07f060e11..04004d2ff6 100644
--- a/src/web/app/desktop/views/components/settings.vue
+++ b/src/web/app/desktop/views/components/settings.vue
@@ -222,6 +222,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-settings
 	display flex
 	width 100%
diff --git a/src/web/app/desktop/views/components/ui.header.account.vue b/src/web/app/desktop/views/components/ui.header.account.vue
index ad65333393..2cc2c1867f 100644
--- a/src/web/app/desktop/views/components/ui.header.account.vue
+++ b/src/web/app/desktop/views/components/ui.header.account.vue
@@ -84,6 +84,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .account
 	> .header
 		display block
diff --git a/src/web/app/desktop/views/components/ui.header.nav.vue b/src/web/app/desktop/views/components/ui.header.nav.vue
index c102d5b3f5..a5b6ecd6fa 100644
--- a/src/web/app/desktop/views/components/ui.header.nav.vue
+++ b/src/web/app/desktop/views/components/ui.header.nav.vue
@@ -86,6 +86,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .nav
 	display inline-block
 	margin 0
diff --git a/src/web/app/desktop/views/components/ui.header.notifications.vue b/src/web/app/desktop/views/components/ui.header.notifications.vue
index 5467dda856..e829418d18 100644
--- a/src/web/app/desktop/views/components/ui.header.notifications.vue
+++ b/src/web/app/desktop/views/components/ui.header.notifications.vue
@@ -82,6 +82,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .notifications
 
 	> button
diff --git a/src/web/app/desktop/views/components/ui.header.post.vue b/src/web/app/desktop/views/components/ui.header.post.vue
index e8ed380f06..c2f0e07dd3 100644
--- a/src/web/app/desktop/views/components/ui.header.post.vue
+++ b/src/web/app/desktop/views/components/ui.header.post.vue
@@ -17,6 +17,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .post
 	display inline-block
 	padding 8px
diff --git a/src/web/app/desktop/views/components/ui.header.search.vue b/src/web/app/desktop/views/components/ui.header.search.vue
index c063de6bb0..86215556ad 100644
--- a/src/web/app/desktop/views/components/ui.header.search.vue
+++ b/src/web/app/desktop/views/components/ui.header.search.vue
@@ -24,6 +24,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .search
 
 	> [data-fa]
diff --git a/src/web/app/desktop/views/components/user-preview.vue b/src/web/app/desktop/views/components/user-preview.vue
index 2a4bd7cf75..cfb95961da 100644
--- a/src/web/app/desktop/views/components/user-preview.vue
+++ b/src/web/app/desktop/views/components/user-preview.vue
@@ -83,6 +83,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-user-preview
 	position absolute
 	z-index 2048
diff --git a/src/web/app/desktop/views/components/users-list.vue b/src/web/app/desktop/views/components/users-list.vue
index fd15f478d2..a08e76f573 100644
--- a/src/web/app/desktop/views/components/users-list.vue
+++ b/src/web/app/desktop/views/components/users-list.vue
@@ -69,6 +69,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-users-list
 	height 100%
 	background #fff
diff --git a/src/web/app/desktop/views/components/window.vue b/src/web/app/desktop/views/components/window.vue
index 5b08bc87e2..a92cfd0b6b 100644
--- a/src/web/app/desktop/views/components/window.vue
+++ b/src/web/app/desktop/views/components/window.vue
@@ -425,6 +425,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-window
 	display block
 
diff --git a/src/web/app/desktop/views/pages/selectdrive.vue b/src/web/app/desktop/views/pages/selectdrive.vue
index b1f00da2b6..4f0b86014b 100644
--- a/src/web/app/desktop/views/pages/selectdrive.vue
+++ b/src/web/app/desktop/views/pages/selectdrive.vue
@@ -54,6 +54,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mkp-selectdrive
 	display block
 	position fixed
diff --git a/src/web/app/desktop/views/pages/user/user.header.vue b/src/web/app/desktop/views/pages/user/user.header.vue
index 6c8375f163..b2119e52e2 100644
--- a/src/web/app/desktop/views/pages/user/user.header.vue
+++ b/src/web/app/desktop/views/pages/user/user.header.vue
@@ -61,6 +61,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .header
 	$banner-height = 320px
 	$footer-height = 58px
diff --git a/src/web/app/desktop/views/pages/user/user.timeline.vue b/src/web/app/desktop/views/pages/user/user.timeline.vue
index d8fff6ce6b..60eef8951b 100644
--- a/src/web/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/web/app/desktop/views/pages/user/user.timeline.vue
@@ -97,6 +97,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .timeline
 	background #fff
 
diff --git a/src/web/app/desktop/views/pages/welcome.vue b/src/web/app/desktop/views/pages/welcome.vue
index f359ce008e..9f69305204 100644
--- a/src/web/app/desktop/views/pages/welcome.vue
+++ b/src/web/app/desktop/views/pages/welcome.vue
@@ -57,6 +57,8 @@ export default Vue.extend({
 </style>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-welcome
 	display flex
 	flex-direction column
diff --git a/src/web/app/desktop/views/widgets/post-form.vue b/src/web/app/desktop/views/widgets/post-form.vue
index e51b4f3577..cf7fd1f2b2 100644
--- a/src/web/app/desktop/views/widgets/post-form.vue
+++ b/src/web/app/desktop/views/widgets/post-form.vue
@@ -54,6 +54,8 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mkw-post-form
 	background #fff
 	overflow hidden
diff --git a/src/web/app/mobile/views/components/drive.file.vue b/src/web/app/mobile/views/components/drive.file.vue
index dfc69e249f..a41d9bcfdc 100644
--- a/src/web/app/mobile/views/components/drive.file.vue
+++ b/src/web/app/mobile/views/components/drive.file.vue
@@ -67,6 +67,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .file
 	display block
 	text-decoration none !important
diff --git a/src/web/app/mobile/views/components/follow-button.vue b/src/web/app/mobile/views/components/follow-button.vue
index 2d45ea215d..fb6eaa39c6 100644
--- a/src/web/app/mobile/views/components/follow-button.vue
+++ b/src/web/app/mobile/views/components/follow-button.vue
@@ -82,6 +82,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-follow-button
 	display block
 	user-select none
diff --git a/src/web/app/mobile/views/components/post-detail.vue b/src/web/app/mobile/views/components/post-detail.vue
index 05ee071230..7e6217f604 100644
--- a/src/web/app/mobile/views/components/post-detail.vue
+++ b/src/web/app/mobile/views/components/post-detail.vue
@@ -175,6 +175,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-post-detail
 	overflow hidden
 	margin 0 auto
diff --git a/src/web/app/mobile/views/components/post-form.vue b/src/web/app/mobile/views/components/post-form.vue
index 7a6eb77419..63b75b92f0 100644
--- a/src/web/app/mobile/views/components/post-form.vue
+++ b/src/web/app/mobile/views/components/post-form.vue
@@ -115,6 +115,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-post-form
 	max-width 500px
 	width calc(100% - 16px)
diff --git a/src/web/app/mobile/views/components/posts.post.vue b/src/web/app/mobile/views/components/posts.post.vue
index 3038cdb0ed..39bb80457b 100644
--- a/src/web/app/mobile/views/components/posts.post.vue
+++ b/src/web/app/mobile/views/components/posts.post.vue
@@ -195,6 +195,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .post
 	font-size 12px
 	border-bottom solid 1px #eaeaea
diff --git a/src/web/app/mobile/views/components/posts.vue b/src/web/app/mobile/views/components/posts.vue
index 34fb0749a2..9a9f9a3133 100644
--- a/src/web/app/mobile/views/components/posts.vue
+++ b/src/web/app/mobile/views/components/posts.vue
@@ -49,6 +49,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-posts
 	background #fff
 	border-radius 8px
diff --git a/src/web/app/mobile/views/components/ui.header.vue b/src/web/app/mobile/views/components/ui.header.vue
index bf78334204..d07977cf53 100644
--- a/src/web/app/mobile/views/components/ui.header.vue
+++ b/src/web/app/mobile/views/components/ui.header.vue
@@ -128,6 +128,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .header
 	$height = 48px
 
diff --git a/src/web/app/mobile/views/components/ui.nav.vue b/src/web/app/mobile/views/components/ui.nav.vue
index a3c0042c30..62ea83526f 100644
--- a/src/web/app/mobile/views/components/ui.nav.vue
+++ b/src/web/app/mobile/views/components/ui.nav.vue
@@ -109,6 +109,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .nav
 	.backdrop
 		position fixed
diff --git a/src/web/app/mobile/views/components/users-list.vue b/src/web/app/mobile/views/components/users-list.vue
index d6c6261354..b11e4549d6 100644
--- a/src/web/app/mobile/views/components/users-list.vue
+++ b/src/web/app/mobile/views/components/users-list.vue
@@ -65,6 +65,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 .mk-users-list
 
 	> nav
diff --git a/src/web/app/mobile/views/pages/profile-setting.vue b/src/web/app/mobile/views/pages/profile-setting.vue
index 432a850e46..f25d4bbe8d 100644
--- a/src/web/app/mobile/views/pages/profile-setting.vue
+++ b/src/web/app/mobile/views/pages/profile-setting.vue
@@ -108,6 +108,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" module>
+@import '~const.styl'
+
 .content
 	margin 8px auto
 	max-width 500px
diff --git a/src/web/app/mobile/views/pages/user.vue b/src/web/app/mobile/views/pages/user.vue
index ae2fbe85d9..90f49a99a4 100644
--- a/src/web/app/mobile/views/pages/user.vue
+++ b/src/web/app/mobile/views/pages/user.vue
@@ -105,6 +105,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+@import '~const.styl'
+
 main
 	> header
 		box-shadow 0 4px 4px rgba(0, 0, 0, 0.3)
diff --git a/webpack/webpack.config.ts b/webpack/webpack.config.ts
index a4ef75d8ed..c4ef4b90f5 100644
--- a/webpack/webpack.config.ts
+++ b/webpack/webpack.config.ts
@@ -72,20 +72,6 @@ module.exports = Object.keys(langs).map(lang => {
 						search: /%base64:(.+?)%/g.toString(),
 						replace: 'base64replacement'
 					}
-				}, {
-					loader: 'webpack-replace-loader',
-					options: {
-						search: '$theme-color',
-						replace: constants.themeColor,
-						attr: 'g'
-					}
-				}, {
-					loader: 'webpack-replace-loader',
-					query: {
-						search: '$theme-color-foreground',
-						replace: constants.themeColorForeground,
-						attr: 'g'
-					}
 				}, {
 					loader: 'replace',
 					query: {
@@ -108,10 +94,16 @@ module.exports = Object.keys(langs).map(lang => {
 			}, {
 				test: /\.styl$/,
 				exclude: /node_modules/,
-				use: [
-					{ loader: 'style-loader' },
-					{ loader: 'css-loader' },
-					{ loader: 'stylus-loader' }
+				use: [{
+					loader: 'style-loader'
+				}, {
+					loader: 'css-loader',
+					options: {
+						minimize: true
+					}
+				}, {
+					loader: 'stylus-loader'
+				}
 				]
 			}, {
 				test: /\.scss$/,
@@ -119,7 +111,10 @@ module.exports = Object.keys(langs).map(lang => {
 				use: [{
 					loader: 'style-loader'
 				}, {
-					loader: 'css-loader'
+					loader: 'css-loader',
+					options: {
+						minimize: true
+					}
 				}, {
 					loader: 'sass-loader',
 					options: {
@@ -128,10 +123,14 @@ module.exports = Object.keys(langs).map(lang => {
 				}]
 			}, {
 				test: /\.css$/,
-				use: [
-					{ loader: 'style-loader' },
-					{ loader: 'css-loader' }
-				]
+				use: [{
+					loader: 'style-loader'
+				}, {
+					loader: 'css-loader',
+					options: {
+						minimize: true
+					}
+				}]
 			}, {
 				test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
 				loader: 'url-loader'
@@ -165,7 +164,10 @@ module.exports = Object.keys(langs).map(lang => {
 		resolve: {
 			extensions: [
 				'.js', '.ts', '.json'
-			]
+			],
+			alias: {
+				'const.styl': __dirname + '/../src/web/const.styl'
+			}
 		},
 		resolveLoader: {
 			modules: ['node_modules', './webpack/loaders']