[Client] Improve theming :art:

10 files changed, 15 insertions, 9 deletions

diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 46d0a0915a..110eddfdae 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/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)
diff --git a/src/client/app/desktop/views/components/ui.header.nav.vue b/src/client/app/desktop/views/components/ui.header.nav.vue
index 03a5bf9484..8e78829de3 100644
--- a/src/client/app/desktop/views/components/ui.header.nav.vue
+++ b/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
diff --git a/src/client/app/desktop/views/components/ui.header.notifications.vue b/src/client/app/desktop/views/components/ui.header.notifications.vue
index ddd1b86610..a02078e4ec 100644
--- a/src/client/app/desktop/views/components/ui.header.notifications.vue
+++ b/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)
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index 6bdb24030a..7abfe5e3c8 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/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
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index 1e568c517c..c3f52a4140 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/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
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index ed057c2207..33be56fd3d 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/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>
diff --git a/src/client/theme/dark.json5 b/src/client/theme/dark.json5
index a12ffae540..fe85e94d64 100644
--- a/src/client/theme/dark.json5
+++ b/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',
diff --git a/src/client/theme/gruvbox-dark.json5 b/src/client/theme/gruvbox-dark.json5
index 93fea40638..629f0a3fdb 100644
--- a/src/client/theme/gruvbox-dark.json5
+++ b/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)',
 	},
 }
diff --git a/src/client/theme/light.json5 b/src/client/theme/light.json5
index c6a4f860b4..876306b16d 100644
--- a/src/client/theme/light.json5
+++ b/src/client/theme/light.json5
@@ -24,6 +24,8 @@
 		scrollbarHandle: '#00000033',
 		scrollbarHandleHover: '#00000066',
 
+		notificationIndicator: '$primary',
+
 		face: '$secondary',
 		faceText: '$text',
 		faceHeader: ':lighten<5<$secondary',
diff --git a/src/client/theme/monokai.json5 b/src/client/theme/monokai.json5
index a949089ba8..6ee0f875a6 100644
--- a/src/client/theme/monokai.json5
+++ b/src/client/theme/monokai.json5
@@ -20,6 +20,7 @@
 		mfmMentionForeground: '#fff',
 		mfmUrl: '#66d9ef',
 		mfmLink: '#e6db74',
-		mfmHashtag: '#fd971f'
+		mfmHashtag: '#fd971f',
+		notificationIndicator: '#66d9ef',
 	},
 }