From 1fdbdf51852dad52c79201651376a25bde63ca88 Mon Sep 17 00:00:00 2001
From: Kenrick <kenrick95@gmail.com>
Date: Mon, 8 Jul 2024 23:15:17 +0800
Subject: [PATCH] Settings to invert colors of the images

Useful for novels, for reading in dark mode
---
 src/lib/components/Reader/Reader.svelte                 | 1 +
 src/lib/components/Settings/Reader/ReaderToggles.svelte | 3 ++-
 src/lib/settings/settings.ts                            | 2 ++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Reader/Reader.svelte b/src/lib/components/Reader/Reader.svelte
index e3f200c..feec332 100644
--- a/src/lib/components/Reader/Reader.svelte
+++ b/src/lib/components/Reader/Reader.svelte
@@ -340,6 +340,7 @@
       <div
         class="flex flex-row"
         class:flex-row-reverse={!volumeSettings.rightToLeft}
+        style:filter={`invert(${$settings.invertColors ? 1 : 0})`}
         on:dblclick={onDoubleTap}
         role="none"
         id="manga-panel"
diff --git a/src/lib/components/Settings/Reader/ReaderToggles.svelte b/src/lib/components/Settings/Reader/ReaderToggles.svelte
index 499dadb..6627633 100644
--- a/src/lib/components/Settings/Reader/ReaderToggles.svelte
+++ b/src/lib/components/Settings/Reader/ReaderToggles.svelte
@@ -13,7 +13,8 @@
     { key: 'bounds', text: 'Bounds', value: $settings.bounds },
     { key: 'mobile', text: 'Mobile', value: $settings.mobile },
     { key: 'showTimer', text: 'Show timer', value: $settings.showTimer },
-    { key: 'quickActions', text: 'Show quick actions', value: $settings.quickActions }
+    { key: 'quickActions', text: 'Show quick actions', value: $settings.quickActions },
+    { key: 'invertColors', text: 'Invert colors of the images', value: $settings.invertColors }
   ] as { key: SettingsKey; text: string; value: any }[];
 </script>
 
diff --git a/src/lib/settings/settings.ts b/src/lib/settings/settings.ts
index ebcc51c..c77eb27 100644
--- a/src/lib/settings/settings.ts
+++ b/src/lib/settings/settings.ts
@@ -57,6 +57,7 @@ export type Settings = {
   quickActions: boolean;
   fontSize: FontSize;
   zoomDefault: ZoomModes;
+  invertColors: boolean;
   volumeDefaults: VolumeDefaults;
   ankiConnectSettings: AnkiConnectSettings;
 };
@@ -84,6 +85,7 @@ const defaultSettings: Settings = {
   quickActions: true,
   fontSize: 'auto',
   zoomDefault: 'zoomFitToScreen',
+  invertColors: false,
   volumeDefaults: {
     singlePageView: false,
     rightToLeft: true,