fix(pdf): don't apply theme colors where canvas filter is unsupported, closes #3912 (#3915)

apps/readest-app/src/app/reader/components/ViewMenu.tsx

@@ -335,7 +335,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({ bookKey, setIsDropdownOpen }) => {
         Icon={themeMode === 'dark' ? BiMoon : themeMode === 'light' ? BiSun : TbSunMoon}
         onClick={cycleThemeMode}
       />
-      {bookData.book?.format === 'PDF' && (
+      {bookData.book?.format === 'PDF' && appService?.supportsCanvasContext2DFilter && (
         <MenuItem
           label={_('Apply Theme Colors to PDF')}
           Icon={applyThemeToPDF ? MdCheck : undefined}

apps/readest-app/src/services/appService.ts

@@ -57,6 +57,7 @@ export abstract class BaseAppService implements AppService {
   hasIAP = false;
   canCustomizeRootDir = false;
   canReadExternalDir = false;
+  supportsCanvasContext2DFilter = true;
   distChannel = 'readest' as DistChannel;
   storefrontRegionCode: string | null = null;
   isOnlineCatalogsAccessible = true;

apps/readest-app/src/services/nativeAppService.ts

@@ -438,6 +438,8 @@ export class NativeAppService extends BaseAppService {
   // See: https://github.com/tauri-apps/tauri/issues/3716
   override canCustomizeRootDir = DIST_CHANNEL !== 'appstore';
   override canReadExternalDir = DIST_CHANNEL !== 'appstore' && DIST_CHANNEL !== 'playstore';
+  override supportsCanvasContext2DFilter =
+    OS_TYPE !== 'ios' && OS_TYPE !== 'macos' && OS_TYPE !== 'linux';
   override distChannel = DIST_CHANNEL;
   override storefrontRegionCode: string | null = null;
   override isOnlineCatalogsAccessible = true;

apps/readest-app/src/services/webAppService.ts

@@ -2,6 +2,7 @@ import { FileSystem, BaseDir, AppPlatform, ResolvedPath, FileItem } from '@/type
 import { DatabaseOpts, DatabaseService } from '@/types/database';
 import { SchemaType } from '@/services/database/migrate';
 import { getOSPlatform, isValidURL } from '@/utils/misc';
+import { isSafariBrowser } from '@/utils/ua';
 import { RemoteFile } from '@/utils/file';
 import { isPWA } from './environment';
 import { BaseAppService } from './appService';
@@ -283,6 +284,7 @@ export class WebAppService extends BaseAppService {
   fs = indexedDBFileSystem;
   override isMobile = ['android', 'ios'].includes(getOSPlatform());
   override appPlatform = 'web' as AppPlatform;
+  override supportsCanvasContext2DFilter = !isSafariBrowser();
   override hasSafeAreaInset = isPWA();
 
   override async init() {

apps/readest-app/src/types/system.ts

@@ -92,6 +92,7 @@ export interface AppService {
   isEink: boolean;
   canCustomizeRootDir: boolean;
   canReadExternalDir: boolean;
+  supportsCanvasContext2DFilter: boolean;
   distChannel: DistChannel;
   storefrontRegionCode: string | null;
   isOnlineCatalogsAccessible: boolean;

apps/readest-app/src/utils/ua.ts

@@ -69,3 +69,9 @@ export const parseWebViewVersion = (appService: AppService | null): number => {
   const versionMatch = webViewInfo.match(/([0-9]+)\./);
   return versionMatch ? parseFloat(versionMatch[1]!) : 0;
 };
+
+export const isSafariBrowser = (): boolean => {
+  if (typeof navigator === 'undefined') return false;
+  const ua = navigator.userAgent;
+  return /Safari/.test(ua) && !/Chrome|Chromium|CriOS|FxiOS|EdgiOS|Edg\//.test(ua);
+};