refactor: rename theme functions for clarity and update color palette references

src/App.js

@@ -7,7 +7,7 @@ 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
@@ -57,7 +57,7 @@ const App = () => {
   );
 
   const theme = useMemo(
-    () => responsiveFontSizes(createTheme(MainTheme(mode))),
+    () => responsiveFontSizes(createTheme(getMainTheme(mode))),
     [mode],
   );
 

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 (
 		<AppContext.Provider value={colorMode}>
-			<ThemeProvider theme={LandingWhite}>
+			<ThemeProvider theme={getLandingWhite}>
 				<div id="back-to-top-anchor" />
 				<Header />
 				<FullScreenContainer>

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 Magnolia = "#F3EFF5";
-export const DavysGray = "#565656";
+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";

src/themes/Theme.js

@@ -3,16 +3,17 @@ 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"
@@ -24,7 +25,7 @@ export const MainTheme = (mode) => ({
           contrastText: White,
         },
         secondary: {
-            main: UARed,
+          main: White,
           contrastText: White,
         },
         divider: Chamoisee,
@@ -40,21 +41,21 @@ export const MainTheme = (mode) => ({
       : {
         // palette values for dark mode
         primary: {
-            main: DavysGray,
+          main: OuterSpaceCrayola,
           contrastText: AcidGreen,
         },
         secondary: {
-            main: UARed,
+          main: AcidGreen,
           contrastText: AcidGreen,
         },
         divider: AcidGreen,
         background: {
-            default: DavysGray,
+          default: OuterSpaceCrayola,
-            paper: DavysGray,
+          paper: OuterSpaceCrayola,
         },
         text: {
-            primary: AcidGreen,
+          primary: Cultured,
-            secondary: AcidGreen,
+          secondary: Cultured,
         },
       }),
     lightAccent: { main: VioletColorWheel },
@@ -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,