diff --git a/ts/deckoptions/BUILD.bazel b/ts/deckoptions/BUILD.bazel
index a6a9119c3..b4ab8312e 100644
--- a/ts/deckoptions/BUILD.bazel
+++ b/ts/deckoptions/BUILD.bazel
@@ -70,6 +70,7 @@ ts_library(
         "//ts/lib",
         "//ts/lib:backend_proto",
         "//ts/sveltelib",
+        "//ts/components",
         "@npm//lodash-es",
         "@npm//svelte",
     ],
diff --git a/ts/deckoptions/TextInputModal.svelte b/ts/deckoptions/TextInputModal.svelte
index 7f199a655..d1f24cd02 100644
--- a/ts/deckoptions/TextInputModal.svelte
+++ b/ts/deckoptions/TextInputModal.svelte
@@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     /* eslint
     @typescript-eslint/no-non-null-assertion: "off",
     */
-    import { onMount, onDestroy } from "svelte";
+    import { onMount, onDestroy, getContext } from "svelte";
+    import { nightModeKey } from "components/contextKeys";
     import Modal from "bootstrap/js/dist/modal";
 
     export let title: string;
@@ -44,16 +45,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         container.removeEventListener("shown.bs.modal", onShown);
         container.removeEventListener("hidden.bs.modal", onHidden);
     });
+
+    const nightMode = getContext<boolean>(nightModeKey);
 </script>
 
+<style lang="scss">
+    .default-colors {
+        background-color: var(--window-bg);
+        color: var(--text-fg);
+    }
+
+    .invert {
+        filter: invert(1) grayscale(100%) brightness(200%);
+    }
+</style>
+
 <div class="modal fade" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
     <div class="modal-dialog">
-        <div class="modal-content">
+        <div class="modal-content" class:default-colors={nightMode}>
             <div class="modal-header">
                 <h5 class="modal-title" id="modalLabel">{title}</h5>
                 <button
                     type="button"
                     class="btn-close"
+                    class:invert={nightMode}
                     data-bs-dismiss="modal"
                     aria-label="Close" />
             </div>
diff --git a/ts/deckoptions/textInputModal.ts b/ts/deckoptions/textInputModal.ts
index 2e1b26e1a..04ef8d6b0 100644
--- a/ts/deckoptions/textInputModal.ts
+++ b/ts/deckoptions/textInputModal.ts
@@ -7,17 +7,26 @@
 
 import TextInputModal from "./TextInputModal.svelte";
 
+import { checkNightMode } from "lib/nightmode";
+import { nightModeKey } from "components/contextKeys";
+
 export interface TextInputModalProps {
     title: string;
     prompt: string;
     startingValue?: string;
-    onOk: (string) => void;
+    onOk: (text: string) => void;
 }
 
 export function textInputModal(props: TextInputModalProps): TextInputModal {
     const target = document.getElementById("modal")!;
+
+    const nightMode = checkNightMode();
+    const context = new Map();
+    context.set(nightModeKey, nightMode);
+
     return new TextInputModal({
         target,
         props,
-    });
+        context,
+    } as any);
 }
diff --git a/ts/sass/bootstrap-dark.scss b/ts/sass/bootstrap-dark.scss
index 8a03737a2..716119f94 100644
--- a/ts/sass/bootstrap-dark.scss
+++ b/ts/sass/bootstrap-dark.scss
@@ -14,13 +14,4 @@
             background-color: var(--window-bg);
         }
     }
-
-    .modal-content {
-        background-color: var(--window-bg);
-        color: var(--text-fg);
-    }
-
-    .btn-close {
-        filter: invert(1) grayscale(100%) brightness(200%);
-    }
 }