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) { export default function TableBody(theme: Theme) {
const hoverStyle = { const hoverStyle = {
'&:hover': { '&: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: { root: {
'&.striped .MuiTableRow-root': { '&.striped .MuiTableRow-root': {
'&:nth-of-type(even)': { '&:nth-of-type(even)': {
backgroundColor: theme.palette.secondary.lighter backgroundColor: theme.palette.secondary[theme.palette.mode === 'dark' ? '950' : 'lighter'],
}, },
...hoverStyle ...hoverStyle
}, },

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

@ -8,7 +8,7 @@ export default function TableHead(theme: Theme) {
MuiTableHead: { MuiTableHead: {
styleOverrides: { styleOverrides: {
root: { root: {
backgroundColor: theme.palette.secondary.lighter, backgroundColor: theme.palette.secondary[theme.palette.mode === 'dark' ? '950' : 'lighter'],
borderTop: `1px solid ${theme.palette.divider}`, borderTop: `1px solid ${theme.palette.divider}`,
borderBottom: `2px 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 ||============================== // // ==============================|| OVERRIDES - TABLE ROW ||============================== //
export default function TableRow() { import { Theme } from "@mui/material";
export default function TableRow(theme: Theme) {
return { return {
MuiTableRow: { MuiTableRow: {
styleOverrides: { styleOverrides: {
@ -11,6 +13,10 @@ export default function TableRow() {
} }
}, },
'& .MuiTableCell-root': { '& .MuiTableCell-root': {
'&:hover': {
backgroundColor: theme.palette.action.hover,
cursor: 'pointer'
},
'&:last-of-type': { '&:last-of-type': {
paddingRight: 24 paddingRight: 24
}, },

18
src/theme/palette.ts
View File

@ -46,6 +46,7 @@ const Palette = (mode: ThemeMode) => {
800: "#5c6077", 800: "#5c6077",
darker: "#5c6077", darker: "#5c6077",
900: "#4e5161", 900: "#4e5161",
"950": "#121212",
}, },
error: { error: {
lighter: "#ffe3e1", lighter: "#ffe3e1",
@ -113,7 +114,7 @@ const Palette = (mode: ThemeMode) => {
'600': '#358438', '600': '#358438',
'700': '#2d6830', '700': '#2d6830',
'800': '#275429', '800': '#275429',
'900': '#224525' '900': '#224525',
}, },
}; };
@ -126,17 +127,18 @@ const Palette = (mode: ThemeMode) => {
}, },
...paletteColor, ...paletteColor,
text: { text: {
primary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.87) : paletteColor.secondary[800], primary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.lighter!, 0.87) : paletteColor.secondary[800],
secondary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.45) : paletteColor.secondary.main, secondary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.lighter!, 0.45) : paletteColor.secondary.main,
disabled: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.1) : paletteColor.secondary[400] disabled: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.lighter!, 0.1) : paletteColor.secondary[400]
}, },
action: { 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: { background: {
paper: mode === ThemeMode.DARK ? paletteColor.secondary[100] : '#fff', paper: mode === ThemeMode.DARK ? paletteColor.secondary[950] : '#fff',
default: mode !== ThemeMode.DARK ? '#fff' : paletteColor.secondary[900] 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%)`, text: `0 -1px 0 rgb(0 0 0 / 12%)`,
z1: z1:
theme.palette.mode === ThemeMode.DARK 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)}`, : `0px 8px 24px ${alpha(theme.palette.secondary.dark, 0.15)}`,
z2: z2:
theme.palette.mode === ThemeMode.DARK 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)}`, : `0px 2px 8px ${alpha(theme.palette.secondary.dark, 0.08)}`,
primary: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.1)}`, primary: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.1)}`,
secondary: `0 0 0 2px ${alpha(theme.palette.secondary.main, 0.2)}`, 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 // eslint-disable-next-line
import * as createPalette from '@mui/material'; import * as createPalette from '@mui/material';
declare module '@mui/material/styles' { declare module '@mui/material' {
interface SimplePaletteColorOptions { interface SimplePaletteColorOptions {
lighter?: string; lighter?: string;
darker?: string; darker?: string;
@ -16,6 +16,7 @@ declare module '@mui/material/styles' {
700?: string; 700?: string;
800?: string; 800?: string;
900?: string; 900?: string;
950?: string;
} }
interface PaletteColor { interface PaletteColor {
@ -32,5 +33,6 @@ declare module '@mui/material/styles' {
700?: string; 700?: string;
800?: string; 800?: string;
900?: string; 900?: string;
950?: string
} }
} }