Merge pull request #4730 from manyfold3d/dark-mode-tomselect

Floppy · web-flow · commit ee5a1577dd19 · 2025-09-17T15:34:27.000+01:00
Fix unreadable tomselect dropdowns in dark mode or dark themes
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -21,6 +21,8 @@ $ra-font-path: "https://cdn.jsdelivr.net/npm/@infinizhen/rpg-awesome-continued@1
 @import '@uppy/core/dist/style.min';
 @import '@uppy/dashboard/dist/style.min';
 
+@import 'src/dark-theme-overrides';
+
 .ts-control {
 	padding: 1px;
 }
diff --git a/app/assets/stylesheets/src/dark-theme-overrides.scss b/app/assets/stylesheets/src/dark-theme-overrides.scss
@@ -0,0 +1,23 @@
+@mixin tom-select-dark-mode() {
+
+	#model_tag_list-ts-dropdown,
+	.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/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -15,7 +15,7 @@
     <%= yield :head %>
   </head>
 
-  <body>
+  <body class="<%= "#{SiteSettings.theme}-theme" %>">
     <%= skip_link "content", t(".skip_to_content") %>
     <%= render "application/navbar" %>
     <%= yield :breadcrumbs %>

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,8 @@ $ra-font-path: "https://cdn.jsdelivr.net/npm/@infinizhen/rpg-awesome-continued@1`
`21`	`21`	`@import '@uppy/core/dist/style.min';`
`22`	`22`	`@import '@uppy/dashboard/dist/style.min';`
`23`	`23`
	`24`	`+@import 'src/dark-theme-overrides';`
	`25`	`+`
`24`	`26`	`.ts-control {`
`25`	`27`	`padding: 1px;`
`26`	`28`	`}`