u

src/theme/themes/default.js

@@ -1,17 +1,28 @@
 import { createTheme } from '@mui/material/styles';
-import { MAIN_BACKGROUND } from '../../colors';
+import {
+  MAIN_BACKGROUND,
+  NAV_BACKGROUND,
+  NAV_ITEM,
+  NAV_ITEM_ACTIVE,
+  NAV_ITEM_ACTIVE_ACCENT,
+  NAV_ITEM_ACTIVE_TEXT,
+  NAV_ITEM_HOVER,
+  NAV_ITEM_HOVER_TEXT,
+  NAV_SURFACE,
+  PRIMARY,
+  WHITE,
+} from '../../colors';
 
 const nav = {
-  background:
-    'linear-gradient(90deg, #183331 0%, #1d3a38 25%, #1a3533 60%, #17302e 100%)',
-  backgroundColor: '#1a3533',
+  background: NAV_BACKGROUND,
+  backgroundColor: NAV_SURFACE,
   mainBackground: MAIN_BACKGROUND,
-  item: '#9cb8b4',
-  itemHover: '#243f3d',
-  itemHoverText: '#d4ebe8',
-  itemActive: '#2a5a56',
-  itemActiveText: '#6ee7d8',
-  itemActiveAccent: '#2dd4bf',
+  item: NAV_ITEM,
+  itemHover: NAV_ITEM_HOVER,
+  itemHoverText: NAV_ITEM_HOVER_TEXT,
+  itemActive: NAV_ITEM_ACTIVE,
+  itemActiveText: NAV_ITEM_ACTIVE_TEXT,
+  itemActiveAccent: NAV_ITEM_ACTIVE_ACCENT,
 };
 
 export const defaultThemeId = 'default';
@@ -20,10 +31,10 @@ export function createDefaultTheme() {
   return createTheme({
     palette: {
       mode: 'light',
-      primary: { main: '#0d9488' },
+      primary: { main: PRIMARY },
       background: {
         default: nav.mainBackground,
-        paper: '#ffffff',
+        paper: WHITE,
       },
     },
     nav,