Merge pull request #889 from sudhanshutech/use/tabs

fix theme changes in tabs
layer5io · Jan 16, 2025 · 4abaca4 · 4abaca4
2 parents ee11020 + a1432b8
commit 4abaca4
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 4 deletions.
diff --git a/src/theme/colors/colors.ts b/src/theme/colors/colors.ts
@@ -102,6 +102,11 @@ export const charcoal = {
   10: '#000D12'
 };
 
+export const gray = {
+  10: '#1A1A1A',
+  20: '#212121'
+};
+
 export const accentGrey = {
   100: '#F6F8F8',
   90: '#E8EFF3',

diff --git a/src/theme/colors/index.ts b/src/theme/colors/index.ts
@@ -57,6 +57,7 @@ export {
   darkSlateGray,
   darkTeal,
   eerieBlack,
+  gray,
   green,
   jungleGreen,
   keppel,

diff --git a/src/theme/components/tab.modifier.ts b/src/theme/components/tab.modifier.ts
@@ -6,7 +6,7 @@ export const MuiTab: Components<Theme>['MuiTab'] = {
       const {
         palette: {
           text: { default: defaultText },
-          background: { default: defaultBackground }
+          background: { tabs: defaultBackground }
         }
       } = theme;
       return {

diff --git a/src/theme/components/tabs.modifier.ts b/src/theme/components/tabs.modifier.ts
@@ -3,7 +3,7 @@ import { Components, Theme } from '@mui/material';
 export const MuiTabs: Components<Theme>['MuiTabs'] = {
   styleOverrides: {
     root: ({ theme }) => ({
-      backgroundColor: theme.palette.background.default
+      backgroundColor: theme.palette.background.tabs
     }),
     indicator: ({ theme }) => ({
       backgroundColor: theme.palette.background.brand?.default

diff --git a/src/theme/palette.ts b/src/theme/palette.ts
@@ -195,7 +195,7 @@ export const lightModePalette: PaletteOptions = {
     default: Colors.charcoal[100],
     secondary: Colors.accentGrey[90],
     tertiary: Colors.accentGrey[80],
-    tabs: Colors.charcoal[70],
+    tabs: Colors.accentGrey[100], // TODO: Make this name or token to more genric
     hover: Colors.charcoal[90],
     supplementary: Colors.accentGrey[40],
     blur: {
@@ -312,7 +312,7 @@ export const darkModePalette: PaletteOptions = {
     default: Colors.charcoal[10],
     secondary: Colors.accentGrey[20],
     tertiary: Colors.accentGrey[30],
-    tabs: Colors.charcoal[110],
+    tabs: Colors.gray[10], // TODO: Make this name or token to more genric
     hover: Colors.charcoal[20],
     supplementary: Colors.accentGrey[40],
     blur: {