diff --git a/src/client/app.vue b/src/client/app.vue
index 233b2b17d4..cefde7ab9b 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -877,7 +877,7 @@ export default Vue.extend({
 					z-index: 1;
 					padding-top: 8px;
 					padding-bottom: 8px;
-					background: var(--wboyroyc);
+					background: var(--X14);
 					-webkit-backdrop-filter: blur(8px);
 					backdrop-filter: blur(8px);
 				}
@@ -1082,7 +1082,7 @@ export default Vue.extend({
 		display: flex;
 		width: 100%;
 		box-sizing: border-box;
-		background: linear-gradient(0deg, var(--bg), var(--bonzsgfz));
+		background: linear-gradient(0deg, var(--bg), var(--X1));
 
 		@media (max-width: 500px) {
 			padding: 0 16px 16px 16px;
@@ -1126,7 +1126,7 @@ export default Vue.extend({
 				color: var(--fg);
 
 				&:hover {
-					background: var(--pcncwizz);
+					background: var(--X2);
 				}
 
 				> i {
diff --git a/src/client/components/autocomplete.vue b/src/client/components/autocomplete.vue
index f6cf3f45ed..e77b0d1a99 100644
--- a/src/client/components/autocomplete.vue
+++ b/src/client/components/autocomplete.vue
@@ -426,7 +426,7 @@ export default Vue.extend({
 			}
 
 			&:hover {
-				background: var(--yrnqrguo);
+				background: var(--X3);
 			}
 
 			&[data-selected='true'] {
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index 444bf229e0..392dd8c48b 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -713,7 +713,7 @@ export default Vue.extend({
 					margin-right: 14px;
 					padding: 8px 0 8px 8px;
 					border-radius: 8px;
-					background: var(--nwjktjjq);
+					background: var(--X4);
 
 					> button {
 						padding: 4px 8px;
@@ -795,7 +795,7 @@ export default Vue.extend({
 				border-radius: 6px;
 
 				&:hover {
-					background: var(--geavgsxy);
+					background: var(--X5);
 				}
 
 				&.active {
diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue
index 15289c820e..e5abf37be3 100644
--- a/src/client/components/ui/button.vue
+++ b/src/client/components/ui/button.vue
@@ -126,11 +126,11 @@ export default Vue.extend({
 		background: var(--accent);
 
 		&:not(:disabled):hover {
-			background: var(--jkhztclx);
+			background: var(--X8);
 		}
 
 		&:not(:disabled):active {
-			background: var(--jkhztclx);
+			background: var(--X8);
 		}
 	}
 
diff --git a/src/client/components/ui/range.vue b/src/client/components/ui/range.vue
index 7fb857f520..2c815912bb 100644
--- a/src/client/components/ui/range.vue
+++ b/src/client/components/ui/range.vue
@@ -95,7 +95,7 @@ export default Vue.extend({
 		-webkit-appearance: none;
 		-moz-appearance: none;
 		appearance: none;
-		background: var(--xxubwiul);
+		background: var(--X10);
 		height: 7px;
 		margin: 0 8px;
 		outline: 0;
diff --git a/src/client/components/ui/switch.vue b/src/client/components/ui/switch.vue
index 68e6d43495..18a2ec33f1 100644
--- a/src/client/components/ui/switch.vue
+++ b/src/client/components/ui/switch.vue
@@ -83,8 +83,8 @@ export default Vue.extend({
 
 	&.checked {
 		> .button {
-			background-color: var(--xxubwiul);
-			border-color: var(--xxubwiul);
+			background-color: var(--X10);
+			border-color: var(--X10);
 
 			> * {
 				background-color: var(--accent);
@@ -108,7 +108,7 @@ export default Vue.extend({
 		margin: 3px 0 0 0;
 		width: 34px;
 		height: 14px;
-		background: var(--nhzhphzx);
+		background: var(--X6);
 		outline: none;
 		border-radius: 14px;
 		transition: inherit;
diff --git a/src/client/components/user-select.vue b/src/client/components/user-select.vue
index 9b4a68ddb3..a0d1f3432a 100644
--- a/src/client/components/user-select.vue
+++ b/src/client/components/user-select.vue
@@ -112,7 +112,7 @@ export default Vue.extend({
 			font-size: 14px;
 
 			&:hover {
-				background: var(--bwqtlupy);
+				background: var(--X7);
 			}
 
 			&.selected {
diff --git a/src/client/pages/page-editor/page-editor.container.vue b/src/client/pages/page-editor/page-editor.container.vue
index 3fa09f5600..be243b8990 100644
--- a/src/client/pages/page-editor/page-editor.container.vue
+++ b/src/client/pages/page-editor/page-editor.container.vue
@@ -75,11 +75,11 @@ export default Vue.extend({
 	position: relative;
 	overflow: hidden;
 	background: var(--panel);
-	border: solid 2px var(--jvhmlskx);
+	border: solid 2px var(--X12);
 	border-radius: 6px;
 
 	&:hover {
-		border: solid 2px var(--yakfpmhl);
+		border: solid 2px var(--X13);
 	}
 
 	&.warn {
diff --git a/src/client/style.scss b/src/client/style.scss
index 16cbc5fef5..45cae4f6e2 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -232,11 +232,11 @@ hr {
 	background: var(--accent);
 
 	&:not(:disabled):hover {
-		background: var(--jkhztclx);
+		background: var(--X8);
 	}
 
 	&:not(:disabled):active {
-		background: var(--zbqjwygh);
+		background: var(--X9);
 	}
 }
 
diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5
index d6fb313c1c..f4d5e244d8 100644
--- a/src/client/themes/_dark.json5
+++ b/src/client/themes/_dark.json5
@@ -56,19 +56,19 @@
 		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
 		badge: '#31b1ce',
 		messageBg: ':lighten<5<@bg',
-		bonzsgfz: ':alpha<0<@bg',
-		pcncwizz: ':darken<2<@panel',
-		yrnqrguo: 'rgba(255, 255, 255, 0.05)',
-		nwjktjjq: 'rgba(255, 255, 255, 0.1)',
-		geavgsxy: 'rgba(255, 255, 255, 0.05)',
-		nhzhphzx: 'rgba(255, 255, 255, 0.15)',
-		bwqtlupy: 'rgba(255, 255, 255, 0.05)',
-		jkhztclx: ':lighten<5<@accent',
-		zbqjwygh: ':darken<5<@accent',
-		xxubwiul: ':alpha<0.4<@accent',
-		aupeazdm: 'rgba(0, 0, 0, 0.3)',
-		jvhmlskx: 'rgba(255, 255, 255, 0.1)',
-		yakfpmhl: 'rgba(255, 255, 255, 0.15)',
-		wboyroyc: ':alpha<0.5<@navBg',
+		X1: ':alpha<0<@bg',
+		X2: ':darken<2<@panel',
+		X3: 'rgba(255, 255, 255, 0.05)',
+		X4: 'rgba(255, 255, 255, 0.1)',
+		X5: 'rgba(255, 255, 255, 0.05)',
+		X6: 'rgba(255, 255, 255, 0.15)',
+		X7: 'rgba(255, 255, 255, 0.05)',
+		X8: ':lighten<5<@accent',
+		X9: ':darken<5<@accent',
+		X10: ':alpha<0.4<@accent',
+		X11: 'rgba(0, 0, 0, 0.3)',
+		X12: 'rgba(255, 255, 255, 0.1)',
+		X13: 'rgba(255, 255, 255, 0.15)',
+		X14: ':alpha<0.5<@navBg',
 	},
 }
diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5
index 16e932e80d..d9dca7df69 100644
--- a/src/client/themes/_light.json5
+++ b/src/client/themes/_light.json5
@@ -56,19 +56,19 @@
 		wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
 		badge: '#31b1ce',
 		messageBg: '@panel',
-		bonzsgfz: ':alpha<0<@bg',
-		pcncwizz: ':darken<2<@panel',
-		yrnqrguo: 'rgba(0, 0, 0, 0.05)',
-		nwjktjjq: 'rgba(0, 0, 0, 0.1)',
-		geavgsxy: 'rgba(0, 0, 0, 0.05)',
-		nhzhphzx: 'rgba(0, 0, 0, 0.25)',
-		bwqtlupy: 'rgba(0, 0, 0, 0.05)',
-		jkhztclx: ':lighten<5<@accent',
-		zbqjwygh: ':darken<5<@accent',
-		xxubwiul: ':alpha<0.4<@accent',
-		aupeazdm: 'rgba(0, 0, 0, 0.1)',
-		jvhmlskx: 'rgba(0, 0, 0, 0.1)',
-		yakfpmhl: 'rgba(0, 0, 0, 0.15)',
-		wboyroyc: ':alpha<0.5<@navBg',
+		X1: ':alpha<0<@bg',
+		X2: ':darken<2<@panel',
+		X3: 'rgba(0, 0, 0, 0.05)',
+		X4: 'rgba(0, 0, 0, 0.1)',
+		X5: 'rgba(0, 0, 0, 0.05)',
+		X6: 'rgba(0, 0, 0, 0.25)',
+		X7: 'rgba(0, 0, 0, 0.05)',
+		X8: ':lighten<5<@accent',
+		X9: ':darken<5<@accent',
+		X10: ':alpha<0.4<@accent',
+		X11: 'rgba(0, 0, 0, 0.1)',
+		X12: 'rgba(0, 0, 0, 0.1)',
+		X13: 'rgba(0, 0, 0, 0.15)',
+		X14: ':alpha<0.5<@navBg',
 	},
 }
diff --git a/src/client/widgets/calendar.vue b/src/client/widgets/calendar.vue
index 328e6bc62f..a29f73d3c6 100644
--- a/src/client/widgets/calendar.vue
+++ b/src/client/widgets/calendar.vue
@@ -172,7 +172,7 @@ export default define({
 			> .meter {
 				width: 100%;
 				overflow: hidden;
-				background: var(--aupeazdm);
+				background: var(--X11);
 				border-radius: 8px;
 
 				> .val {