diff --git a/src/app/Header.tsx b/src/app/Header.tsx index 6e4dbaf..5ff6184 100644 --- a/src/app/Header.tsx +++ b/src/app/Header.tsx @@ -16,7 +16,7 @@ const useStyles = makeStyles((theme: Theme) => { appBar: { zIndex: theme.zIndex.drawer + 1, backgroundImage: "none", // This prevents de-saturation of header in dark mode - backgroundColor: theme.palette.mode === "light" ? "#3b3b3b" : "#272727" + backgroundColor: theme.palette.header.main }, toolbar: { marginLeft: theme.spacing(0.5), @@ -128,4 +128,4 @@ export default function Header() { {isMobile && {setNavOpen(isOpen)}} sideIsOpen={navOpen} />} ) -} \ No newline at end of file +} diff --git a/src/services/whiteLabel.ts b/src/services/whiteLabel.ts index 35a9c8c..90cf4ed 100644 --- a/src/services/whiteLabel.ts +++ b/src/services/whiteLabel.ts @@ -28,6 +28,8 @@ const protips: string[] = [ "Want to receive text messages about your devices? Update your phone number and enable SMS notifications!" ]; +const DEFAULT_HEADER_COLOUR = "#1f2a35"; + export interface WhiteLabelFeatures { bins: boolean; visualFarm: boolean; @@ -55,6 +57,7 @@ interface WhiteLabel { secondaryColour: any; signatureColour: any; signatureAccentColour: any; + headerColour?: any; auth0ClientId: string; redirectOnLogout: boolean; logoutRedirectTarget: string; @@ -444,6 +447,14 @@ export function getSignatureColour(): any { return getWhitelabel().signatureColour; } +export function getHeaderColour(): any { + return getWhitelabel().headerColour ?? DEFAULT_HEADER_COLOUR; +} + +export function getHeaderColor(): any { + return getHeaderColour(); +} + export function getSignatureAccentColour(): any { return getWhitelabel().signatureAccentColour; } diff --git a/src/theme/theme.ts b/src/theme/theme.ts index 739a54f..ce44c5d 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -2,10 +2,21 @@ import * as Colours from "@mui/material/colors" import { createTheme, ThemeOptions } from '@mui/material/styles'; import { + getHeaderColor, getPrimaryColour, getSecondaryColour, } from "../services/whiteLabel"; +declare module "@mui/material/styles" { + interface Palette { + header: Palette["primary"]; + } + + interface PaletteOptions { + header?: PaletteOptions["primary"]; + } +} + const baseTheme: ThemeOptions = { palette: { mode: 'light', // default mode; will be overridden by system if needed @@ -62,6 +73,9 @@ export const getTheme = (mode: 'light' | 'dark') => ...baseTheme.palette, primary: makePaletteColor(getPrimaryColour()), secondary: makePaletteColor(getSecondaryColour()), + header: { + main: getHeaderColor(), + }, mode, ...(mode === 'dark' ? {