[Client] Improve theme 🎨

src/client/app/common/views/components/ui/radio.vue

@@ -64,10 +64,10 @@ export default Vue.extend({
 
 	&.checked
 		> .button
-			border-color var(--primary)
+			border-color var(--radioActive)
 
 			&:after
-				background-color var(--primary)
+				background-color var(--radioActive)
 				transform scale(1)
 				opacity 1
 

src/client/app/common/views/components/ui/switch.vue

@@ -77,11 +77,11 @@ export default Vue.extend({
 
 	&.checked
 		> .button
-			background-color var(--primaryAlpha04)
-			border-color var(--primaryAlpha04)
+			background-color var(--switchActiveTrack)
+			border-color var(--switchActiveTrack)
 
 			> *
-				background-color var(--primary)
+				background-color var(--switchActive)
 				transform translateX(14px)
 
 	> input

src/client/style.styl

@@ -22,7 +22,7 @@ html, body
 
 a
 	text-decoration none
-	color var(--primary)
+	color var(--link)
 	cursor pointer
 
 	&:hover
@@ -33,7 +33,7 @@ a
 
 @css {
 	a {
-		tap-highlight-color: var(--primaryAlpha07) !important;
-		-webkit-tap-highlight-color: var(--primaryAlpha07) !important;
+		tap-highlight-color: var(--linkTapHighlight) !important;
+		-webkit-tap-highlight-color: var(--linkTapHighlight) !important;
 	}
 }

src/client/theme/dark.json5

@@ -24,8 +24,15 @@
 		scrollbarHandle: ':lighten<5<$secondary',
 		scrollbarHandleHover: ':lighten<10<$secondary',
 
+		link: '$primary',
+		linkTapHighlight: ':alpha<0.7<@link',
+
 		notificationIndicator: '$primary',
 
+		switchActive: '$primary',
+		switchActiveTrack: ':alpha<0.4<@switchActive',
+		radioActive: '$primary',
+
 		face: '$secondary',
 		faceText: '#fff',
 		faceHeader: ':lighten<5<$secondary',

src/client/theme/gruvbox-dark.json5

@@ -22,5 +22,8 @@
 		mfmLink: 'rgb(104, 157, 106)',
 		mfmHashtag: 'rgb(251, 73, 52)',
 		notificationIndicator: 'rgb(184, 187, 38)',
+		switchActive: 'rgb(254, 128, 25)',
+		radioActive: 'rgb(131, 165, 152)',
+		link: 'rgb(104, 157, 106)',
 	},
 }

src/client/theme/light.json5

@@ -24,8 +24,15 @@
 		scrollbarHandle: '#00000033',
 		scrollbarHandleHover: '#00000066',
 
+		link: '$primary',
+		linkTapHighlight: ':alpha<0.7<@link',
+
 		notificationIndicator: '$primary',
 
+		switchActive: '$primary',
+		switchActiveTrack: ':alpha<0.4<@switchActive',
+		radioActive: '$primary',
+
 		face: '$secondary',
 		faceText: '$text',
 		faceHeader: ':lighten<5<$secondary',

src/client/theme/monokai.json5

@@ -22,5 +22,8 @@
 		mfmLink: '#e6db74',
 		mfmHashtag: '#fd971f',
 		notificationIndicator: '#66d9ef',
+		switchActive: 'rgb(166, 226, 46)',
+		radioActive: '#fd971f',
+		link: '#e6db74',
 	},
 }