ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support overriding mui theme "components"

Browse Source
This commit is contained in:
schroda
2024-09-09 21:12:05 +02:00
parent e7177b0b49
commit 65f21f17b1
1 changed files with 35 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/theme.ts
View File

@@ -75,13 +75,45 @@ export const createTheme = (
const suwayomiTheme = createMuiTheme(colorTheme, { const suwayomiTheme = createMuiTheme(colorTheme, {
components: { components: {
...appTheme.muiTheme.components,
MuiUseMediaQuery: { MuiUseMediaQuery: {
defaultProps: { defaultProps: {
noSsr: true, noSsr: true,
}, },
}, },
MuiCssBaseline: { MuiCssBaseline: {
styleOverrides: ` ...appTheme.muiTheme.components?.MuiCssBaseline,
styleOverrides:
typeof appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides === 'object'
? {
...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides,
'*::-webkit-scrollbar': {
width: `${SCROLLBAR_SIZE}px`,
height: `${SCROLLBAR_SIZE}px`,
// @ts-ignore - '*::-webkit-scrollbar' is a valid key
...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides?.[
'*::-webkit-scrollbar'
],
},
'*::-webkit-scrollbar-thumb': {
border: '4px solid rgba(0, 0, 0, 0)',
backgroundClip: 'padding-box',
borderRadius: '9999px',
backgroundColor: `${colorTheme.palette.primary[isDarkMode ? 'dark' : 'light']}`,
// @ts-ignore - '*::-webkit-scrollbar-thumb' is a valid key
...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides?.[
'*::-webkit-scrollbar-thumb'
],
},
'*::-webkit-scrollbar-thumb:hover': {
borderWidth: '2px',
// @ts-ignore - '*::-webkit-scrollbar-thumb:hover' is a valid key
...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides?.[
'*::-webkit-scrollbar-thumb:hover'
],
},
}
: `
*::-webkit-scrollbar { *::-webkit-scrollbar {
width: ${SCROLLBAR_SIZE}px; width: ${SCROLLBAR_SIZE}px;
height: ${SCROLLBAR_SIZE}px; height: ${SCROLLBAR_SIZE}px;
@@ -95,6 +127,8 @@ export const createTheme = (
*::-webkit-scrollbar-thumb:hover { *::-webkit-scrollbar-thumb:hover {
border-width: 2px; border-width: 2px;
} }
${appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides ?? ''}
`, `,
}, },
}, },