dadobos/me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dan Dobos
2025-10-20 20:49:45 +02:00
parent 44eeae2db3
commit 9eeb3c5a7b
4 changed files with 117 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+54 -54
View File
@@ -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";
src/themes/Theme.js
+26 -13
View File
@@ -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,
paper: DavysGray,
default: OuterSpaceCrayola,
paper: OuterSpaceCrayola,
},
text: {
primary: AcidGreen,
secondary: AcidGreen,
primary: Cultured,
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,