fix: side bar title color based on theme

novuhq · Feb 4, 2024 · d054f83 · d054f83
1 parent 033b90d
commit d054f83
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/apps/web/src/pages/templates/components/WorkflowSidebar.tsx b/apps/web/src/pages/templates/components/WorkflowSidebar.tsx
@@ -4,10 +4,14 @@ import { useNavigate } from 'react-router-dom';
 import { colors, Sidebar } from '@novu/design-system';
 
 import { useBasePath } from '../hooks/useBasePath';
+import { useLocalThemePreference } from '@novu/shared-web';
 
 export const WorkflowSidebar = ({ children, title }: { children: ReactNode; title: string }) => {
   const navigate = useNavigate();
   const path = useBasePath();
+  const { themeStatus } = useLocalThemePreference();
+
+  const isDark = themeStatus === 'dark';
 
   return (
     <Sidebar
@@ -21,7 +25,7 @@ export const WorkflowSidebar = ({ children, title }: { children: ReactNode; titl
             display: 'flex',
             flexFlow: 'Column',
           }}
-          color={colors.white}
+          color={isDark ? colors.white : colors.black}
           size={20}
           weight="bold"
         >

diff --git a/libs/design-system/src/config/colors.ts b/libs/design-system/src/config/colors.ts
@@ -4,6 +4,7 @@ const error = '#E54545';
 
 export const colors = {
   white: '#FFFFFF',
+  black: '#000000',
   BGLight: '#EDF0F2',
   BGDark: '#13131A',
   B98: '#F5F8FA',