diff --git a/src/App.js b/src/App.js index 9f19bea..75a087e 100644 --- a/src/App.js +++ b/src/App.js @@ -7,16 +7,16 @@ import { ThemeProvider, createTheme, } from "@mui/material/styles"; -import { MainTheme } from "./themes/Theme"; +import { getMainTheme } from "./themes/Theme"; import { CustomRoutes } from "./routes/Routes"; import messages from "./lang/index"; // new import // import LanguageSwitcher from "./components/LanguageSwitcher"; // new small component export const AppContext = createContext({ - toggleColorMode: () => {}, + toggleColorMode: () => { }, locale: "en", - setLocale: () => {}, + setLocale: () => { }, }); const App = () => { @@ -57,7 +57,7 @@ const App = () => { ); const theme = useMemo( - () => responsiveFontSizes(createTheme(MainTheme(mode))), + () => responsiveFontSizes(createTheme(getMainTheme(mode))), [mode], ); diff --git a/src/layouts/landing/LandingLayout.jsx b/src/layouts/landing/LandingLayout.jsx index 944f646..9f0419b 100644 --- a/src/layouts/landing/LandingLayout.jsx +++ b/src/layouts/landing/LandingLayout.jsx @@ -3,7 +3,7 @@ import React, { useContext } from "react"; import { ThemeProvider } from "@mui/material/styles"; import { AppContext } from "App"; -import { LandingWhite } from "themes/Theme"; +import { getLandingWhite } from "themes/Theme"; import FullScreenContainer from "layouts/common/fullScreenContainer"; import BackToTop from "../common/backToTop"; @@ -16,7 +16,7 @@ const LandingLayout = (props) => { return ( - +
diff --git a/src/themes/Colors.js b/src/themes/Colors.js index b612bbf..4b988f5 100644 --- a/src/themes/Colors.js +++ b/src/themes/Colors.js @@ -1,58 +1,58 @@ -export const AcidGreen = "#BDBF09"; -export const AntiqueFuchsia = "#875C74"; -export const Black = "#000000"; -export const BlueGreen = "#004d40"; -export const BrandyPunch = "#ce8f28"; -export const BrownSugar = "#B4654A"; -export const Cadet = "#5A7881"; -export const Capri = "#5CC8FF"; -export const Celeste = "#CDFFF9"; -export const Cerise = "#D1345B"; -export const Charcoal = "#37474f"; -export const ChartreuseTraditional = "#E4FF1A"; -export const Citron = "#9EA93F"; -export const Cultured = "#eceff1"; -export const DarkOrange = "#FF8811"; -export const DarkPurple = "#0F0326"; -export const DeepSpaceSparkle = "#335C67"; -export const Eggplant = "#75485E"; -export const EnglishVermillion = "#D64045"; -export const Flame = "#cf5c36"; -export const FruitSalad = "#509f60"; -export const GrannySmithApple = "#ADF6B1"; -export const Grullo = "#A69888"; -export const IlluminatingEmerald = "#3E9276"; -export const ImperialRed = "#EF233C"; -export const InternationalGoldenGateBridge = "#BB4430"; -export const Magnolia = "#F3EFF5"; -export const MaizeCrayola = "#E8C547"; -export const Mango = "#F7B801"; -export const MangoTango = "#F5853F"; -export const MaximumBlue = "#42BFDD"; -export const MiddleRedPurple = "#AF5D63"; -export const OuterSpaceCrayola = "#22363C"; -export const PersianGreen = "#009688"; -export const Platinum = "#E5E5E5"; -export const Pomegranate = "#f44336"; -export const RedRYB = "#FF220C"; -export const Rosewood = "#5E0B15"; -export const Ruby = "#D81E5B"; -export const RubyRed = "#A31621"; -export const RussianGreen = "#678D58"; -export const Safron = "#EAC435"; -export const SeaGreenCrayola = "#0FFFC1"; -export const SlimyGreen = "#2B9720"; -export const SpanishGreen = "#058E3F"; -export const Spectra = "#315460"; -export const TeaGreen = "#CAE7B9"; -export const TucanRed = "#754043"; -export const TumbleWeed = "#CEA07E"; -export const TwilightLavander = "#754668"; -export const UARed = "#E01A4F"; -export const VioletColorWheel = "#7E0FFF"; export const White = "#ffffff"; -export const WildBlueYonder = "#99B2DD"; -export const DavysGray = "#565656"; +export const Magnolia = "#F3EFF5"; +export const Celeste = "#CDFFF9"; +export const Cultured = "#eceff1"; +export const Platinum = "#E5E5E5"; +export const ChartreuseTraditional = "#E4FF1A"; +export const TeaGreen = "#CAE7B9"; +export const GrannySmithApple = "#ADF6B1"; +export const MaizeCrayola = "#E8C547"; +export const Safron = "#EAC435"; export const Periwinkle = "#B7B5E4"; +export const Mango = "#F7B801"; +export const SeaGreenCrayola = "#0FFFC1"; +export const WildBlueYonder = "#99B2DD"; +export const Capri = "#5CC8FF"; +export const TumbleWeed = "#CEA07E"; +export const AcidGreen = "#BDBF09"; +export const MangoTango = "#F5853F"; +export const DarkOrange = "#FF8811"; +export const MaximumBlue = "#42BFDD"; +export const Grullo = "#A69888"; +export const Citron = "#9EA93F"; +export const BrandyPunch = "#ce8f28"; +export const FruitSalad = "#509f60"; +export const RussianGreen = "#678D58"; +export const BrownSugar = "#B4654A"; +export const Flame = "#cf5c36"; +export const Pomegranate = "#f44336"; +export const MiddleRedPurple = "#AF5D63"; +export const IlluminatingEmerald = "#3E9276"; +export const Cadet = "#5A7881"; +export const EnglishVermillion = "#D64045"; +export const AntiqueFuchsia = "#875C74"; +export const SlimyGreen = "#2B9720"; +export const PersianGreen = "#009688"; +export const Cerise = "#D1345B"; +export const InternationalGoldenGateBridge = "#BB4430"; +export const ImperialRed = "#EF233C"; +export const RedRYB = "#FF220C"; +export const Ruby = "#D81E5B"; +export const SpanishGreen = "#058E3F"; +export const UARed = "#E01A4F"; +export const Eggplant = "#75485E"; +export const TwilightLavander = "#754668"; +export const DavysGray = "#565656"; +export const TucanRed = "#754043"; +export const DeepSpaceSparkle = "#335C67"; +export const VioletColorWheel = "#7E0FFF"; +export const Spectra = "#315460"; +export const Charcoal = "#37474f"; +export const RubyRed = "#A31621"; +export const BlueGreen = "#004d40"; +export const OuterSpaceCrayola = "#22363C"; +export const Rosewood = "#5E0B15"; +export const DarkPurple = "#0F0326"; +export const Black = "#000000"; //The Pantone Color of the Year 2025, PANTONE 17-1230 Mocha Mousse aka Chamoisee export const Chamoisee = "#A47864"; diff --git a/src/themes/Theme.js b/src/themes/Theme.js index fd282f1..4d6ad93 100644 --- a/src/themes/Theme.js +++ b/src/themes/Theme.js @@ -3,60 +3,61 @@ import { createTheme, responsiveFontSizes } from "@mui/material/styles"; import overrides from "./overrides"; import { AcidGreen, - SeaGreenCrayola, - UARed, - VioletColorWheel, - DavysGray, Chamoisee, + Cultured, + DavysGray, + OuterSpaceCrayola, + SeaGreenCrayola, + VioletColorWheel, White, } from "./Colors"; // Main layout -export const MainTheme = (mode) => ({ +export const getMainTheme = (mode) => ({ palette: { mode, ...(mode === "light" ? { - // palette values for light mode + // palette values for light mode - primary: { - main: Chamoisee, - contrastText: White, - }, - secondary: { - main: UARed, - contrastText: White, - }, - divider: Chamoisee, - background: { - default: Chamoisee, - paper: Chamoisee, - }, - text: { - primary: White, - secondary: White, - }, - } + primary: { + main: Chamoisee, + contrastText: White, + }, + secondary: { + main: White, + contrastText: White, + }, + divider: Chamoisee, + background: { + default: Chamoisee, + paper: Chamoisee, + }, + text: { + primary: White, + secondary: White, + }, + } : { - // palette values for dark mode - primary: { - main: DavysGray, - contrastText: AcidGreen, - }, - secondary: { - main: UARed, - contrastText: AcidGreen, - }, - divider: AcidGreen, - background: { - default: DavysGray, - paper: DavysGray, - }, - text: { - primary: AcidGreen, - secondary: AcidGreen, - }, - }), + // palette values for dark mode + primary: { + main: OuterSpaceCrayola, + contrastText: AcidGreen, + }, + secondary: { + main: AcidGreen, + contrastText: AcidGreen, + }, + divider: AcidGreen, + background: { + default: OuterSpaceCrayola, + paper: OuterSpaceCrayola, + }, + text: { + primary: Cultured, + secondary: Cultured, + }, + }), lightAccent: { main: VioletColorWheel }, darkAccent: { main: SeaGreenCrayola }, contrastThreshold: 3, @@ -68,7 +69,7 @@ export const MainTheme = (mode) => ({ }); // Landing page -export const LandingWhite = (theme) => +export const getLandingWhite = (theme) => responsiveFontSizes( createTheme({ typography: { @@ -77,6 +78,18 @@ export const LandingWhite = (theme) => }, palette: { mode: theme.palette.mode, + ...(theme.palette.mode === "light" + ? { + background: { + default: DavysGray, + paper: DavysGray, + }, + text: { + primary: White, + secondary: White, + }, + } + : {}), }, components: { ...overrides,