root
/
NAM-APJATEL
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: dark mode color

This commit is contained in:
HasanMu 2025-02-17 18:39:54 +07:00
parent 778b05fd50
commit 167ec6b943
6 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/theme/components/TableBody.ts
View File

@ -6,7 +6,7 @@ import { Theme } from '@mui/material';
export default function TableBody(theme: Theme) {
const hoverStyle = {
'&:hover': {
backgroundColor: theme.palette.secondary.lighter
backgroundColor: theme.palette.secondary[theme.palette.mode === 'dark' ? '950' : 'lighter']
}
};
@ -16,7 +16,7 @@ export default function TableBody(theme: Theme) {
root: {
'&.striped .MuiTableRow-root': {
'&:nth-of-type(even)': {
backgroundColor: theme.palette.secondary.lighter
backgroundColor: theme.palette.secondary[theme.palette.mode === 'dark' ? '950' : 'lighter'],
},
...hoverStyle
},

2
src/theme/components/TableHead.ts
View File

@ -8,7 +8,7 @@ export default function TableHead(theme: Theme) {
MuiTableHead: {
styleOverrides: {
root: {
backgroundColor: theme.palette.secondary.lighter,
backgroundColor: theme.palette.secondary[theme.palette.mode === 'dark' ? '950' : 'lighter'],
borderTop: `1px solid ${theme.palette.divider}`,
borderBottom: `2px solid ${theme.palette.divider}`
}

8
src/theme/components/TableRow.ts
View File

@ -1,6 +1,8 @@
// ==============================|| OVERRIDES - TABLE ROW ||============================== //
export default function TableRow() {
import { Theme } from "@mui/material";
export default function TableRow(theme: Theme) {
return {
MuiTableRow: {
styleOverrides: {
@ -11,6 +13,10 @@ export default function TableRow() {
}
},
'& .MuiTableCell-root': {
'&:hover': {
backgroundColor: theme.palette.action.hover,
cursor: 'pointer'
},
'&:last-of-type': {
paddingRight: 24
},

18
src/theme/palette.ts
View File

@ -46,6 +46,7 @@ const Palette = (mode: ThemeMode) => {
800: "#5c6077",
darker: "#5c6077",
900: "#4e5161",
"950": "#121212",
},
error: {
lighter: "#ffe3e1",
@ -113,7 +114,7 @@ const Palette = (mode: ThemeMode) => {
'600': '#358438',
'700': '#2d6830',
'800': '#275429',
'900': '#224525'
'900': '#224525',
},
};
@ -126,17 +127,18 @@ const Palette = (mode: ThemeMode) => {
},
...paletteColor,
text: {
primary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.87) : paletteColor.secondary[800],
secondary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.45) : paletteColor.secondary.main,
disabled: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.1) : paletteColor.secondary[400]
primary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.lighter!, 0.87) : paletteColor.secondary[800],
secondary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.lighter!, 0.45) : paletteColor.secondary.main,
disabled: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.lighter!, 0.1) : paletteColor.secondary[400]
},
action: {
disabled: paletteColor.secondary.light
disabled: paletteColor.secondary.light,
hover: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 1) : alpha(paletteColor.secondary.light!, 0.48),
},
divider: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.05) : alpha(paletteColor.secondary.light!, 0.65),
divider: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.lighter!, 0.09) : alpha(paletteColor.secondary.light!, 0.65),
background: {
paper: mode === ThemeMode.DARK ? paletteColor.secondary[100] : '#fff',
default: mode !== ThemeMode.DARK ? '#fff' : paletteColor.secondary[900]
paper: mode === ThemeMode.DARK ? paletteColor.secondary[950] : '#fff',
default: mode !== ThemeMode.DARK ? '#fff' : paletteColor.secondary[950]
}
}
});

4
src/theme/shadows.ts
View File

@ -13,11 +13,11 @@ const CustomShadows = (theme: Theme): CustomShadowProps => ({
text: `0 -1px 0 rgb(0 0 0 / 12%)`,
z1:
theme.palette.mode === ThemeMode.DARK
? `0px 8px 24px ${alpha(theme.palette.secondary[200]!, 0.3)}`
? `0px 4px 20px ${alpha(theme.palette.secondary[800]!, 0.3)}`
: `0px 8px 24px ${alpha(theme.palette.secondary.dark, 0.15)}`,
z2:
theme.palette.mode === ThemeMode.DARK
? `0px 2px 8px ${alpha(theme.palette.secondary[200]!, 0.3)}`
? `0px 2px 8px ${alpha(theme.palette.secondary[800]!, 0.3)}`
: `0px 2px 8px ${alpha(theme.palette.secondary.dark, 0.08)}`,
primary: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.1)}`,
secondary: `0 0 0 2px ${alpha(theme.palette.secondary.main, 0.2)}`,

4
src/types/overrides/createPalette.d.ts vendored
View File

@ -1,7 +1,7 @@
// eslint-disable-next-line
import * as createPalette from '@mui/material';
declare module '@mui/material/styles' {
declare module '@mui/material' {
interface SimplePaletteColorOptions {
lighter?: string;
darker?: string;
@ -16,6 +16,7 @@ declare module '@mui/material/styles' {
700?: string;
800?: string;
900?: string;
950?: string;
}
interface PaletteColor {
@ -32,5 +33,6 @@ declare module '@mui/material/styles' {
700?: string;
800?: string;
900?: string;
950?: string
}
}