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

Add auto reader background color

Browse Source
This commit is contained in:
schroda
2026-07-15 22:34:51 +02:00
parent 7559676e68
commit 3562f5f647
18 changed files with 440 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/features/reader/settings/ReaderSettings.constants.tsx
View File

@@ -144,6 +144,7 @@ const GLOBAL_READER_SETTING_OBJECT: Record<keyof IReaderSettingsGlobal, undefine
shouldShowPageNumber: undefined,
isStaticNav: undefined,
backgroundColor: undefined,
useAutoBackgroundColorContinuousMode: undefined,
hotkeys: undefined,
imagePreLoadAmount: undefined,
shouldUseAutoWebtoonMode: undefined,
@@ -180,6 +181,7 @@ export const DEFAULT_READER_SETTINGS: IReaderSettings = {
readingMode: ReadingMode.SINGLE_PAGE,
exitMode: ReaderExitMode.PREVIOUS,
backgroundColor: ReaderBackgroundColor.THEME,
useAutoBackgroundColorContinuousMode: false,
customFilter: {
brightness: {
value: CUSTOM_FILTER.brightness.default,
@@ -379,6 +381,8 @@ export const READER_BACKGROUND_TO_COLOR = {
[ReaderBackgroundColor.BLACK]: 'common.black',
[ReaderBackgroundColor.GRAY]: 'grey.200',
[ReaderBackgroundColor.WHITE]: 'common.white',
// Used as the fallback color
[ReaderBackgroundColor.AUTO]: 'background.default',
} as const satisfies Record<ReaderBackgroundColor, string>;
export const CONTINUOUS_READING_MODE_TO_SCROLL_DIRECTION: Record<

41
src/features/reader/settings/ReaderSettings.utils.tsx
View File

@@ -14,7 +14,12 @@ import type {
ReaderPagerProps,
SafeAreaInset,
} from '@/features/reader/Reader.types.ts';
import { ProgressBarPosition, ReaderPageScaleMode, ReadingMode } from '@/features/reader/Reader.types.ts';
import {
ProgressBarPosition,
ReaderBackgroundColor,
ReaderPageScaleMode,
ReadingMode,
} from '@/features/reader/Reader.types.ts';
import type { MangaGenreInfo, MangaSourceNameInfo } from '@/features/manga/Manga.types.ts';
import { Mangas } from '@/features/manga/services/Mangas.ts';
import { ReaderPagedPager } from '@/features/reader/viewer/pager/components/ReaderPagedPager.tsx';
@@ -22,6 +27,10 @@ import { ReaderDoublePagedPager } from '@/features/reader/viewer/pager/component
import { ReaderVerticalPager } from '@/features/reader/viewer/pager/components/ReaderVerticalPager.tsx';
import { ReaderHorizontalPager } from '@/features/reader/viewer/pager/components/ReaderHorizontalPager.tsx';
import { ScrollDirection } from '@/base/Base.types.ts';
import { READER_BACKGROUND_TO_COLOR } from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { getValueFromObject } from '@/lib/HelperFunctions.ts';
import type { Theme } from '@mui/material/styles';
import { Colors } from '@/lib/Colors.ts';
export const isOffsetDoubleSpreadPagesEditable = (readingMode: IReaderSettings['readingMode']): boolean =>
readingMode === ReadingMode.DOUBLE_PAGE;
@@ -117,3 +126,33 @@ export const getSafeAreaInsets = (
...(direction === ScrollDirection.Y && safeAreaInset.bottom ? ['env(safe-area-inset-bottom)'] : []),
...(direction === ScrollDirection.X && safeAreaInset.left ? ['env(safe-area-inset-left)'] : []),
];
export const getReaderBackgroundColor = (
backgroundColor: ReaderBackgroundColor,
pageBackgroundColor: string | undefined,
isContinuousReadingModeFlag: boolean,
useAutoBackgroundColorContinuousMode: boolean,
theme: Theme,
invertColors: boolean = false,
applySepia: boolean = false,
applyGrayscale: boolean = false,
): string => {
const applyFilters = (hex: string): string => {
const maybeGray = applyGrayscale ? Colors.grayscaleHex(hex) : hex;
const maybeSepia = applySepia ? Colors.sepiaHex(maybeGray) : maybeGray;
const maybeInverted = invertColors ? Colors.invertColorHex(maybeSepia) : maybeSepia;
return maybeInverted;
};
const isAuto = backgroundColor === ReaderBackgroundColor.AUTO;
const isAutoColorUsable = isAuto && !!pageBackgroundColor;
const isAutoColorAllowed = !isContinuousReadingModeFlag || useAutoBackgroundColorContinuousMode;
const useAutoColor = isAutoColorUsable && isAutoColorAllowed;
if (useAutoColor) {
return applyFilters(pageBackgroundColor);
}
return getValueFromObject(theme.palette, READER_BACKGROUND_TO_COLOR[backgroundColor]);
};

3
src/features/reader/settings/general/ReaderGeneralSettings.tsx
View File

@@ -33,7 +33,8 @@ export const ReaderGeneralSettings = ({
/>
<ReaderSettingBackgroundColor
backgroundColor={settings.backgroundColor}
updateSetting={(value) => updateSetting('backgroundColor', value)}
useAutoBackgroundColorContinuousMode={settings.useAutoBackgroundColorContinuousMode}
updateSetting={(...args) => updateSetting(...args)}
/>
<ReaderSettingProgressBarType
overlayMode={overlayMode}

34
src/features/reader/settings/general/components/ReaderSettingBackgroundColor.tsx
View File

@@ -12,6 +12,8 @@ import type { ValueToDisplayData } from '@/base/Base.types.ts';
import { ButtonSelectInput } from '@/base/components/inputs/ButtonSelectInput.tsx';
import type { IReaderSettingsWithDefaultFlag } from '@/features/reader/Reader.types.ts';
import { ReaderBackgroundColor } from '@/features/reader/Reader.types.ts';
import type { ReaderService } from '@/features/reader/services/ReaderService.ts';
import { CheckboxInput } from '@/base/components/inputs/CheckboxInput';
const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ReaderBackgroundColor> = {
[ReaderBackgroundColor.THEME]: {
@@ -30,6 +32,10 @@ const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ReaderBackgroundColor> = {
title: msg`White`,
icon: null,
},
[ReaderBackgroundColor.AUTO]: {
title: msg`Auto`,
icon: null,
},
};
const READER_BACKGROUND_COLOR_VALUES = Object.values(ReaderBackgroundColor).filter(
@@ -38,19 +44,29 @@ const READER_BACKGROUND_COLOR_VALUES = Object.values(ReaderBackgroundColor).filt
export const ReaderSettingBackgroundColor = ({
backgroundColor,
useAutoBackgroundColorContinuousMode,
updateSetting,
}: Pick<IReaderSettingsWithDefaultFlag, 'backgroundColor'> & {
updateSetting: (color: ReaderBackgroundColor) => void;
}: Pick<IReaderSettingsWithDefaultFlag, 'backgroundColor' | 'useAutoBackgroundColorContinuousMode'> & {
updateSetting: (...args: Parameters<typeof ReaderService.updateSetting>) => void;
}) => {
const { t } = useLingui();
return (
<ButtonSelectInput
label={t`Background color`}
value={backgroundColor}
values={READER_BACKGROUND_COLOR_VALUES}
setValue={updateSetting}
valueToDisplayData={VALUE_TO_DISPLAY_DATA}
/>
<>
<ButtonSelectInput
label={t`Background color`}
value={backgroundColor}
values={READER_BACKGROUND_COLOR_VALUES}
setValue={(value) => updateSetting('backgroundColor', value)}
valueToDisplayData={VALUE_TO_DISPLAY_DATA}
/>
{backgroundColor === ReaderBackgroundColor.AUTO && (
<CheckboxInput
label={t`Enable auto background color in continuous reading mode`}
checked={useAutoBackgroundColorContinuousMode}
onChange={(_, checked) => updateSetting('useAutoBackgroundColorContinuousMode', checked)}
/>
)}
</>
);
};