diff --git a/app/theme/common/palette.ts b/app/theme/common/palette.ts index 436b04d..81fc4e9 100644 --- a/app/theme/common/palette.ts +++ b/app/theme/common/palette.ts @@ -1,4 +1,4 @@ -import { PaletteColorOptions } from "@mui/material"; +import { PaletteColor } from "@mui/material"; /** * Palette "Hero" @@ -17,7 +17,9 @@ export const heroMain = HERO.MAIN; /** * Palette Option "Hero" */ -export const hero: PaletteColorOptions = { +export const hero: PaletteColor = { + contrastText: "#FFFFFF", + dark: heroMain, light: heroLight, main: heroMain, }; diff --git a/app/theme/theme.ts b/app/theme/theme.ts index 1dd5aa7..5f19de2 100644 --- a/app/theme/theme.ts +++ b/app/theme/theme.ts @@ -9,15 +9,16 @@ import * as P from "./common/palette"; * @returns theme with custom theme overrides. */ export function mergeAppTheme(theme: Theme): Theme { - return createTheme( - deepmerge(theme, { - components: { - MuiButton: C.MuiButton(theme), - MuiCssBaseline: C.MuiCssBaseline(theme), - }, - palette: { - hero: P.hero, - }, - }) - ); + const appTheme = { ...theme }; + + // Merge palette with hero color. + appTheme.palette = { ...appTheme.palette, hero: P.hero }; + + // Marge custom components. + const components = { + MuiButton: C.MuiButton(appTheme), + MuiCssBaseline: C.MuiCssBaseline(appTheme), + }; + + return createTheme(deepmerge(appTheme, components)); } diff --git a/app/views/HomeView/homeView.tsx b/app/views/HomeView/homeView.tsx index af242ab..b950ff0 100644 --- a/app/views/HomeView/homeView.tsx +++ b/app/views/HomeView/homeView.tsx @@ -10,8 +10,8 @@ export const HomeView = (): JSX.Element => { - + ); diff --git a/types/theme.d.ts b/types/theme.d.ts index ec882bd..257522a 100644 --- a/types/theme.d.ts +++ b/types/theme.d.ts @@ -1,13 +1,5 @@ -import { Theme as MTheme } from "@mui/material"; - -/** - * Button prop options. - */ -declare module "@mui/material/Button" { - interface ButtonPropsColorOverrides { - hero: true; - } -} +import type {} from "@mui/material/Button"; +import { PaletteColorOptions } from "@mui/material/styles"; /** * Palette definitions. @@ -22,6 +14,15 @@ declare module "@mui/material/styles/createPalette" { } } +/** + * Button prop options. + */ +declare module "@mui/material/Button" { + interface ButtonPropsColorOverrides { + hero: true; + } +} + declare module "@emotion/react" { export interface Theme extends MTheme { name: "EmotionTheme";