Added custom field for global header bgColor

Signed-off-by: Yi Cai <yicai@redhat.com>
redhat-developer · Feb 7, 2025 · 5fb63e1 · 5fb63e1
1 parent 10ab3b5
commit 5fb63e1
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/src/themes/rhdh/components.ts b/src/themes/rhdh/components.ts
@@ -102,7 +102,7 @@ export const components = (themeConfig: ThemeConfig): Components => {
     components.MuiAppBar = {
       styleOverrides: {
         root: {
-          backgroundColor: general.sidebarBackgroundColor,
+          backgroundColor: general.globalHeaderBackgroundColor ?? general.sidebarBackgroundColor,
           backgroundImage: "none",
         },
       },
@@ -157,6 +157,11 @@ export const components = (themeConfig: ThemeConfig): Components => {
           "&:hover": {
             backgroundColor: "transparent",
           },
+          "&:disabled": {
+            color: general.disabled,
+            backgroudColor: general.disabledBackground,
+            border: `1px solid ${general.disabledBackground}`,
+          },
         },
         outlinedPrimary: {
           "&:hover": {
@@ -478,7 +483,7 @@ export const components = (themeConfig: ThemeConfig): Components => {
       styleOverrides: {
         drawer: {
           backgroundColor:
-            general.sidebarBackgroundColor ?? general.sidebarBackgroundColor,
+            general.sidebarBackgroundColor ?? general.sideBarBackgroundColor,
           '& a[class*="BackstageSidebarItem-selected-"]': {
             backgroundColor: general.sidebarItemSelectedBackgroundColor,
           },

diff --git a/src/themes/rhdh/darkTheme.ts b/src/themes/rhdh/darkTheme.ts
@@ -43,6 +43,7 @@ export const customDarkTheme = (): ThemeConfigPalette => {
         tableBackgroundColor: "#1b1d21",
         tabsBottomBorderColor: "#444548",
         contrastText: "#FFF",
+        globalHeaderBackgroundColor: "#1b1d21",
       },
       primary: {
         main: "#1FA7F8",

diff --git a/src/themes/rhdh/lightTheme.ts b/src/themes/rhdh/lightTheme.ts
@@ -47,6 +47,7 @@ export const customLightTheme = (): ThemeConfigPalette => {
         tableBackgroundColor: "#FFF",
         tabsBottomBorderColor: "#D2D2D2",
         contrastText: "#FFF",
+        globalHeaderBackgroundColor: "#212427",
       },
       primary: {
         main: "#0066CC",

diff --git a/src/types.ts b/src/types.ts
@@ -23,6 +23,7 @@ export interface RHDHThemePalette {
     tableBackgroundColor: string;
     tabsBottomBorderColor: string;
     contrastText: string;
+    globalHeaderBackgroundColor: string;
   };
 
   primary: {