brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

getting background shades to generate background colors

Browse source
This commit is contained in:
Carter 2024-11-06 15:22:27 -06:00
parent 71a8bc0849
commit a1a76b48d1
1 changed files with 28 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/theme/theme.ts
View file

@ -1,5 +1,5 @@
import * as Colours from "@mui/material/colors"
import { createTheme, responsiveFontSizes, Theme, ThemeOptions } from '@mui/material/styles';
import { createTheme, darken, lighten, responsiveFontSizes, Theme, ThemeOptions } from '@mui/material/styles';
import {
getPrimaryColour,
getSecondaryColour,
@ -11,6 +11,18 @@ export function CreateTheme(themeType: "light" | "dark"): Theme {
return responsiveFontSizes(createTheme(options(themeType)));
}
function generateBackgroundShades(baseColor: string, themeType: "light" | "dark") {
if(themeType==="light") return ({
default: lighten(baseColor, 0.90),
paper: lighten(baseColor, 0.75)
})
return {
default: darken(baseColor, 0.35), // Lightens the base color for background.default
paper: darken(baseColor, 0.50), // Slightly less light for background.paper
};
}
function options(themeType: "light" | "dark"): ThemeOptions {
const signature = getSignatureColour();
@ -19,7 +31,7 @@ function options(themeType: "light" | "dark"): ThemeOptions {
palette: {
primary: Colours[getPrimaryColour() as keyof typeof Colours],
secondary: Colours[getSecondaryColour() as keyof typeof Colours],
background: Colours.grey,
background: generateBackgroundShades(Colours.grey[900], themeType),
mode: themeType,
bxt: {
primaryBlue: "#005bb0",
@ -36,20 +48,20 @@ function options(themeType: "light" | "dark"): ThemeOptions {
alert: "#f44336"
}
},
typography: {
fontFamily: [
"Open Sans",
"-apple-system",
"BlinkMacSystemFont",
'"Segoe UI"',
'"Helvetica Neue"',
"Arial",
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"'
].join(",")
},
// typography: {
// fontFamily: [
// "Open Sans",
// "-apple-system",
// "BlinkMacSystemFont",
// '"Segoe UI"',
// '"Helvetica Neue"',
// "Arial",
// "sans-serif",
// '"Apple Color Emoji"',
// '"Segoe UI Emoji"',
// '"Segoe UI Symbol"'
// ].join(",")
// },
overrides: {
MuiAppBar: {
colorPrimary: {