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

15
src/modules/core/contexts/AppContext.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { Direction, StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
import { Direction, StyledEngineProvider, ThemeProvider, useColorScheme } from '@mui/material/styles';
import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { QueryParamProvider } from 'use-query-params';
@@ -58,6 +58,9 @@ export const AppContext: React.FC<Props> = ({ children }) => {
const [themeMode, setThemeMode] = useLocalStorage<ThemeMode>('themeMode', ThemeMode.SYSTEM);
const [pureBlackMode, setPureBlackMode] = useLocalStorage<boolean>('pureBlackMode', false);
const { mode } = useColorScheme();
const actualThemeMode = mode ?? themeMode ?? 'dark';
const darkThemeContext = useMemo(
() => ({
appTheme,
@@ -71,8 +74,14 @@ export const AppContext: React.FC<Props> = ({ children }) => {
);
const theme = useMemo(
() => createAndSetTheme(themeMode, getTheme(appTheme, customThemes), pureBlackMode, currentDirection),
[themeMode, currentDirection, systemThemeMode, pureBlackMode, appTheme, customThemes],
() =>
createAndSetTheme(
actualThemeMode as ThemeMode,
getTheme(appTheme, customThemes),
pureBlackMode,
currentDirection,
),
[actualThemeMode, currentDirection, systemThemeMode, pureBlackMode, appTheme, customThemes],
);
return (

2
src/modules/core/utils/MediaQuery.tsx
View File

@@ -85,7 +85,7 @@ export class MediaQuery {
}
static getThemeMode(): Exclude<ThemeMode, 'system'> {
const themeMode = AppStorage.local.getItemParsed<ThemeMode>('themeMode', ThemeMode.SYSTEM);
const themeMode = AppStorage.local.getItem('mui-mode') as ThemeMode;
const isSystemMode = themeMode === ThemeMode.SYSTEM;
if (isSystemMode) {

22
src/modules/settings/screens/Appearance.tsx
View File

@@ -15,6 +15,7 @@ import MenuItem from '@mui/material/MenuItem';
import ListSubheader from '@mui/material/ListSubheader';
import Switch from '@mui/material/Switch';
import Link from '@mui/material/Link';
import { useColorScheme } from '@mui/material/styles';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { ThemeMode, ThemeModeContext } from '@/modules/theme/contexts/ThemeModeContext.tsx';
import { Select } from '@/modules/core/components/inputs/Select.tsx';
@@ -23,7 +24,6 @@ import { NumberSetting } from '@/modules/core/components/settings/NumberSetting.
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
import { I18nResourceCode, i18nResources } from '@/i18n';
import { langCodeToName } from '@/modules/core/utils/Languages.ts';
import { getTheme } from '@/modules/theme/services/AppThemes.ts';
import { ThemeList } from '@/modules/theme/components/ThemeList.tsx';
import {
createUpdateMetadataServerSettings,
@@ -35,10 +35,13 @@ import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'
import { makeToast } from '@/modules/core/utils/Toast.ts';
import { MetadataThemeSettings } from '@/modules/theme/AppTheme.types.ts';
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { AppStorage } from '@/lib/storage/AppStorage.ts';
export const Appearance = () => {
const { t, i18n } = useTranslation();
const { themeMode, setThemeMode, pureBlackMode, setPureBlackMode, appTheme } = useContext(ThemeModeContext);
const { themeMode, setThemeMode, pureBlackMode, setPureBlackMode } = useContext(ThemeModeContext);
const { mode, setMode } = useColorScheme();
const actualThemeMode = (mode ?? themeMode) as ThemeMode;
const { setTitle, setAction } = useContext(NavBarContext);
useLayoutEffect(() => {
@@ -59,8 +62,7 @@ export const Appearance = () => {
makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
);
const isDarkMode =
getTheme(appTheme).muiTheme.palette?.mode === 'dark' || MediaQuery.getThemeMode() === ThemeMode.DARK;
const isDarkMode = MediaQuery.getThemeMode() === ThemeMode.DARK;
const DEFAULT_ITEM_WIDTH = 300;
const [itemWidth, setItemWidth] = useLocalStorage<number>('ItemWidth', DEFAULT_ITEM_WIDTH);
@@ -89,7 +91,17 @@ export const Appearance = () => {
>
<ListItem>
<ListItemText primary={t('settings.appearance.theme.mode')} />
<Select<ThemeMode> value={themeMode} onChange={(e) => setThemeMode(e.target.value as ThemeMode)}>
<Select<ThemeMode>
value={actualThemeMode}
onChange={(e) => {
const newMode = e.target.value as 'system' | 'light' | 'dark';
setThemeMode(newMode as ThemeMode);
setMode(newMode);
// in case a non "colorSchemes" mui theme is active, "setMode" does not update the mode ("mui-mode") value
AppStorage.local.setItem('mui-mode', newMode, true, false);
}}
>
<MenuItem key={ThemeMode.SYSTEM} value={ThemeMode.SYSTEM}>
System
</MenuItem>

296
src/modules/theme/Themes.ts
View File

@@ -6,22 +6,40 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { ThemeOptions } from '@mui/material/styles';
import { CssVarsThemeOptions } from '@mui/material/styles';
import { t as translate } from 'i18next';
export type TBaseTheme = { isCustom: boolean; getName: () => string; muiTheme: ThemeOptions };
export type TBaseTheme = {
isCustom: boolean;
getName: () => string;
muiTheme: Omit<CssVarsThemeOptions, 'activeMode'>;
};
export const themes = {
default: {
isCustom: false,
getName: () => translate('global.label.default'),
muiTheme: {
palette: {
primary: {
main: '#5b74ef',
colorSchemes: {
light: {
palette: {
primary: {
main: '#5b74ef',
},
secondary: {
main: '#efd65b',
},
},
},
secondary: {
main: '#efd65b',
dark: {
palette: {
primary: {
main: '#5b74ef',
},
secondary: {
main: '#efd65b',
},
},
},
},
},
@@ -30,12 +48,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.lavender'),
muiTheme: {
palette: {
primary: {
main: '#5c58dc',
colorSchemes: {
light: {
palette: {
primary: {
main: '#5c58dc',
},
secondary: {
main: '#d8dc58',
},
},
},
secondary: {
main: '#d8dc58',
dark: {
palette: {
primary: {
main: '#5c58dc',
},
secondary: {
main: '#d8dc58',
},
},
},
},
},
@@ -44,12 +76,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.dune'),
muiTheme: {
palette: {
primary: {
main: '#897869',
colorSchemes: {
light: {
palette: {
primary: {
main: '#897869',
},
secondary: {
main: '#697a89',
},
},
},
secondary: {
main: '#697a89',
dark: {
palette: {
primary: {
main: '#897869',
},
secondary: {
main: '#697a89',
},
},
},
},
},
@@ -58,12 +104,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.rosegold'),
muiTheme: {
palette: {
primary: {
main: '#E9A7A1',
colorSchemes: {
light: {
palette: {
primary: {
main: '#E9A7A1',
},
secondary: {
main: '#A1E3E9',
},
},
},
secondary: {
main: '#A1E3E9',
dark: {
palette: {
primary: {
main: '#E9A7A1',
},
secondary: {
main: '#A1E3E9',
},
},
},
},
},
@@ -72,12 +132,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.forest_dew'),
muiTheme: {
palette: {
primary: {
main: '#53a584',
colorSchemes: {
light: {
palette: {
primary: {
main: '#53a584',
},
secondary: {
main: '#a55374',
},
},
},
secondary: {
main: '#a55374',
dark: {
palette: {
primary: {
main: '#53a584',
},
secondary: {
main: '#a55374',
},
},
},
},
},
@@ -86,12 +160,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.mountain_sunset'),
muiTheme: {
palette: {
primary: {
main: '#c55a77',
colorSchemes: {
light: {
palette: {
primary: {
main: '#c55a77',
},
secondary: {
main: '#5ac5a8',
},
},
},
secondary: {
main: '#5ac5a8',
dark: {
palette: {
primary: {
main: '#c55a77',
},
secondary: {
main: '#5ac5a8',
},
},
},
},
},
@@ -100,12 +188,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.crimson'),
muiTheme: {
palette: {
primary: {
main: '#DC143C',
colorSchemes: {
light: {
palette: {
primary: {
main: '#DC143C',
},
secondary: {
main: '#14DCB4',
},
},
},
secondary: {
main: '#14DCB4',
dark: {
palette: {
primary: {
main: '#DC143C',
},
secondary: {
main: '#14DCB4',
},
},
},
},
},
@@ -114,12 +216,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.minty_miracles'),
muiTheme: {
palette: {
primary: {
main: '#5CE6A1',
colorSchemes: {
light: {
palette: {
primary: {
main: '#5CE6A1',
},
secondary: {
main: '#E65CA1',
},
},
},
secondary: {
main: '#E65CA1',
dark: {
palette: {
primary: {
main: '#5CE6A1',
},
secondary: {
main: '#E65CA1',
},
},
},
},
},
@@ -128,12 +244,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.orange_juice'),
muiTheme: {
palette: {
primary: {
main: '#ffb546',
colorSchemes: {
light: {
palette: {
primary: {
main: '#ffb546',
},
secondary: {
main: '#4690ff',
},
},
},
secondary: {
main: '#4690ff',
dark: {
palette: {
primary: {
main: '#ffb546',
},
secondary: {
main: '#4690ff',
},
},
},
},
},
@@ -142,12 +272,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.bright_pink'),
muiTheme: {
palette: {
primary: {
main: '#FF007F',
colorSchemes: {
light: {
palette: {
primary: {
main: '#FF007F',
},
secondary: {
main: '#00FF80',
},
},
},
secondary: {
main: '#00FF80',
dark: {
palette: {
primary: {
main: '#FF007F',
},
secondary: {
main: '#00FF80',
},
},
},
},
},
@@ -156,12 +300,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.veronica'),
muiTheme: {
palette: {
primary: {
main: '#A020F0',
colorSchemes: {
light: {
palette: {
primary: {
main: '#A020F0',
},
secondary: {
main: '#70F020',
},
},
},
secondary: {
main: '#70F020',
dark: {
palette: {
primary: {
main: '#A020F0',
},
secondary: {
main: '#70F020',
},
},
},
},
},
@@ -170,12 +328,26 @@ export const themes = {
isCustom: false,
getName: () => translate('settings.appearance.theme.themes.tree_frog_green'),
muiTheme: {
palette: {
primary: {
main: '#8ace31',
colorSchemes: {
light: {
palette: {
primary: {
main: '#8ace31',
},
secondary: {
main: '#7531CE',
},
},
},
secondary: {
main: '#7531CE',
dark: {
palette: {
primary: {
main: '#8ace31',
},
secondary: {
main: '#7531CE',
},
},
},
},
},

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} />
</>
);
};

6
src/modules/theme/services/AppThemes.ts
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { ThemeOptions } from '@mui/material/styles';
import { CssVarsThemeOptions } from '@mui/material/styles';
import WebFont from 'webfontloader';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { ControlledPromise } from '@/lib/ControlledPromise.ts';
@@ -66,12 +66,12 @@ const getFontsFromTheme = (obj: Record<string, any>, fonts: string[] = []): stri
const loadedFonts: string[] = [];
export const hasMissingFonts = (theme: ThemeOptions): boolean => {
export const hasMissingFonts = (theme: CssVarsThemeOptions): boolean => {
const themeFonts = getFontsFromTheme(theme.typography ?? {});
return !!themeFonts.length && themeFonts.some((font) => !loadedFonts.includes(font));
};
export const loadThemeFonts = async (theme: ThemeOptions): Promise<void> => {
export const loadThemeFonts = async (theme: CssVarsThemeOptions): Promise<void> => {
const themeFonts = getFontsFromTheme(theme.typography ?? {});
const missingThemeFonts = themeFonts.filter((font) => !loadedFonts.includes(font));

208
src/modules/theme/services/ThemeCreator.ts
View File

@@ -11,12 +11,16 @@ import {
darken,
Direction,
lighten,
Palette,
responsiveFontSizes,
Theme,
TypeBackground,
useTheme,
} from '@mui/material/styles';
import { useCallback } from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies,no-restricted-imports
import { deepmerge } from '@mui/utils';
// eslint-disable-next-line no-restricted-imports
import { PaletteBackgroundChannel } from '@mui/material/styles/createThemeWithVars';
import { ThemeMode } from '@/modules/theme/contexts/ThemeModeContext.tsx';
import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
import { AppTheme, loadThemeFonts } from '@/modules/theme/services/AppThemes.ts';
@@ -25,6 +29,56 @@ import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
const SCROLLBAR_SIZE = 14;
declare module '@mui/material/styles' {
interface CssThemeVariables {
enabled: true;
}
}
const getBackgroundColor = (
type: 'light' | 'dark',
appTheme: AppTheme,
theme: Theme,
setPureBlackMode: boolean = false,
): (Partial<TypeBackground> & Partial<PaletteBackgroundChannel>) | undefined => {
if (setPureBlackMode) {
return {
paper: '#111',
default: '#000',
};
}
if (type === 'light' && !!theme.colorSchemes.light) {
if (
typeof appTheme.muiTheme.colorSchemes?.light === 'object' &&
appTheme.muiTheme.colorSchemes.light.palette?.background
) {
return appTheme.muiTheme.colorSchemes.light.palette.background;
}
return {
paper: lighten(theme.colorSchemes.light.palette.primary.dark, 0.8),
default: lighten(theme.colorSchemes.light.palette.primary.dark, 0.9),
};
}
if (type === 'dark' && !!theme.colorSchemes.dark) {
if (
typeof appTheme.muiTheme.colorSchemes?.dark === 'object' &&
appTheme.muiTheme.colorSchemes.dark.palette?.background
) {
return appTheme.muiTheme.colorSchemes.dark.palette.background;
}
return {
paper: darken(theme.colorSchemes.dark.palette.primary.dark, 0.8),
default: darken(theme.colorSchemes.dark.palette.primary.dark, 0.9),
};
}
return undefined;
};
export const createTheme = (
themeMode: ThemeMode,
appTheme: AppTheme,
@@ -33,93 +87,78 @@ export const createTheme = (
) => {
const systemMode = MediaQuery.getSystemThemeMode();
const appThemeType = (appTheme.muiTheme.palette as any)?.type ?? appTheme.muiTheme.palette?.mode;
const isStaticThemeMode = !!appThemeType;
const appThemeMode = appThemeType === 'dark' ? ThemeMode.DARK : ThemeMode.LIGHT;
const staticThemeMode = isStaticThemeMode ? appThemeMode : undefined;
const mode = staticThemeMode ?? (themeMode === ThemeMode.SYSTEM ? systemMode : themeMode);
const mode = themeMode === ThemeMode.SYSTEM ? systemMode : themeMode;
const isDarkMode = mode === ThemeMode.DARK;
const setPureBlackMode = isDarkMode && pureBlackMode;
const baseTheme = createMuiTheme({
direction,
...appTheme.muiTheme,
palette: {
mode,
...(appTheme.muiTheme.palette ?? {}),
},
});
const themeForColors = createMuiTheme({ ...appTheme.muiTheme, defaultColorScheme: mode });
const backgroundTrueBlack: Palette['background'] = {
paper: '#111',
default: '#000',
};
const backgroundDark: Palette['background'] = {
paper: darken(baseTheme.palette.primary.dark, 0.75),
default: darken(baseTheme.palette.primary.dark, 0.85),
};
const backgroundLight: Palette['background'] = {
paper: lighten(baseTheme.palette.primary.dark, 0.8),
default: lighten(baseTheme.palette.primary.dark, 0.9),
};
const backgroundThemeMode = isDarkMode ? backgroundDark : backgroundLight;
const automaticBackground = setPureBlackMode ? backgroundTrueBlack : backgroundThemeMode;
const appThemeBackground = appTheme.muiTheme.palette?.background;
const requiresAutomaticBackground = setPureBlackMode || !appThemeBackground;
const background = requiresAutomaticBackground ? automaticBackground : appThemeBackground;
const colorTheme = createMuiTheme(baseTheme, {
palette: {
background,
},
});
const suwayomiTheme = createMuiTheme(colorTheme, {
components: {
...appTheme.muiTheme.components,
MuiUseMediaQuery: {
defaultProps: {
noSsr: true,
},
const suwayomiTheme = createMuiTheme(
deepmerge(appTheme.muiTheme, {
defaultColorScheme: mode,
direction,
colorSchemes: {
light: appTheme.muiTheme.colorSchemes?.light
? {
palette: {
background: getBackgroundColor('light', appTheme, themeForColors),
},
}
: undefined,
dark: appTheme.muiTheme.colorSchemes?.dark
? {
palette: {
background: getBackgroundColor('dark', appTheme, themeForColors, setPureBlackMode),
},
}
: undefined,
},
MuiCssBaseline: {
...appTheme.muiTheme.components?.MuiCssBaseline,
styleOverrides:
typeof appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides === 'object'
? {
...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides,
'*::-webkit-scrollbar': applyStyles(CSS.supports('-webkit-touch-callout', 'none'), {
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': applyStyles(CSS.supports('-webkit-touch-callout', 'none'), {
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': applyStyles(
CSS.supports('-webkit-touch-callout', 'none'),
{
borderWidth: '2px',
// @ts-ignore - '*::-webkit-scrollbar-thumb:hover' is a valid key
components: {
...appTheme.muiTheme.components,
MuiUseMediaQuery: {
defaultProps: {
noSsr: true,
},
},
MuiCssBaseline: {
...appTheme.muiTheme.components?.MuiCssBaseline,
styleOverrides:
typeof appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides === 'object'
? {
...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides,
'*::-webkit-scrollbar': applyStyles(CSS.supports('-webkit-touch-callout', 'none'), {
width: `${SCROLLBAR_SIZE}px`,
height: `${SCROLLBAR_SIZE}px`,
// @ts-ignore - '*::-webkit-scrollbar' is a valid key
...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides?.[
'*::-webkit-scrollbar-thumb:hover'
'*::-webkit-scrollbar'
],
},
),
}
: `
}),
'*::-webkit-scrollbar-thumb': applyStyles(
CSS.supports('-webkit-touch-callout', 'none'),
{
border: '4px solid rgba(0, 0, 0, 0)',
backgroundClip: 'padding-box',
borderRadius: '9999px',
backgroundColor: `${themeForColors.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': applyStyles(
CSS.supports('-webkit-touch-callout', 'none'),
{
borderWidth: '2px',
// @ts-ignore - '*::-webkit-scrollbar-thumb:hover' is a valid key
...appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides?.[
'*::-webkit-scrollbar-thumb:hover'
],
},
),
}
: `
@supports not (-webkit-touch-callout: none) {
/* CSS for other than iOS devices */
*::-webkit-scrollbar {
@@ -130,7 +169,7 @@ export const createTheme = (
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: 9999px;
background-color: ${colorTheme.palette.primary[isDarkMode ? 'dark' : 'light']};
background-color: ${themeForColors.palette.primary[isDarkMode ? 'dark' : 'light']};
}
*::-webkit-scrollbar-thumb:hover {
border-width: 2px;
@@ -139,9 +178,10 @@ export const createTheme = (
${appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides ?? ''}
}
`,
},
},
},
});
}),
);
return responsiveFontSizes(suwayomiTheme);
};