wip

src/client/app/common/views/components/autocomplete.vue

@@ -259,9 +259,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-autocomplete
 	position fixed
 	z-index 65535
 	max-width 100%
@@ -299,7 +297,7 @@ root(isDark)
 				text-overflow ellipsis
 
 			&:hover
-				background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.1)
+				background var(--autocompleteItemHoverBg)
 
 			&[data-selected='true']
 				background var(--primary)
@@ -325,15 +323,15 @@ root(isDark)
 
 		.name
 			margin 0 8px 0 0
-			color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8)
+			color var(--autocompleteItemText)
 
 		.username
-			color isDark ? rgba(#fff, 0.3) : rgba(#000, 0.3)
+			color var(--autocompleteItemTextSub)
 
 	> .hashtags > li
 
 		.name
-			color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8)
+			color var(--autocompleteItemText)
 
 	> .emojis > li
 
@@ -343,15 +341,9 @@ root(isDark)
 			width 24px
 
 		.name
-			color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8)
+			color var(--autocompleteItemText)
 
 		.alias
 			margin 0 0 0 8px
-			color isDark ? rgba(#fff, 0.3) : rgba(#000, 0.3)
-
-.mk-autocomplete[data-darkmode]
-	root(true)
-
-.mk-autocomplete:not([data-darkmode])
-	root(false)
+			color var(--autocompleteItemTextSub)
 </style>

src/client/theme/dark.json

@@ -14,8 +14,12 @@
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
-	"reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)",
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
+
+	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
+	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
+	"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
+	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
 	"desktopHeaderBg": "#313543",
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",

src/client/theme/light.json

@@ -14,8 +14,12 @@
 	"faceDivider": "rgba(0, 0, 0, 0.082)",
 	"popupBg": "#fff",
 	"popupFg": "#586069",
-	"reactionPickerButtonHoverBg": "#eee",
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
+
+	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
+	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
+	"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",
+	"reactionPickerButtonHoverBg": "#eee",
 	"desktopHeaderBg": "#f7f7f7",
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",