diff --git a/src/components/page/theming/ColorGenerator/index.tsx b/src/components/page/theming/ColorGenerator/index.tsx
index 7bc86599a37..b8adea7011d 100644
--- a/src/components/page/theming/ColorGenerator/index.tsx
+++ b/src/components/page/theming/ColorGenerator/index.tsx
@@ -17,8 +17,9 @@ const ColorGenerator = (props) => {
     success: generateColor('#2dd36f'),
     warning: generateColor('#ffc409'),
     danger: generateColor('#eb445a'),
-    medium: generateColor('#92949c'),
     light: generateColor('#f4f5f8'),
+    medium: generateColor('#92949c'),
+    dark: generateColor('#222428'),
   });
 
   const [activeColor, setActiveColor] = useState(null);