[Client] Improve theming 🎨

src/client/app/desktop/views/components/timeline.vue

@@ -207,7 +207,7 @@ export default Vue.extend({
 					top -4px
 					right 4px
 					font-size 10px
-					color var(--primary)
+					color var(--notificationIndicator)
 
 				&:hover
 					color var(--faceTextButtonHover)

src/client/app/desktop/views/components/ui.header.nav.vue

@@ -147,7 +147,7 @@ export default Vue.extend({
 				> [data-icon]:last-child
 					margin-left 5px
 					font-size 10px
-					color var(--primary)
+					color var(--notificationIndicator)
 
 					@media (max-width 1100px)
 						margin-left -5px

src/client/app/desktop/views/components/ui.header.notifications.vue

@@ -90,7 +90,7 @@ export default Vue.extend({
 			margin-left -5px
 			vertical-align super
 			font-size 10px
-			color var(--primary)
+			color var(--notificationIndicator)
 
 	> .pop
 		$bgcolor = var(--face)

src/client/app/mobile/views/components/ui.header.vue

@@ -159,7 +159,7 @@ export default Vue.extend({
 				left 8px
 				pointer-events none
 				font-size 10px
-				color var(--primary)
+				color var(--notificationIndicator)
 
 			> button:last-child
 				display block

src/client/app/mobile/views/components/ui.nav.vue

@@ -238,7 +238,7 @@ export default Vue.extend({
 				> i.circle
 					margin-left 6px
 					font-size 10px
-					color var(--primary)
+					color var(--notificationIndicator)
 
 				> i:last-child
 					position absolute

src/client/app/mobile/views/pages/home.vue

@@ -225,7 +225,7 @@ main
 					> .badge
 						margin-left 6px
 						font-size 10px
-						color var(--primary)
+						color var(--notificationIndicator)
 
 	> .tl
 		max-width 680px
@@ -248,7 +248,7 @@ main
 .badge
 	margin-left 6px
 	font-size 10px
-	color var(--primary)
+	color var(--notificationIndicator)
 	vertical-align middle
 
 </style>

src/client/theme/dark.json5

@@ -24,6 +24,8 @@
 		scrollbarHandle: ':lighten<5<$secondary',
 		scrollbarHandleHover: ':lighten<10<$secondary',
 
+		notificationIndicator: '$primary',
+
 		face: '$secondary',
 		faceText: '#fff',
 		faceHeader: ':lighten<5<$secondary',

src/client/theme/gruvbox-dark.json5

@@ -20,6 +20,7 @@
 		mfmMentionForeground: '#fff',
 		mfmUrl: 'rgb(69, 133, 136)',
 		mfmLink: 'rgb(104, 157, 106)',
-		mfmHashtag: 'rgb(251, 73, 52)'
+		mfmHashtag: 'rgb(251, 73, 52)',
+		notificationIndicator: 'rgb(184, 187, 38)',
 	},
 }

src/client/theme/light.json5

@@ -24,6 +24,8 @@
 		scrollbarHandle: '#00000033',
 		scrollbarHandleHover: '#00000066',
 
+		notificationIndicator: '$primary',
+
 		face: '$secondary',
 		faceText: '$text',
 		faceHeader: ':lighten<5<$secondary',

src/client/theme/monokai.json5

@@ -20,6 +20,7 @@
 		mfmMentionForeground: '#fff',
 		mfmUrl: '#66d9ef',
 		mfmLink: '#e6db74',
-		mfmHashtag: '#fd971f'
+		mfmHashtag: '#fd971f',
+		notificationIndicator: '#66d9ef',
 	},
 }