From 9dc3b10fe9eafa3db2aaca06a5b2de32c51e161f Mon Sep 17 00:00:00 2001
From: Abdo <abdo@abdnh.net>
Date: Sat, 22 Jun 2024 12:43:34 +0300
Subject: [PATCH] Fix deck config input's background color in Qt5 (#3243)

---
 ts/lib/components/ConfigInput.svelte           |  7 +++++++
 ts/routes/deck-options/FsrsOptions.svelte      |  5 +++--
 ts/routes/deck-options/WeightsSearchRow.svelte | 14 ++++++++++++++
 3 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 ts/routes/deck-options/WeightsSearchRow.svelte

diff --git a/ts/lib/components/ConfigInput.svelte b/ts/lib/components/ConfigInput.svelte
index c744ca541..945a1257f 100644
--- a/ts/lib/components/ConfigInput.svelte
+++ b/ts/lib/components/ConfigInput.svelte
@@ -3,6 +3,8 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import { pageTheme } from "$lib/sveltelib/theme";
+
     const rtl: boolean = window.getComputedStyle(document.body).direction == "rtl";
 
     export let grow = true;
@@ -11,6 +13,7 @@
 <div
     class="config-input position-relative justify-content-end"
     class:flex-grow-1={grow}
+    class:nightMode={$pageTheme.isDark}
 >
     <div class="revert" class:rtl>
         <slot name="revert" />
@@ -39,5 +42,9 @@
         .revert:hover {
             color: var(--fg);
         }
+        &.nightMode :global(input),
+        &.nightMode :global(textarea) {
+            background-color: rgb(59, 59, 59);
+        }
     }
 </style>
diff --git a/ts/routes/deck-options/FsrsOptions.svelte b/ts/routes/deck-options/FsrsOptions.svelte
index 6887c8561..e836e1dc8 100644
--- a/ts/routes/deck-options/FsrsOptions.svelte
+++ b/ts/routes/deck-options/FsrsOptions.svelte
@@ -27,6 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import Warning from "./Warning.svelte";
     import WeightsInputRow from "./WeightsInputRow.svelte";
+    import WeightsSearchRow from "./WeightsSearchRow.svelte";
 
     export let state: DeckOptionsState;
     export let openHelpModal: (String) => void;
@@ -281,11 +282,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </SettingTitle>
     </WeightsInputRow>
 
-    <input
+    <WeightsSearchRow
         bind:value={$config.weightSearch}
         placeholder={defaultWeightSearch}
-        class="w-100 mb-1"
     />
+
     <DateInput bind:date={$config.ignoreRevlogsBeforeDate}>
         <SettingTitle on:click={() => openHelpModal("ignoreBefore")}>
             {tr.deckConfigIgnoreBefore()}
diff --git a/ts/routes/deck-options/WeightsSearchRow.svelte b/ts/routes/deck-options/WeightsSearchRow.svelte
new file mode 100644
index 000000000..45b3f2225
--- /dev/null
+++ b/ts/routes/deck-options/WeightsSearchRow.svelte
@@ -0,0 +1,14 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import ConfigInput from "$lib/components/ConfigInput.svelte";
+
+    export let value: string;
+    export let placeholder: string;
+</script>
+
+<ConfigInput>
+    <input bind:value {placeholder} class="w-100 mb-1" />
+</ConfigInput>