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
+4 -4
View File
@@ -7,16 +7,16 @@ import {
ThemeProvider, ThemeProvider,
createTheme, createTheme,
} from "@mui/material/styles"; } from "@mui/material/styles";
import { MainTheme } from "./themes/Theme"; import { getMainTheme } from "./themes/Theme";
import { CustomRoutes } from "./routes/Routes"; import { CustomRoutes } from "./routes/Routes";
import messages from "./lang/index"; // new import import messages from "./lang/index"; // new import
// import LanguageSwitcher from "./components/LanguageSwitcher"; // new small component // import LanguageSwitcher from "./components/LanguageSwitcher"; // new small component
export const AppContext = createContext({ export const AppContext = createContext({
toggleColorMode: () => {}, toggleColorMode: () => { },
locale: "en", locale: "en",
setLocale: () => {}, setLocale: () => { },
}); });
const App = () => { const App = () => {
@@ -57,7 +57,7 @@ const App = () => {
); );
const theme = useMemo( const theme = useMemo(
() => responsiveFontSizes(createTheme(MainTheme(mode))), () => responsiveFontSizes(createTheme(getMainTheme(mode))),
[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 { ThemeProvider } from "@mui/material/styles";
import { AppContext } from "App"; import { AppContext } from "App";
import { LandingWhite } from "themes/Theme"; import { getLandingWhite } from "themes/Theme";
import FullScreenContainer from "layouts/common/fullScreenContainer"; import FullScreenContainer from "layouts/common/fullScreenContainer";
import BackToTop from "../common/backToTop"; import BackToTop from "../common/backToTop";
@@ -16,7 +16,7 @@ const LandingLayout = (props) => {
return ( return (
<AppContext.Provider value={colorMode}> <AppContext.Provider value={colorMode}>
<ThemeProvider theme={LandingWhite}> <ThemeProvider theme={getLandingWhite}>
<div id="back-to-top-anchor" /> <div id="back-to-top-anchor" />
<Header /> <Header />
<FullScreenContainer> <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 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 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 //The Pantone Color of the Year 2025, PANTONE 17-1230 Mocha Mousse aka Chamoisee
export const Chamoisee = "#A47864"; export const Chamoisee = "#A47864";
src/themes/Theme.js
+57 -44
View File
@@ -3,60 +3,61 @@ import { createTheme, responsiveFontSizes } from "@mui/material/styles";
import overrides from "./overrides"; import overrides from "./overrides";
import { import {
AcidGreen, AcidGreen,
SeaGreenCrayola,
UARed,
VioletColorWheel,
DavysGray,
Chamoisee, Chamoisee,
Cultured,
DavysGray,
OuterSpaceCrayola,
SeaGreenCrayola,
VioletColorWheel,
White, White,
} from "./Colors"; } from "./Colors";
// Main layout // Main layout
export const MainTheme = (mode) => ({ export const getMainTheme = (mode) => ({
palette: { palette: {
mode, mode,
...(mode === "light" ...(mode === "light"
? { ? {
// palette values for light mode // palette values for light mode
primary: { primary: {
main: Chamoisee, main: Chamoisee,
contrastText: White, contrastText: White,
}, },
secondary: { secondary: {
main: UARed, main: White,
contrastText: White, contrastText: White,
}, },
divider: Chamoisee, divider: Chamoisee,
background: { background: {
default: Chamoisee, default: Chamoisee,
paper: Chamoisee, paper: Chamoisee,
}, },
text: { text: {
primary: White, primary: White,
secondary: White, secondary: White,
}, },
} }
: { : {
// palette values for dark mode // palette values for dark mode
primary: { primary: {
main: DavysGray, main: OuterSpaceCrayola,
contrastText: AcidGreen, contrastText: AcidGreen,
}, },
secondary: { secondary: {
main: UARed, main: AcidGreen,
contrastText: AcidGreen, contrastText: AcidGreen,
}, },
divider: AcidGreen, divider: AcidGreen,
background: { background: {
default: DavysGray, default: OuterSpaceCrayola,
paper: DavysGray, paper: OuterSpaceCrayola,
}, },
text: { text: {
primary: AcidGreen, primary: Cultured,
secondary: AcidGreen, secondary: Cultured,
}, },
}), }),
lightAccent: { main: VioletColorWheel }, lightAccent: { main: VioletColorWheel },
darkAccent: { main: SeaGreenCrayola }, darkAccent: { main: SeaGreenCrayola },
contrastThreshold: 3, contrastThreshold: 3,
@@ -68,7 +69,7 @@ export const MainTheme = (mode) => ({
}); });
// Landing page // Landing page
export const LandingWhite = (theme) => export const getLandingWhite = (theme) =>
responsiveFontSizes( responsiveFontSizes(
createTheme({ createTheme({
typography: { typography: {
@@ -77,6 +78,18 @@ export const LandingWhite = (theme) =>
}, },
palette: { palette: {
mode: theme.palette.mode, mode: theme.palette.mode,
...(theme.palette.mode === "light"
? {
background: {
default: DavysGray,
paper: DavysGray,
},
text: {
primary: White,
secondary: White,
},
}
: {}),
}, },
components: { components: {
...overrides, ...overrides,