Add "blend mode" to "custom color filter"

public/locales/en.json

@@ -869,6 +869,15 @@
         "invert": "Invert",
         "rgba": {
           "alpha": "Alpha",
+          "blend_mode": {
+            "darken": "Darken",
+            "default": "$t(global.label.default)",
+            "lighten": "Lighten",
+            "multiply": "Multiply",
+            "overlay": "Overlay",
+            "screen": "Screen",
+            "title": "Color filter blend mode"
+          },
           "blue": "Blue",
           "green": "Green",
           "red": "Red",

src/modules/reader/components/ReaderRGBAFilter.tsx

@@ -17,7 +17,7 @@ const BaseReaderRGBAFilter = ({
     readerNavBarWidth,
     customFilter: {
         rgba: {
-            value: { red, green, blue, alpha },
+            value: { red, green, blue, alpha, blendMode },
             enabled,
         },
     },
@@ -36,6 +36,7 @@ const BaseReaderRGBAFilter = ({
                 bottom: 0,
                 pointerEvents: 'none',
                 background: `rgba(${red} ${green} ${blue} / ${alpha}%)`,
+                mixBlendMode: `${blendMode}`,
             }}
         />
     );

src/modules/reader/components/settings/filters/ReaderSettingRGBA.tsx

@@ -13,9 +13,14 @@ import { CheckboxInput } from '@/modules/core/components/inputs/CheckboxInput.ts
 import { TranslationKey } from '@/Base.types.ts';
 import { SliderInput } from '@/modules/core/components/inputs/SliderInput.tsx';
 
-import { DEFAULT_READER_SETTINGS } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
+import {
+    DEFAULT_READER_SETTINGS,
+    READER_BLEND_MODE_VALUE_TO_DISPLAY_DATA,
+    READER_BLEND_MODE_VALUES,
+} from '@/modules/reader/constants/ReaderSettings.constants.tsx';
+import { ButtonSelectInput } from '@/modules/core/components/inputs/ButtonSelectInput.tsx';
 
-type RGBAType = keyof IReaderSettings['customFilter']['rgba']['value'];
+type RGBAType = Exclude<keyof IReaderSettings['customFilter']['rgba']['value'], 'blendMode'>;
 
 const RGBA_TYPE_TO_TRANSLATION_KEY: Record<RGBAType, TranslationKey> = {
     red: 'reader.settings.custom_filter.rgba.red',
@@ -52,7 +57,12 @@ export const ReaderSettingRGBA = ({
             />
             {rgba.enabled && (
                 <Stack sx={{ gap: 1 }}>
-                    {Object.entries(rgba.value).map(([key, value]) => (
+                    {Object.entries(rgba.value).map(([key, value]) => {
+                        if (key === 'blendMode') {
+                            return null;
+                        }
+
+                        return (
                             <SliderInput
                                 key={key}
                                 label={t(RGBA_TYPE_TO_TRANSLATION_KEY[key as RGBAType])}
@@ -94,7 +104,24 @@ export const ReaderSettingRGBA = ({
                                     },
                                 }}
                             />
-                    ))}
+                        );
+                    })}
+                    <ButtonSelectInput
+                        label={t('reader.settings.custom_filter.rgba.blend_mode.title')}
+                        value={rgba.value.blendMode}
+                        values={READER_BLEND_MODE_VALUES}
+                        setValue={(value) =>
+                            updateSetting(
+                                'rgba',
+                                {
+                                    ...rgba,
+                                    value: { ...rgba.value, blendMode: value },
+                                },
+                                true,
+                            )
+                        }
+                        valueToDisplayData={READER_BLEND_MODE_VALUE_TO_DISPLAY_DATA}
+                    />
                 </Stack>
             )}
         </Stack>

src/modules/reader/constants/ReaderSettings.constants.tsx

@@ -20,6 +20,7 @@ import {
     ProgressBarPosition,
     ProgressBarType,
     ReaderBackgroundColor,
+    ReaderBlendMode,
     ReaderExitMode,
     ReaderHotkey,
     ReaderOverlayMode,
@@ -108,6 +109,7 @@ export const DEFAULT_READER_SETTINGS: IReaderSettings = {
                 green: 0,
                 blue: 0,
                 alpha: 0,
+                blendMode: ReaderBlendMode.DEFAULT,
             },
             enabled: false,
         },
@@ -300,3 +302,32 @@ export const AUTO_SCROLL_SPEED = {
     max: 60,
     step: 0.5,
 };
+
+export const READER_BLEND_MODE_VALUE_TO_DISPLAY_DATA = {
+    [ReaderBlendMode.DEFAULT]: {
+        title: 'reader.settings.custom_filter.rgba.blend_mode.default',
+        icon: null,
+    },
+    [ReaderBlendMode.MULTIPLY]: {
+        title: 'reader.settings.custom_filter.rgba.blend_mode.multiply',
+        icon: null,
+    },
+    [ReaderBlendMode.SCREEN]: {
+        title: 'reader.settings.custom_filter.rgba.blend_mode.screen',
+        icon: null,
+    },
+    [ReaderBlendMode.OVERLAY]: {
+        title: 'reader.settings.custom_filter.rgba.blend_mode.overlay',
+        icon: null,
+    },
+    [ReaderBlendMode.DARKEN]: {
+        title: 'reader.settings.custom_filter.rgba.blend_mode.darken',
+        icon: null,
+    },
+    [ReaderBlendMode.LIGHTEN]: {
+        title: 'reader.settings.custom_filter.rgba.blend_mode.lighten',
+        icon: null,
+    },
+} satisfies ValueToDisplayData<ReaderBlendMode>;
+
+export const READER_BLEND_MODE_VALUES = Object.values(ReaderBlendMode);

src/modules/reader/services/ReaderSettingsMetadata.ts

@@ -7,6 +7,8 @@
  */
 
 import { useEffect, useMemo } from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies,no-restricted-imports
+import { deepmerge } from '@mui/utils';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import {
     requestUpdateMangaMetadata,
@@ -109,9 +111,11 @@ const convertMetadataToSettings = (
     tapZoneInvertMode:
         jsonSaveParse<IReaderSettings['tapZoneInvertMode']>((metadata.tapZoneInvertMode as string) ?? '') ??
         defaultSettings.tapZoneInvertMode,
-    customFilter:
+    customFilter: deepmerge(
+        defaultSettings.customFilter,
         jsonSaveParse<IReaderSettings['customFilter']>((metadata.customFilter as string) ?? '') ??
             defaultSettings.customFilter,
+    ),
     readerWidth:
         jsonSaveParse<IReaderSettings['readerWidth']>((metadata.readerWidth as string) ?? '') ??
         defaultSettings.readerWidth,

src/modules/reader/types/Reader.types.ts

@@ -79,6 +79,16 @@ export interface ReaderFilterRGBA {
     green: number;
     blue: number;
     alpha: number;
+    blendMode: ReaderBlendMode;
+}
+
+export enum ReaderBlendMode {
+    DEFAULT = 'normal',
+    MULTIPLY = 'multiply',
+    SCREEN = 'screen',
+    OVERLAY = 'overlay',
+    DARKEN = 'darken',
+    LIGHTEN = 'lighten',
 }
 
 export interface ReaderCustomFilter {