diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 8cd6867d4..dce06b2e5 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -19,12 +19,11 @@ $ra-font-path: "../fonts" !default;
 @import 'src/forms';
 
 @import 'tom-select/dist/css/tom-select.bootstrap5';
+@import 'src/tom-select-prefers-color-scheme-dark';
 
 @import '@uppy/core/dist/style.min';
 @import '@uppy/dashboard/dist/style.min';
 
-@import 'src/dark-theme-overrides';
-
 @import "driver.js/dist/driver";
 
 .ts-control {
diff --git a/app/assets/stylesheets/src/dark-theme-overrides.scss b/app/assets/stylesheets/src/dark-theme-overrides.scss
deleted file mode 100644
index 06998bc5b..000000000
--- a/app/assets/stylesheets/src/dark-theme-overrides.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@mixin tom-select-dark-mode() {
-
-	#model_tag_list-ts-dropdown,
-	.single .ts-control div[data-ts-item],
-	.ts-wrapper .ts-control input,
-	.ts-wrapper .ts-dropdown .ts-dropdown-content .option {
-		color: #fff !important;
-		-webkit-text-fill-color: #fff !important;
-	}
-
-	.ts-dropdown .active {
-		background-color: #375a7f !important;
-	}
-}
-
-@media (prefers-color-scheme: dark) {
-	@include tom-select-dark-mode();
-}
-
-body.darkly-theme,
-body.cyborg-theme,
-body.slate-theme {
-	@include tom-select-dark-mode();
-}
diff --git a/app/assets/stylesheets/src/tom-select-prefers-color-scheme-dark.scss b/app/assets/stylesheets/src/tom-select-prefers-color-scheme-dark.scss
new file mode 100644
index 000000000..7e8620934
--- /dev/null
+++ b/app/assets/stylesheets/src/tom-select-prefers-color-scheme-dark.scss
@@ -0,0 +1,49 @@
+// Copied from https://github.com/orchidjs/tom-select/issues/559#issuecomment-1756702498 by @silent-e - thank you!
+
+@media (prefers-color-scheme: dark) {
+
+	.ts-control,
+	.full .ts-control,
+	.ts-wrapper.single.input-active .ts-control {
+		background-color: var(--bs-body-bg);
+		border: var(--bs-border-width) solid var(--bs-border-color);
+		color: var(--bs-body-color);
+	}
+
+	.ts-control>.item,
+	.ts-control>input {
+		color: $input-color;
+	}
+
+	.ts-wrapper:not(.form-control):not(.form-select).single .ts-control,
+	.ts-wrapper.single:not(.form-control):not(.form-floating.form__text-area):not(.form-select) .ts-control {
+		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+	}
+
+	.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
+		border-inline-start-color: var(--bs-border-color);
+
+		&:hover {
+			background-color: var(--bs-secondary-bg);
+		}
+	}
+
+	.ts-wrapper.multi .ts-control>div {
+		background-color: var(--bs-secondary-bg);
+		color: var(--bs-body-color);
+	}
+
+	.ts-dropdown {
+		background-color: var(--bs-body-bg);
+		color: var(--bs-body-color);
+
+		.active {
+			background-color: var(--bs-secondary-bg);
+			color: var(--bs-body-color);
+		}
+
+		[data-selectable] .highlight {
+			background: $yellow-800;
+		}
+	}
+}