diff --git a/packages/frontend/src/components/SkBadgeStrip.vue b/packages/frontend/src/components/SkBadgeStrip.vue
index b935d9adf5..9546848cc3 100644
--- a/packages/frontend/src/components/SkBadgeStrip.vue
+++ b/packages/frontend/src/components/SkBadgeStrip.vue
@@ -10,7 +10,11 @@ Horizontal strip that displays a user's badges.
 	<div
 		v-for="badge of badges"
 		:key="badge.key"
-		:class="[$style.badge, $style[`semantic_${badge.style ?? 'neutral'}`]]"
+		:class="$style.badge"
+		:style="{
+			'color': color(badge),
+			'border-color': color(badge),
+		}"
 	>
 		{{ badge.label }}
 	</div>
@@ -42,6 +46,16 @@ export interface Badge {
 defineProps<{
 	badges: Badge[],
 }>();
+
+// These can't be classes, or Vite will optimize them away from production builds.
+function color(badge: Badge) {
+	switch (badge.style) {
+		case 'success': return 'var(--MI_THEME-success)';
+		case 'warning': return 'var(--MI_THEME-warn)';
+		case 'error': return 'var(--MI_THEME-error)';
+		default: return 'unset';
+	}
+}
 </script>
 
 <style module lang="scss">
@@ -59,19 +73,4 @@ defineProps<{
 	padding: 2px 6px;
 	font-size: 85%;
 }
-
-.semantic_error {
-	color: var(--MI_THEME-error);
-	border-color: var(--MI_THEME-error);
-}
-
-.semantic_warning {
-	color: var(--MI_THEME-warn);
-	border-color: var(--MI_THEME-warn);
-}
-
-.semantic_success {
-	color: var(--MI_THEME-success);
-	border-color: var(--MI_THEME-success);
-}
 </style>