Dark UI for react-select

This commit is contained in:
Jamie Curnow
2025-09-22 23:14:00 +10:00
parent 94375bbc5f
commit d85e515ab9
8 changed files with 67 additions and 16 deletions

View File

@@ -1,3 +1,14 @@
:root {
color-scheme: light dark;
}
.light {
color-scheme: light;
}
.dark {
color-scheme: dark;
}
.modal-backdrop {
--tblr-backdrop-opacity: 0.8 !important;
}
@@ -12,3 +23,45 @@
.ml-1 {
margin-left: 0.25rem;
}
.react-select-container {
.react-select__control {
color: var(--tblr-body-color);
background-color: var(--tblr-bg-forms);
border: var(--tblr-border-width) solid var(--tblr-border-color);
.react-select__input {
color: var(--tblr-body-color) !important;
}
.react-select__single-value {
color: var(--tblr-body-color);
}
.react-select__multi-value {
border: 1px solid var(--tblr-border-color);
background-color: var(--tblr-bg-surface-tertiary);
color: var(--tblr-secondary) !important;
.react-select__multi-value__label {
color: var(--tblr-secondary) !important;
}
}
}
.react-select__menu {
background-color: var(--tblr-bg-forms);
.react-select__option {
background: rgba(var(--tblr-primary-rgb), .04);
color: inherit !important;
&.react-select__option--is-focused {
background: rgba(var(--tblr-primary-rgb), .1);
}
&.react-select__option--is-focused.react-select__option--is-selected {
background: rgba(var(--tblr-primary-rgb), .2);
}
}
}
}