diff --git a/ts/deckoptions/EnumSelector.svelte b/ts/deckoptions/EnumSelector.svelte
index fb7fec602..b349eb8e8 100644
--- a/ts/deckoptions/EnumSelector.svelte
+++ b/ts/deckoptions/EnumSelector.svelte
@@ -12,15 +12,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const nightMode = getContext<boolean>(nightModeKey);
 </script>
 
-<select bind:value class:visible-down-arrow={nightMode} class="form-select">
+<select
+    bind:value
+    class:nightMode
+    class:visible-down-arrow={nightMode}
+    class="form-select"
+>
     {#each choices as choice, idx}
         <option value={idx}>{choice}</option>
     {/each}
 </select>
 
 <style lang="scss">
+    @use "ts/sass/night-mode" as nightmode;
     @use "ts/sass/button_mixins" as button;
 
+    .nightMode {
+        @include nightmode.input;
+    }
+
     .visible-down-arrow {
         /* override the default down arrow */
         background-image: button.down-arrow(white);
diff --git a/ts/deckoptions/SpinBox.svelte b/ts/deckoptions/SpinBox.svelte
index ee23f9a35..767d10b9f 100644
--- a/ts/deckoptions/SpinBox.svelte
+++ b/ts/deckoptions/SpinBox.svelte
@@ -3,10 +3,15 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import { getContext } from "svelte";
+    import { nightModeKey } from "components/contextKeys";
+
     export let value: number;
     export let min = 1;
     export let max = 9999;
 
+    const nightMode = getContext<boolean>(nightModeKey);
+
     function checkMinMax() {
         if (value > max) {
             value = max;
@@ -24,5 +29,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {max}
     bind:value
     class="form-control"
+    class:nightMode
     on:blur={checkMinMax}
 />
+
+<style lang="scss">
+    @use "ts/sass/night-mode" as nightmode;
+
+    .nightMode {
+        @include nightmode.input;
+    }
+</style>
diff --git a/ts/deckoptions/SpinBoxFloat.svelte b/ts/deckoptions/SpinBoxFloat.svelte
index 9ed444110..619c6458c 100644
--- a/ts/deckoptions/SpinBoxFloat.svelte
+++ b/ts/deckoptions/SpinBoxFloat.svelte
@@ -3,6 +3,9 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import { getContext } from "svelte";
+    import { nightModeKey } from "components/contextKeys";
+
     export let value: number;
     export let min = 1;
     export let max = 9999;
@@ -10,6 +13,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let stringValue: string;
     $: stringValue = value.toFixed(2);
 
+    const nightMode = getContext<boolean>(nightModeKey);
+
     function update(this: HTMLInputElement): void {
         value = Math.min(max, Math.max(min, parseFloat(this.value)));
     }
@@ -20,9 +25,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     pattern="[0-9]*"
     inputmode="decimal"
     class="form-control"
+    class:nightMode
     {min}
     {max}
     step="0.01"
     value={stringValue}
     on:blur={update}
 />
+
+<style lang="scss">
+    @use "ts/sass/night-mode" as nightmode;
+
+    .nightMode {
+        @include nightmode.input;
+    }
+</style>
diff --git a/ts/deckoptions/StepsInput.svelte b/ts/deckoptions/StepsInput.svelte
index 8f187f1ff..533bca99a 100644
--- a/ts/deckoptions/StepsInput.svelte
+++ b/ts/deckoptions/StepsInput.svelte
@@ -3,6 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import { getContext } from "svelte";
+    import { nightModeKey } from "components/contextKeys";
     import { stepsToString, stringToSteps } from "./steps";
 
     export let value: number[];
@@ -10,9 +12,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let stringValue: string;
     $: stringValue = stepsToString(value);
 
+    const nightMode = getContext<boolean>(nightModeKey);
+
     function update(this: HTMLInputElement): void {
         value = stringToSteps(this.value);
     }
 </script>
 
-<input type="text" value={stringValue} on:blur={update} class="form-control" />
+<input
+    type="text"
+    value={stringValue}
+    class="form-control"
+    class:nightMode
+    on:blur={update}
+/>
+
+<style lang="scss">
+    @use "ts/sass/night-mode" as nightmode;
+
+    .nightMode {
+        @include nightmode.input;
+    }
+</style>
diff --git a/ts/deckoptions/Switch.svelte b/ts/deckoptions/Switch.svelte
index 1117e1f62..a8fe6678b 100644
--- a/ts/deckoptions/Switch.svelte
+++ b/ts/deckoptions/Switch.svelte
@@ -3,16 +3,22 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import { getContext } from "svelte";
+    import { nightModeKey } from "components/contextKeys";
+
     export let id: string | undefined;
     export let value: boolean;
     export let disabled = false;
+
+    const nightMode = getContext<boolean>(nightModeKey);
 </script>
 
 <div class="form-check form-switch">
     <input
         {id}
-        class="form-check-input"
         type="checkbox"
+        class="form-check-input"
+        class:nightMode
         bind:checked={value}
         {disabled}
     />
@@ -20,10 +26,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     .form-switch {
-        // bootstrap adds a default 2.5em left pad, which causes
-        // text to wrap prematurely
+        /* bootstrap adds a default 2.5em left pad, which causes */
+        /* text to wrap prematurely */
         padding-left: 0.5em;
     }
+
     .form-check-input {
         -webkit-appearance: none;
         height: 1.6em;
@@ -35,4 +42,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             margin-left: 1.5em;
         }
     }
+
+    .nightMode {
+        background-color: var(--frame-bg);
+        border-color: var(--border);
+    }
 </style>
diff --git a/ts/deckoptions/deckoptions-base.scss b/ts/deckoptions/deckoptions-base.scss
index 0bc6fdadf..88a64a3c6 100644
--- a/ts/deckoptions/deckoptions-base.scss
+++ b/ts/deckoptions/deckoptions-base.scss
@@ -4,7 +4,6 @@ $tooltip-max-width: 300px;
 
 @use "ts/sass/vars";
 @use "ts/sass/scrollbar";
-@use "ts/sass/bootstrap-dark";
 
 @import "ts/sass/base";
 @import "ts/sass/bootstrap/containers";
@@ -22,7 +21,6 @@ $tooltip-max-width: 300px;
 
 .night-mode {
     @include scrollbar.night-mode;
-    @include bootstrap-dark.night-mode;
 }
 
 .form-control,
diff --git a/ts/sass/night-mode.scss b/ts/sass/night-mode.scss
new file mode 100644
index 000000000..3a7eff2dd
--- /dev/null
+++ b/ts/sass/night-mode.scss
@@ -0,0 +1,11 @@
+/* Copyright: Ankitects Pty Ltd and contributors
+ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
+
+@mixin input {
+    background-color: var(--frame-bg);
+    border-color: var(--border);
+
+    &:focus {
+        background-color: var(--window-bg);
+    }
+}