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

Move "theme.tsx" to proper module

Browse Source
This commit is contained in:
schroda
2024-12-11 13:57:24 +01:00
parent 7ffcfc1a16
commit b3e3d94bda
20 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/modules/core/components/menu/NestedMenuItem.tsx
View File

@@ -35,7 +35,7 @@ import Box from '@mui/material/Box';
import { OverridableComponent } from '@mui/material/OverridableComponent';
import { SvgIconTypeMap } from '@mui/material/SvgIcon';
import { IconMenuItem } from '@/modules/core/components/menu/IconMenuItem.tsx';
import { getOptionForDirection } from '@/theme.tsx';
import { getOptionForDirection } from '@/modules/theme/services/theme.tsx';
import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
export type NestedMenuItemProps = Omit<MuiMenuItemProps, 'button'> & {

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

@@ -14,7 +14,7 @@ import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
import { useTranslation } from 'react-i18next';
import { CacheProvider } from '@emotion/react';
import { SnackbarProvider } from 'notistack';
import { createAndSetTheme } from '@/theme.tsx';
import { createAndSetTheme } from '@/modules/theme/services/theme.tsx';
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
import { ThemeMode, ThemeModeContext } from '@/modules/theme/contexts/ThemeModeContext.tsx';
import { NavBarContextProvider } from '@/modules/navigation-bar/contexts/NavBarContextProvider.tsx';

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

@@ -10,7 +10,7 @@ import { createRoot } from 'react-dom/client';
import { ThemeProvider } from '@mui/material/styles';
import { ConfirmDialog } from '@/modules/core/components/ConfirmDialog.tsx';
import { ControlledPromise } from '@/lib/ControlledPromise.ts';
import { getCurrentTheme } from '@/theme.tsx';
import { getCurrentTheme } from '@/modules/theme/services/theme.tsx';
export const awaitConfirmation = async (
dialogProps: Omit<React.ComponentProps<typeof ConfirmDialog>, 'onCancel' | 'onConfirm'>,

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

@@ -9,7 +9,7 @@
import useMediaQuery from '@mui/material/useMediaQuery';
import { Breakpoint } from '@mui/material/styles';
import { useCallback, useState } from 'react';
import { getCurrentTheme } from '@/theme.tsx';
import { getCurrentTheme } from '@/modules/theme/services/theme.tsx';
import { ThemeMode } from '@/modules/theme/contexts/ThemeModeContext.tsx';
import { AppStorage } from '@/lib/storage/AppStorage.ts';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';

2
src/modules/navigation-bar/components/DefaultNavBar.tsx
View File

@@ -28,7 +28,7 @@ import Stack from '@mui/material/Stack';
import { useTheme } from '@mui/material/styles';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { useBackButton } from '@/modules/core/hooks/useBackButton.ts';
import { useGetOptionForDirection } from '@/theme.tsx';
import { useGetOptionForDirection } from '@/modules/theme/services/theme.tsx';
import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
import { DesktopSideBar } from '@/modules/navigation-bar/components/DesktopSideBar.tsx';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';

2
src/modules/navigation-bar/components/DesktopSideBar.tsx
View File

@@ -22,7 +22,7 @@ import Box from '@mui/material/Box';
import ListItem from '@mui/material/ListItem';
import Tooltip from '@mui/material/Tooltip';
import { ListItemLink } from '@/modules/core/components/ListItemLink.tsx';
import { useGetOptionForDirection } from '@/theme.tsx';
import { useGetOptionForDirection } from '@/modules/theme/services/theme.tsx';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
import { NavbarItem } from '@/modules/navigation-bar/NavigationBar.types.ts';

2
src/modules/reader/components/ReaderHotkeys.tsx
View File

@@ -23,7 +23,7 @@ import { MangaIdInfo } from '@/modules/manga/Manga.types.ts';
import { HotkeyScope } from '@/modules/hotkeys/Hotkeys.types.ts';
import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
import { ScrollDirection, ScrollOffset } from '@/modules/core/Core.types.ts';
import { getOptionForDirection } from '@/theme.tsx';
import { getOptionForDirection } from '@/modules/theme/services/theme.tsx';
const useHotkeys = (...args: Parameters<typeof useHotKeysHook>): ReturnType<typeof useHotKeysHook> => {
const [keys, callback, options, dependencies] = args;

2
src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx
View File

@@ -22,7 +22,7 @@ import { Link as RouterLink } from 'react-router-dom';
import { alpha } from '@mui/material/styles';
import Tooltip from '@mui/material/Tooltip';
import Slide from '@mui/material/Slide';
import { useGetOptionForDirection } from '@/theme.tsx';
import { useGetOptionForDirection } from '@/modules/theme/services/theme.tsx';
import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts';
import { useBackButton } from '@/modules/core/hooks/useBackButton.ts';

2
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
View File

@@ -16,7 +16,7 @@ import PushPinIcon from '@mui/icons-material/PushPin';
import Divider from '@mui/material/Divider';
import { useCallback, useLayoutEffect, useRef, useState } from 'react';
import Drawer from '@mui/material/Drawer';
import { useGetOptionForDirection } from '@/theme.tsx';
import { useGetOptionForDirection } from '@/modules/theme/services/theme.tsx';
import { ReaderNavBarDesktopProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
import { ReaderNavContainer } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavContainer.tsx';
import { ReaderNavBarDesktopMetadata } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopMetadata.tsx';

2
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx
View File

@@ -21,7 +21,7 @@ import { Chapters } from '@/modules/chapter/services/Chapters.ts';
import { ReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
import { ReaderChapterList } from '@/modules/reader/components/overlay/navigation/ReaderChapterList.tsx';
import { ReaderNavBarDesktopNextPreviousButton } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopNextPreviousButton.tsx';
import { getOptionForDirection } from '@/theme.tsx';
import { getOptionForDirection } from '@/modules/theme/services/theme.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { ReaderResumeMode } from '@/modules/reader/types/Reader.types.ts';

2
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopPageNavigation.tsx
View File

@@ -16,7 +16,7 @@ import { Select } from '@/modules/core/components/inputs/Select.tsx';
import { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
import { useGetOptionForDirection } from '@/theme.tsx';
import { useGetOptionForDirection } from '@/modules/theme/services/theme.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { ReaderNavBarDesktopNextPreviousButton } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopNextPreviousButton.tsx';
import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/modules/reader/constants/ReaderSettings.constants.tsx';

2
src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx
View File

@@ -25,7 +25,7 @@ import {
getProgressBarPositionInfo,
useHandleProgressDragging,
} from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
import { getOptionForDirection as getOptionForDirectionImpl } from '@/theme.tsx';
import { getOptionForDirection as getOptionForDirectionImpl } from '@/modules/theme/services/theme.tsx';
import { ReaderProgressBarSlotsActionArea } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlotsActionArea.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';

2
src/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx
View File

@@ -13,7 +13,7 @@ import { useMetadataServerSettings } from '@/modules/settings/services/ServerSet
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
import { AppThemes, getTheme } from '@/modules/theme/services/AppThemes.ts';
import { ThemeMode } from '@/modules/theme/contexts/ThemeModeContext.tsx';
import { createTheme } from '@/theme.tsx';
import { createTheme } from '@/modules/theme/services/theme.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { DIRECTION_TO_CACHE } from '@/modules/theme/ThemeDirectionCache.ts';

2
src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
View File

@@ -19,7 +19,7 @@ import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/Rea
import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
import { getOptionForDirection } from '@/theme.tsx';
import { getOptionForDirection } from '@/modules/theme/services/theme.tsx';
import { ProgressBarPosition, ReaderResumeMode } from '@/modules/reader/types/Reader.types.ts';
import { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx';
import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';

2
src/modules/reader/services/ReaderControls.ts
View File

@@ -10,7 +10,7 @@ import { MutableRefObject, useCallback, useMemo } from 'react';
import { Direction, useTheme } from '@mui/material/styles';
import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
import { getNextIndexFromPage, getNextPageIndex, getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
import { getOptionForDirection } from '@/theme.tsx';
import { getOptionForDirection } from '@/modules/theme/services/theme.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
import {

2
src/modules/reader/utils/ReaderPager.utils.tsx
View File

@@ -24,7 +24,7 @@ import { ReaderPage } from '@/modules/reader/components/viewer/ReaderPage.tsx';
import { reverseString } from '@/util/Strings.ts';
import { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
import { DirectionOffset } from '@/Base.types.ts';
import { getOptionForDirection } from '@/theme.tsx';
import { getOptionForDirection } from '@/modules/theme/services/theme.tsx';
import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
type CSSObject = ReturnType<Theme['applyStyles']>;

2
src/modules/reader/utils/ReaderProgressBar.utils.tsx
View File

@@ -8,7 +8,7 @@
import { RefObject, useEffect } from 'react';
import { ReaderProgressBarProps, TReaderProgressCurrentPage } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { getOptionForDirection as getOptionForDirectionImpl } from '@/theme.tsx';
import { getOptionForDirection as getOptionForDirectionImpl } from '@/modules/theme/services/theme.tsx';
import { ProgressBarPosition } from '@/modules/reader/types/Reader.types.ts';
import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';

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

@@ -21,7 +21,7 @@ import EditIcon from '@mui/icons-material/Edit';
import { bindDialog, usePopupState } from 'material-ui-popup-state/hooks';
import { ThemeModeContext } from '@/modules/theme/contexts/ThemeModeContext.tsx';
import { AppTheme, hasMissingFonts, loadThemeFonts } from '@/modules/theme/services/AppThemes.ts';
import { createTheme } from '@/theme.tsx';
import { createTheme } from '@/modules/theme/services/theme.tsx';
import { ThemeCreationDialog } from '@/modules/theme/components/CreateThemeDialog.tsx';
import { makeToast } from '@/modules/core/utils/Toast.ts';
import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';

164
src/modules/theme/services/theme.tsx Normal file
View File

@@ -0,0 +1,164 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import {
createTheme as createMuiTheme,
darken,
Direction,
lighten,
Palette,
responsiveFontSizes,
Theme,
useTheme,
} from '@mui/material/styles';
import { useCallback } from 'react';
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';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
const SCROLLBAR_SIZE = 14;
export const createTheme = (
themeMode: ThemeMode,
appTheme: AppTheme,
pureBlackMode: boolean = false,
direction: Direction = 'ltr',
) => {
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 isDarkMode = mode === ThemeMode.DARK;
const setPureBlackMode = isDarkMode && pureBlackMode;
const baseTheme = createMuiTheme({
direction,
...appTheme.muiTheme,
palette: {
mode,
...(appTheme.muiTheme.palette ?? {}),
},
});
const backgroundTrueBlack: Palette['background'] = {
paper: '#111',
default: '#000',
};
const backgroundDark: Palette['background'] = {
paper: darken(baseTheme.palette.primary.main, 0.75),
default: darken(baseTheme.palette.primary.main, 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,
},
},
MuiCssBaseline: {
...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 {
width: ${SCROLLBAR_SIZE}px;
height: ${SCROLLBAR_SIZE}px;
}
*::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: 9999px;
background-color: ${colorTheme.palette.primary[isDarkMode ? 'dark' : 'light']};
}
*::-webkit-scrollbar-thumb:hover {
border-width: 2px;
}
${appTheme.muiTheme.components?.MuiCssBaseline?.styleOverrides ?? ''}
`,
},
},
});
return responsiveFontSizes(suwayomiTheme);
};
let theme: Theme;
export const getCurrentTheme = () => theme;
export const createAndSetTheme = (...args: Parameters<typeof createTheme>) => {
theme = createTheme(...args);
loadThemeFonts(theme).catch(defaultPromiseErrorHandler('theme::createAndSetTheme'));
return theme;
};
export const getOptionForDirection = <T,>(
ltrOption: T,
rtlOption: T,
direction: Theme['direction'] = theme?.direction ?? 'ltr',
): T => (direction === 'ltr' ? ltrOption : rtlOption);
export const useGetOptionForDirection = (): typeof getOptionForDirection => {
const muiTheme = useTheme();
return useCallback(
<T,>(...args: Parameters<typeof getOptionForDirection<T>>) => getOptionForDirection(...args),
[muiTheme.direction],
);
};

2
src/modules/tracker/components/TrackerSearch.tsx
View File

@@ -29,7 +29,7 @@ import { SearchTextField } from '@/modules/core/components/inputs/SearchTextFiel
import { makeToast } from '@/modules/core/utils/Toast.ts';
import { TrackerMangaCard } from '@/modules/tracker/components/cards/TrackerMangaCard.tsx';
import { DIALOG_PADDING } from '@/modules/tracker/Tracker.constants.ts';
import { useGetOptionForDirection } from '@/theme.tsx';
import { useGetOptionForDirection } from '@/modules/theme/services/theme.tsx';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';