Add ability to configure header and navigation side bar indicator col…

…ors (janus-idp#564)

* feat(app): make header and navigation indicator colors configurable

* chore: update app-config.yaml for branding

* Update app-config.yaml

.changeset/tidy-cows-tell.md

@@ -0,0 +1,5 @@
+---
+'app': minor
+---
+
+Adds ability to configure header color and navigation indicator color

app-config.yaml

@@ -7,7 +7,20 @@ app:
       writeKey: ${SEGMENT_WRITE_KEY}
       maskIP: ${SEGMENT_MASK_IP} # prevents IP addresses from being sent if true
       testMode: ${SEGMENT_TEST_MODE} # prevents data from being sent if true
-
+  branding:
+    fullLogo: ${BASE64_EMBEDDED_FULL_LOGO}
+    iconLogo: ${BASE64_EMBEDDED_ICON_LOGO}
+    theme:
+      light:
+        primaryColor: ${PRIMARY_LIGHT_COLOR}
+        headerColor1: ${HEADER_LIGHT_COLOR_1}
+        headerColor2: ${HEADER_LIGHT_COLOR_2}
+        navigationIndicatorColor: ${NAV_INDICATOR_LIGHT_COLOR}
+      dark:
+        primaryColor: ${PRIMARY_DARK_COLOR}
+        headerColor1: ${HEADER_DARK_COLOR_1}
+        headerColor2: ${HEADER_DARK_COLOR_2}
+        navigationIndicatorColor: ${NAV_INDICATOR_LIGHT_COLOR}
 organization:
   name: My Org
 

packages/app/config.d.ts

@@ -23,10 +23,28 @@ export interface Config {
         [key: string]: {
           /**
            * primaryColor Configuration for the instance
-           * The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
+           * The following formats are supported: #nnn, #nnnnnn
            * @visibility frontend
            */
-          primaryColor: string;
+          primaryColor?: string;
+          /**
+           * Header Theme color Configuration for the instance
+           * The following formats are supported: #nnn, #nnnnnn
+           * @visibility frontend
+           */
+          headerColor1?: string;
+          /**
+           * Header Theme color Configuration for the instance
+           * The following formats are supported: #nnn, #nnnnnn
+           * @visibility frontend
+           */
+          headerColor2?: string;
+          /**
+           * Navigation Side Bar Indicator color Configuration for the instance
+           * The following formats are supported: #nnn, #nnnnnn
+           * @visibility frontend
+           */
+          navigationIndicatorColor?: string;
         };
       };
     };

packages/app/src/App.tsx

@@ -80,10 +80,10 @@ const app = createApp({
       variant: 'light',
       icon: <LightIcon />,
       Provider: ({ children }) => {
-        const { primaryColor } = useUpdateTheme('light');
+        const themeColors = useUpdateTheme('light');
         return (
           <UnifiedThemeProvider
-            theme={customLightTheme(primaryColor)}
+            theme={customLightTheme(themeColors)}
             children={children}
           />
         );
@@ -95,10 +95,10 @@ const app = createApp({
       variant: 'dark',
       icon: <DarkIcon />,
       Provider: ({ children }) => {
-        const { primaryColor } = useUpdateTheme('dark');
+        const themeColors = useUpdateTheme('dark');
         return (
           <UnifiedThemeProvider
-            theme={customDarkTheme(primaryColor)}
+            theme={customDarkTheme(themeColors)}
             children={children}
           />
         );

packages/app/src/hooks/useUpdateTheme.test.ts

@@ -8,13 +8,28 @@ jest.mock('@backstage/core-plugin-api', () => ({
 }));
 
 describe('useUpdateTheme', () => {
-  it('returns the primaryColor when config is available', () => {
-    (useApi as any).mockReturnValue({
-      getOptionalString: jest.fn().mockReturnValue('blue'),
+  it('returns the themeColors when config for them is available', () => {
+    (useApi as jest.Mock).mockReturnValue({
+      getOptionalString: jest.fn().mockImplementation(key => {
+        switch (key) {
+          case 'app.branding.theme.someTheme.primaryColor':
+            return 'blue';
+          case 'app.branding.theme.someTheme.headerColor1':
+            return 'red';
+          case 'app.branding.theme.someTheme.headerColor2':
+            return 'yellow';
+          case 'app.branding.theme.someTheme.navigationIndicatorColor':
+            return 'purple';
+          default:
+            return '';
+        }
+      }),
     });
-
     const { result } = renderHook(() => useUpdateTheme('someTheme'));
     expect(result.current.primaryColor).toBe('blue');
+    expect(result.current.headerColor1).toBe('red');
+    expect(result.current.headerColor2).toBe('yellow');
+    expect(result.current.navigationIndicatorColor).toBe('purple');
   });
 
   it('returns undefined when config is unavailable', () => {

packages/app/src/hooks/useUpdateTheme.ts

@@ -1,16 +1,24 @@
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
+import { ThemeColors } from '../types/types';
 
-export const useUpdateTheme = (
-  selTheme: string,
-): { primaryColor: string | undefined } => {
-  let primaryColor: string | undefined;
+export const useUpdateTheme = (selTheme: string): ThemeColors => {
+  const themeColors: ThemeColors = {};
   try {
     const configApi = useApi(configApiRef);
-    primaryColor = configApi.getOptionalString(
+    themeColors.primaryColor = configApi.getOptionalString(
       `app.branding.theme.${selTheme}.primaryColor`,
     );
+    themeColors.headerColor1 = configApi.getOptionalString(
+      `app.branding.theme.${selTheme}.headerColor1`,
+    );
+    themeColors.headerColor2 = configApi.getOptionalString(
+      `app.branding.theme.${selTheme}.headerColor2`,
+    );
+    themeColors.navigationIndicatorColor = configApi.getOptionalString(
+      `app.branding.theme.${selTheme}.navigationIndicatorColor`,
+    );
   } catch (err) {
-    // useApi won't be initialized initally in createApp theme provider, and will get updated later
+    // useApi won't be initialized initially in createApp theme provider, and will get updated later
   }
-  return { primaryColor };
+  return themeColors;
 };

packages/app/src/themes/darkTheme.ts

@@ -2,21 +2,22 @@ import { createUnifiedTheme, themes } from '@backstage/theme';
 import { components } from './componentOverrides';
 import { pageFontFamily, typography } from './consts';
 import { pageTheme } from './pageTheme';
+import { ThemeColors } from '../types/types';
 
-export const customDarkTheme = (primaryColor?: string | undefined) =>
+export const customDarkTheme = (themeColors: ThemeColors) =>
   createUnifiedTheme({
     fontFamily: pageFontFamily,
     palette: {
       ...themes.dark.getTheme('v5')?.palette,
-      ...(primaryColor && {
+      ...(themeColors.primaryColor && {
         primary: {
           ...themes.light.getTheme('v5')?.palette.primary,
-          main: primaryColor,
+          main: themeColors.primaryColor,
         },
       }),
       navigation: {
         background: '#0f1214',
-        indicator: '#009596',
+        indicator: themeColors.navigationIndicatorColor || '#009596',
         color: '#ffffff',
         selectedColor: '#ffffff',
         navItem: {
@@ -25,7 +26,7 @@ export const customDarkTheme = (primaryColor?: string | undefined) =>
       },
     },
     defaultPageTheme: 'home',
-    pageTheme,
+    pageTheme: pageTheme(themeColors),
     components,
     typography,
   });

packages/app/src/themes/lightTheme.ts

@@ -2,21 +2,22 @@ import { createUnifiedTheme, themes } from '@backstage/theme';
 import { components } from './componentOverrides';
 import { pageFontFamily, typography } from './consts';
 import { pageTheme } from './pageTheme';
+import { ThemeColors } from '../types/types';
 
-export const customLightTheme = (primaryColor?: string | undefined) =>
+export const customLightTheme = (themeColors: ThemeColors) =>
   createUnifiedTheme({
     fontFamily: pageFontFamily,
     palette: {
       ...themes.light.getTheme('v5')?.palette,
-      ...(primaryColor && {
+      ...(themeColors.primaryColor && {
         primary: {
           ...themes.light.getTheme('v5')?.palette.primary,
-          main: primaryColor,
+          main: themeColors.primaryColor,
         },
       }),
       navigation: {
         background: '#222427',
-        indicator: '#009596',
+        indicator: themeColors.navigationIndicatorColor || '#009596',
         color: '#ffffff',
         selectedColor: '#ffffff',
         navItem: {
@@ -25,7 +26,7 @@ export const customLightTheme = (primaryColor?: string | undefined) =>
       },
     },
     defaultPageTheme: 'home',
-    pageTheme,
+    pageTheme: pageTheme(themeColors),
     components,
     typography,
   });

packages/app/src/themes/pageTheme.ts

@@ -1,13 +1,37 @@
 import { PageTheme, genPageTheme, shapes } from '@backstage/theme';
+import { ThemeColors } from '../types/types';
 
-export const pageTheme: Record<string, PageTheme> = {
-  home: genPageTheme({ colors: ['#005f60', '#73c5c5'], shape: shapes.wave }),
-  app: genPageTheme({ colors: ['#005f60', '#73c5c5'], shape: shapes.wave }),
-  apis: genPageTheme({ colors: ['#005f60', '#73c5c5'], shape: shapes.wave }),
-  documentation: genPageTheme({
-    colors: ['#005f60', '#73c5c5'],
-    shape: shapes.wave,
-  }),
-  tool: genPageTheme({ colors: ['#005f60', '#73c5c5'], shape: shapes.round }),
-  other: genPageTheme({ colors: ['#005f60', '#73c5c5'], shape: shapes.wave }),
+export const pageTheme = (input: ThemeColors): Record<string, PageTheme> => {
+  const { headerColor1, headerColor2 } = input;
+  const defaultColors = ['#005f60', '#73c5c5'];
+  const headerColor = [
+    headerColor1 || defaultColors[0],
+    headerColor2 || defaultColors[1],
+  ];
+  return {
+    home: genPageTheme({
+      colors: [headerColor[0], headerColor[1]],
+      shape: shapes.wave,
+    }),
+    app: genPageTheme({
+      colors: [headerColor[0], headerColor[1]],
+      shape: shapes.wave,
+    }),
+    apis: genPageTheme({
+      colors: [headerColor[0], headerColor[1]],
+      shape: shapes.wave,
+    }),
+    documentation: genPageTheme({
+      colors: [headerColor[0], headerColor[1]],
+      shape: shapes.wave,
+    }),
+    tool: genPageTheme({
+      colors: [headerColor[0], headerColor[1]],
+      shape: shapes.round,
+    }),
+    other: genPageTheme({
+      colors: [headerColor[0], headerColor[1]],
+      shape: shapes.wave,
+    }),
+  };
 };

packages/app/src/types/types.ts

@@ -5,3 +5,10 @@ export type QuickAccessLinks = {
   isExpanded?: boolean;
   links: (Tool & { iconUrl: string })[];
 };
+
+export type ThemeColors = {
+  primaryColor?: string | undefined;
+  headerColor1?: string | undefined;
+  headerColor2?: string | undefined;
+  navigationIndicatorColor?: string | undefined;
+};