starred/manyfold
1
0 Fork 0
mirror of https://github.com/manyfold3d/manyfold.git synced 2026-10-22 19:52:18 -05:00
Code Issues Packages Projects Releases 10 Wiki Activity

Fix searchable select appearance in dark mode

Browse Source 
Using @silent-e's tom-select dark mode media query from https://github.com/orchidjs/tom-select/issues/559#issuecomment-1756702498
This commit is contained in:
James Smith committed 2025-11-03 12:58:21 +00:00
1 parent aa4aa22df1
commit db07cd2d7a
3 files changed
+50 -26
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/assets/stylesheets/application.scss
+1 -2
View File
@@ -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 {
app/assets/stylesheets/src/dark-theme-overrides.scss
-24
View File
@@ -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();
}
app/assets/stylesheets/src/tom-select-prefers-color-scheme-dark.scss
+49
View File
@@ -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;
}
}
}