diff --git a/src/utils/__snapshots__/github-api.test.ts.snap b/src/utils/__snapshots__/github-api.test.ts.snap
index 0b472531e..2ad7e8e99 100644
--- a/src/utils/__snapshots__/github-api.test.ts.snap
+++ b/src/utils/__snapshots__/github-api.test.ts.snap
@@ -120,7 +120,7 @@ exports[`getNotificationTypeIconColor should format the notification color for c
 
 exports[`getNotificationTypeIconColor should format the notification color for check suite 4`] = `"text-green-500"`;
 
-exports[`getNotificationTypeIconColor should format the notification color for check suite 5`] = `"text-gray-300"`;
+exports[`getNotificationTypeIconColor should format the notification color for check suite 5`] = `"text-gray-500"`;
 
 exports[`getNotificationTypeIconColor should format the notification color for state 1`] = `"text-green-500"`;
 
@@ -128,11 +128,11 @@ exports[`getNotificationTypeIconColor should format the notification color for s
 
 exports[`getNotificationTypeIconColor should format the notification color for state 3`] = `"text-purple-500"`;
 
-exports[`getNotificationTypeIconColor should format the notification color for state 4`] = `"text-gray-600"`;
+exports[`getNotificationTypeIconColor should format the notification color for state 4`] = `"text-gray-500"`;
 
 exports[`getNotificationTypeIconColor should format the notification color for state 5`] = `"text-purple-500"`;
 
-exports[`getNotificationTypeIconColor should format the notification color for state 6`] = `"text-gray-300"`;
+exports[`getNotificationTypeIconColor should format the notification color for state 6`] = `"text-gray-500"`;
 
 exports[`getNotificationTypeIconColor should format the notification color for state 7`] = `"text-green-500"`;
 
@@ -140,4 +140,4 @@ exports[`getNotificationTypeIconColor should format the notification color for s
 
 exports[`getNotificationTypeIconColor should format the notification color for state 9`] = `"text-purple-500"`;
 
-exports[`getNotificationTypeIconColor should format the notification color for state 10`] = `"text-gray-300"`;
+exports[`getNotificationTypeIconColor should format the notification color for state 10`] = `"text-gray-500"`;
diff --git a/src/utils/appearance.ts b/src/utils/appearance.ts
index 8eeab5fff..bce783d5e 100644
--- a/src/utils/appearance.ts
+++ b/src/utils/appearance.ts
@@ -1,5 +1,13 @@
 import { Appearance } from '../types';
 
+export function getAppearance(): Appearance {
+  if (document.querySelector('html').classList.contains('dark')) {
+    return Appearance.DARK;
+  }
+
+  return Appearance.LIGHT;
+}
+
 export const setLightMode = () =>
   document.querySelector('html').classList.remove('dark');
 
diff --git a/src/utils/github-api.ts b/src/utils/github-api.ts
index 8370352f6..f237040fd 100644
--- a/src/utils/github-api.ts
+++ b/src/utils/github-api.ts
@@ -25,6 +25,8 @@ import {
   XIcon,
 } from '@primer/octicons-react';
 import { Reason, Subject } from '../typesGithub';
+import { Appearance } from '../types';
+import { getAppearance } from './appearance';
 
 // prettier-ignore
 const DESCRIPTIONS = {
@@ -157,33 +159,23 @@ export function getNotificationTypeIcon(
 
 export function getNotificationTypeIconColor(subject: Subject): string {
   switch (subject.state) {
+    case 'open':
+    case 'reopened':
     case 'ANSWERED':
+    case 'success':
       return 'text-green-500';
-    case 'cancelled':
-      return 'text-gray-500';
     case 'closed':
-      return 'text-red-500';
-    case 'completed':
-      return 'text-purple-500';
-    case 'draft':
-      return 'text-gray-600';
     case 'failure':
       return 'text-red-500';
-    case 'merged':
-      return 'text-purple-500';
-    case 'not_planned':
-      return 'text-gray-300';
-    case 'open':
-      return 'text-green-500';
-    case 'reopened':
-      return 'text-green-500';
+    case 'completed':
     case 'RESOLVED':
+    case 'merged':
       return 'text-purple-500';
-    case 'skipped':
-      return 'text-gray-500';
-    case 'success':
-      return 'text-green-500';
     default:
-      return 'text-gray-300';
+      const appearance = getAppearance();
+      if (appearance == Appearance.DARK) {
+        return 'text-gray-300';
+      }
+      return 'text-gray-500';
   }
 }