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

Switch to "colorSchemes" from "palette" API in mui theme

Browse Source 
"colorSchemes" is the preferred api starting from mui v6
This commit is contained in:
schroda
2025-01-16 12:14:15 +01:00
parent 9255386b1c
commit a22a4bf546
14 changed files with 493 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/modules/theme/components/CreateThemeDialog.tsx
View File

@@ -37,12 +37,26 @@ const baseCustomTheme: AppTheme = {
isCustom: true,
getName: () => '',
muiTheme: {
palette: {
primary: {
main: '#1976d2',
colorSchemes: {
light: {
palette: {
primary: {
main: '#1976d2',
},
secondary: {
main: '#9c27b0',
},
},
},
secondary: {
main: '#9c27b0',
dark: {
palette: {
primary: {
main: '#1976d2',
},
secondary: {
main: '#9c27b0',
},
},
},
},
},
@@ -115,10 +129,23 @@ export const ThemeCreationDialog = ({
/>
)}
{!error && (
<Stack sx={{ gap: 2 }}>
<Stack sx={{ gap: 2, whiteSpace: 'pre-line' }}>
<Typography>
<Trans i18nKey="settings.appearance.theme.create.dialog.info.creating_theme">
Create a custom theme with the{' '}
<Trans i18nKey="settings.appearance.theme.create.dialog.description">
<Link
href="https://mui.com/material-ui/customization/how-to-customize/"
target="_blank"
rel="noreferrer"
>
MUI documentation
</Link>
<Link
href="https://mui.com/material-ui/customization/palette/#color-schemes"
target="_blank"
rel="noreferrer"
>
MUI documentation
</Link>
<Link
href="https://zenoo.github.io/mui-theme-creator/"
target="_blank"
@@ -130,7 +157,6 @@ export const ThemeCreationDialog = ({
&quot; and paste it into the &quot;theme&quot; text field.
</Trans>
</Typography>
<Typography>{t('settings.appearance.theme.create.dialog.info.theme_mode_lock')}</Typography>
<TextField
disabled={mode === 'edit'}
label={t('settings.appearance.theme.create.dialog.theme_name')}

2
src/modules/theme/components/ThemeList.tsx
View File

@@ -68,7 +68,7 @@ export const ThemeList = () => {
{allThemes.map((theme) => (
<ThemePreview
key={theme.id}
theme={theme}
appTheme={theme}
onDelete={() => {
makeToast(t('settings.appearance.theme.delete.action', { theme: theme.getName() }), 'info');
updateCustomThemes(

43
src/modules/theme/components/ThemePreview.tsx
View File

@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
import { useContext, useMemo } from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import { styled, ThemeProvider } from '@mui/material/styles';
import { styled, ThemeProvider, useTheme } from '@mui/material/styles';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea';
@@ -32,17 +32,21 @@ const ThemePreviewBadge = styled(Box)(() => ({
height: '20px',
}));
export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: () => void }) => {
const { getName } = theme;
export const ThemePreview = ({ appTheme, onDelete }: { appTheme: AppTheme; onDelete: () => void }) => {
const { getName } = appTheme;
const { t } = useTranslation();
const { themeMode, setAppTheme, appTheme, pureBlackMode } = useContext(ThemeModeContext);
const theme = useTheme();
const { themeMode, setAppTheme, appTheme: activeAppTheme, pureBlackMode } = useContext(ThemeModeContext);
const popupState = usePopupState({ variant: 'popover', popupId: `theme-edit-dialog-${theme.id}` });
const popupState = usePopupState({ variant: 'popover', popupId: `theme-edit-dialog-${appTheme.id}` });
const isSelected = theme.id === appTheme;
const isSelected = appTheme.id === activeAppTheme;
const muiTheme = useMemo(() => createTheme(themeMode, theme, pureBlackMode), [theme, themeMode, pureBlackMode]);
const muiTheme = useMemo(
() => createTheme(themeMode, appTheme, pureBlackMode),
[appTheme, themeMode, pureBlackMode],
);
return (
<>
@@ -71,12 +75,15 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
bottom: 0,
left: 0,
border: '4px solid',
borderColor: isSelected
? muiTheme.palette.primary.light
: muiTheme.palette.background.paper,
borderColor: isSelected ? muiTheme.palette.primary.light : muiTheme.palette.grey['100'],
zIndex: 1,
pointerEvents: 'none',
borderRadius: 1,
...theme.applyStyles('dark', {
borderColor: isSelected
? muiTheme.palette.primary.light
: muiTheme.palette.grey['900'],
}),
}}
/>
<CardActionArea
@@ -85,15 +92,15 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
backgroundColor: 'background.default',
}}
onClick={() => {
const needToLoadFonts = hasMissingFonts(theme.muiTheme);
const needToLoadFonts = hasMissingFonts(appTheme.muiTheme);
if (!needToLoadFonts) {
setAppTheme(theme.id);
setAppTheme(appTheme.id);
return;
}
makeToast(t('settings.appearance.theme.select.fonts.loading'), 'info');
loadThemeFonts(theme.muiTheme)
.then(() => setAppTheme(theme.id))
loadThemeFonts(appTheme.muiTheme)
.then(() => setAppTheme(appTheme.id))
.catch((e) =>
makeToast(
t('settings.appearance.theme.select.fonts.error'),
@@ -136,7 +143,7 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
}}
/>
)}
{!isSelected && theme.isCustom && (
{!isSelected && appTheme.isCustom && (
<IconButton
onClick={(e) => {
e.preventDefault();
@@ -152,7 +159,7 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
</Tooltip>
</IconButton>
)}
{theme.isCustom && (
{appTheme.isCustom && (
<IconButton
onClick={(e) => {
e.preventDefault();
@@ -194,7 +201,7 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
<Stack
sx={{
height: '25%',
backgroundColor: muiTheme.palette.background.paper,
backgroundColor: 'background.paper',
alignItems: 'center',
flexDirection: 'row',
gap: 2,
@@ -226,7 +233,7 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
<TypographyMaxLines sx={{ maxWidth: '100%' }}>{getName()}</TypographyMaxLines>
</Tooltip>
</Stack>
<ThemeCreationDialog bindDialogProps={bindDialog(popupState)} mode="edit" appTheme={theme} />
<ThemeCreationDialog bindDialogProps={bindDialog(popupState)} mode="edit" appTheme={appTheme} />
</>
);
};