diff --git a/packages/core/web-reporter-ui/index.css b/packages/core/web-reporter-ui/index.css
index e434abe9..3d812f05 100644
--- a/packages/core/web-reporter-ui/index.css
+++ b/packages/core/web-reporter-ui/index.css
@@ -8,11 +8,19 @@
     --bright-green: #00ff75;
     --bright-magenta: #ff36af;
     --bright-cyan: #00ffff;
+    --bright-orange: #ff9a00;
+    --bright-blue: #00b4ff;
+    --bright-red: #ff0000;
+    --bright-purple: #b400ff;
 
     --bright-yellow-rgb: 255, 245, 0;
     --bright-green-rgb: 0, 255, 117;
     --bright-magenta-rgb: 255, 54, 175;
     --bright-cyan-rgb: 0, 255, 255;
+    --bright-orange-rgb: 255, 154, 0;
+    --bright-blue-rgb: 0, 180, 255;
+    --bright-red-rgb: 255, 0, 0;
+    --bright-purple-rgb: 180, 0, 255;
   }
 
   [data-theme="bright-yellow"] {
@@ -34,6 +42,26 @@
     --theme-color: #00ffff;
     --theme-color-100: rgba(0, 255, 255, 0.13);
   }
+
+  [data-theme="bright-orange"] {
+    --theme-color: #ff9a00;
+    --theme-color-100: rgba(255, 154, 0, 0.13);
+  }
+
+  [data-theme="bright-blue"] {
+    --theme-color: #00b4ff;
+    --theme-color-100: rgba(0, 180, 255, 0.13);
+  }
+
+  [data-theme="bright-red"] {
+    --theme-color: #ff0000;
+    --theme-color-100: rgba(255, 0, 0, 0.13);
+  }
+
+  [data-theme="bright-purple"] {
+    --theme-color: #b400ff;
+    --theme-color-100: rgba(180, 0, 255, 0.13);
+  }
 }
 
 @layer utilities {
diff --git a/packages/core/web-reporter-ui/src/theme/colors.ts b/packages/core/web-reporter-ui/src/theme/colors.ts
index b5d7cb34..99dd4f5b 100644
--- a/packages/core/web-reporter-ui/src/theme/colors.ts
+++ b/packages/core/web-reporter-ui/src/theme/colors.ts
@@ -3,6 +3,10 @@ export const themeColors = [
   "bright-green",
   "bright-magenta",
   "bright-cyan",
+  "bright-orange",
+  "bright-blue",
+  "bright-red",
+  "bright-purple",
 ] as const;
 type ThemeColor = (typeof themeColors)[number];