feat(app): Add dark theme support (janus-idp#524)

.changeset/nasty-poems-beam.md

@@ -0,0 +1,5 @@
+---
+'app': minor
+---
+
+Dark theme support has been added to the showcase app.

packages/app/src/App.tsx

@@ -33,6 +33,8 @@ import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
 import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
 import { UserSettingsPage } from '@backstage/plugin-user-settings';
 import { UnifiedThemeProvider } from '@backstage/theme';
+import LightIcon from '@mui/icons-material/WbSunny';
+import DarkIcon from '@mui/icons-material/Brightness2';
 import { OcmPage } from '@janus-idp/backstage-plugin-ocm';
 import React from 'react';
 import { Route } from 'react-router-dom';
@@ -43,12 +45,13 @@ import { HomePage } from './components/home/HomePage';
 import { LearningPaths } from './components/learningPaths/LearningPathsPage';
 import { SearchPage } from './components/search/SearchPage';
 import { LighthousePage } from '@backstage/plugin-lighthouse';
-import { customTheme } from './themes/theme';
 import {
   configApiRef,
   githubAuthApiRef,
   useApi,
 } from '@backstage/core-plugin-api';
+import { customLightTheme } from './themes/lightTheme';
+import { customDarkTheme } from './themes/darkTheme';
 
 const app = createApp({
   apis,
@@ -71,11 +74,21 @@ const app = createApp({
   },
   themes: [
     {
-      id: 'default',
-      title: 'Default Theme',
+      id: 'light',
+      title: 'Light Theme',
       variant: 'light',
+      icon: <LightIcon />,
       Provider: ({ children }) => (
-        <UnifiedThemeProvider theme={customTheme} children={children} />
+        <UnifiedThemeProvider theme={customLightTheme} children={children} />
+      ),
+    },
+    {
+      id: 'dark',
+      title: 'Dark Theme',
+      variant: 'dark',
+      icon: <DarkIcon />,
+      Provider: ({ children }) => (
+        <UnifiedThemeProvider theme={customDarkTheme} children={children} />
       ),
     },
   ],

packages/app/src/themes/componentOverrides.ts

@@ -0,0 +1,17 @@
+import { UnifiedThemeOptions } from '@backstage/theme';
+
+const redhatFont = `@font-face {
+  font-family: 'Red Hat Font';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(/fonts/RedHatText-Regular.woff2) format('woff2'),
+    url(/fonts/RedHatText-Regular.otf) format('opentype'),
+    url(/fonts/RedHatText-Regular.ttf) format('truetype');
+}`;
+
+export const components: UnifiedThemeOptions['components'] = {
+  MuiCssBaseline: {
+    styleOverrides: redhatFont,
+  },
+};

packages/app/src/themes/consts.ts

@@ -0,0 +1 @@
+export const fontFamily = '"Red Hat Font", Arial';

packages/app/src/themes/darkTheme.ts

@@ -0,0 +1,23 @@
+import { createUnifiedTheme, themes } from '@backstage/theme';
+import { components } from './componentOverrides';
+import { fontFamily } from './consts';
+import { pageTheme } from './pageTheme';
+
+export const customDarkTheme = createUnifiedTheme({
+  fontFamily,
+  palette: {
+    ...themes.dark.getTheme('v5')?.palette,
+    navigation: {
+      background: '#0f1214',
+      indicator: '#009596',
+      color: '#ffffff',
+      selectedColor: '#ffffff',
+      navItem: {
+        hoverBackground: '#030303',
+      },
+    },
+  },
+  defaultPageTheme: 'home',
+  pageTheme,
+  components,
+});

packages/app/src/themes/lightTheme.ts

@@ -0,0 +1,23 @@
+import { createUnifiedTheme, themes } from '@backstage/theme';
+import { components } from './componentOverrides';
+import { fontFamily } from './consts';
+import { pageTheme } from './pageTheme';
+
+export const customLightTheme = createUnifiedTheme({
+  fontFamily,
+  palette: {
+    ...themes.light.getTheme('v5')?.palette,
+    navigation: {
+      background: '#222427',
+      indicator: '#009596',
+      color: '#ffffff',
+      selectedColor: '#ffffff',
+      navItem: {
+        hoverBackground: '#4f5255',
+      },
+    },
+  },
+  defaultPageTheme: 'home',
+  pageTheme,
+  components,
+});

packages/app/src/themes/pageTheme.ts

@@ -0,0 +1,13 @@
+import { PageTheme, genPageTheme, shapes } from '@backstage/theme';
+
+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 }),
+};