Support for Bootstrap's Dark Mode #2163

osterchrisi · 2024-11-13T22:59:54Z

Thanks for the amazing library. Bootstrap introduced a new dark mode in 5.3.3. it would be so good if the selectize library found a way to respect the "dark mode choice". Thank you!

srm3110 · 2024-12-03T20:41:34Z

This is my modified BS5 stylesheet for selectize.js. It uses the newer css classes that adapt to light/dark modes.

/**

Selectize (v0.15.2)
https://selectize.dev
Copyright (c) 2013-2015 Brian Reavis & contributors
Copyright (c) 2020-2023 Selectize Team & contributors
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
file except in compliance with the License. You may obtain a copy of the License at:
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
@author Brian Reavis [email protected]
@author Ris Adams [email protected]
*/

.selectize-control.plugin-drag_drop.multi>.selectize-input.dragging {
overflow: visible
}

.selectize-control.plugin-drag_drop.multi>.selectize-input>div.ui-sortable-placeholder {
visibility: visible !important;
background: var(--bs-gray-100) !important;
background: rgba(var(--bs-black-rgb), 0.06) !important;
border: 0 none !important;
box-shadow: inset 0 0 12px 4px var(--bs-white)
}

.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
content: "!";
visibility: hidden
}

.selectize-control.plugin-drag_drop .ui-sortable-helper {
box-shadow: 0 2px 5px rgba(var(--bs-black-rgb), 0.2)
}

.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header {
position: relative;
padding: 6px .75rem;
border-bottom: 1px solid var(--bs-gray-400);
background: var(--bs-gray-100);
border-radius: .375rem .375rem 0 0
}

.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header-close {
position: absolute;
right: .75rem;
top: 50%;
color: var(--bs-gray-800);
opacity: .4;
margin-top: -12px;
line-height: 20px;
font-size: 20px !important;
text-decoration: none
}

.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header-close:hover {
color: black
}

.selectize-dropdown.plugin-optgroup_columns .selectize-dropdown-content {
display: flex
}

.selectize-dropdown.plugin-optgroup_columns .optgroup {
border-right: 1px solid var(--bs-gray-100);
border-top: 0 none;
flex-grow: 1;
flex-basis: 0;
min-width: 0
}

.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
border-right: 0 none
}

.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
display: none
}

.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
border-top: 0 none
}

.selectize-control.plugin-remove_button .item {
display: inline-flex;
align-items: center;
padding-right: 0 !important
}

.selectize-control.plugin-remove_button .item .remove {
color: inherit;
text-decoration: none;
vertical-align: middle;
display: inline-block;
padding: 1px 5px;
border-left: 1px solid var(--bs-gray-300);
border-radius: 0 2px 2px 0;
box-sizing: border-box;
margin-left: 5px
}

.selectize-control.plugin-remove_button .item .remove:hover {
background: rgba(var(--bs-black-rgb), 0.05)
}

.selectize-control.plugin-remove_button .item.active .remove {
border-left-color: rgba(var(--bs-black-rgb), 0)
}

.selectize-control.plugin-remove_button .disabled .item .remove:hover {
background: 0
}

.selectize-control.plugin-remove_button .disabled .item .remove {
border-left-color: var(--bs-white)
}

.selectize-control.plugin-clear_button .clear {
text-decoration: none;
display: flex;
position: absolute;
height: 100%;
width: 25px;
top: 0;
right: calc(0.75rem - 5px);
color: var(--bs-black);
opacity: .4;
font-weight: bold;
border: 0;
cursor: pointer;
z-index: 1;
font-size: 21px;
justify-content: center;
align-items: center
}

.selectize-control.plugin-clear_button .clear:hover {
opacity: 1
}

.selectize-control.plugin-clear_button.single .clear {
right: calc(0.75rem - 5px + 1.5rem)
}

.selectize-dropdown.plugin-auto_position.selectize-position-top {
border-top: 1px solid var(--bs-gray-400);
border-bottom: 0 none;
border-radius: 3px 3px 0 0;
box-shadow: 0 -6px 12px rgba(var(--bs-black-rgb), 0.18)
}

.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active {
border-radius: 0 0 3px 3px;
border-top: 0 none
}

.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active::before {
top: 0;
bottom: unset
}

.selectize-control {
position: relative
}

.selectize-dropdown,
.selectize-input,
.selectize-input input {
color: var(--bs-body-color);
font-family: inherit;
font-size: inherit;
line-height: 1.5;
font-smoothing: inherit
}

.selectize-input,
.selectize-control.single .selectize-input.input-active {
background: var(--bs-body-bg);
cursor: text;
display: inline-block
}

.selectize-input {
border: 1px solid var(--bs-border-color);
padding: .375rem .75rem;
display: inline-block;
width: 100%;
position: relative;
z-index: 1;
box-sizing: border-box;
box-shadow: none;
border-radius: .375rem
}

.selectize-control.multi .selectize-input.has-items {
padding: calc(0.375rem - 1px - 0px) 0.75rem calc(0.375rem - 1px - 3px - 0px)
}

.selectize-input.full {
background-color: var(--bs-body-bg)
}

.selectize-input.disabled,
.selectize-input.disabled * {
cursor: default !important;
}

.selectize-input.focus {
box-shadow: inset 0 1px 2px rgba(var(--bs-black-rgb), 0.15)
}

.selectize-input.dropdown-active {
border-radius: .375rem .375rem 0 0
}

.selectize-input>* {
vertical-align: baseline;
display: inline-block;
transform: scale(1);
transform-origin: 0 0;
}

.selectize-control.multi .selectize-input>div {
cursor: pointer;
margin: 0 3px 3px 0;
padding: 1px 5px;
background: var(--bs-border-color);
color: var(--bs-body-color);
border: 0 solid var(--bs-border-color)
}

.selectize-control.multi .selectize-input>div.active {
background: var(--bs-gray-500);
color: var(--bs-white);
border: 0 solid rgba(var(--bs-black-rgb), 0)
}

.selectize-control.multi .selectize-input.disabled>div,
.selectize-control.multi .selectize-input.disabled>div.active {
color: var(--bs-gray-500);
background: var(--bs-white);
border: 0 solid var(--bs-white)
}

.selectize-input>input {
display: inline-block !important;
padding: 0 !important;
min-height: 0 !important;
max-height: none !important;
max-width: 100% !important;
margin: 0 !important;
text-indent: 0 !important;
border: 0 none !important;
background: none !important;
line-height: inherit !important;
user-select: auto !important;
box-shadow: none !important
}

.selectize-input>input::-ms-clear {
display: none
}

.selectize-input>input:focus {
outline: none !important
}

.selectize-input>input[placeholder] {
box-sizing: initial
}

.selectize-input.has-items>input {
margin: 0 0 !important
}

.selectize-input::after {
content: " ";
display: block;
clear: left
}

.selectize-input.dropdown-active::before {
content: " ";
display: block;
position: absolute;
background: var(--bs-body-bg);
height: 1px;
bottom: 0;
left: 0;
right: 0
}

.selectize-dropdown {
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 10;
border: 1px solid var(--bs-gray-400);
background: var(--bs-body-bg);
margin: -1px 0 0 0;
border-top: 0 none;
box-sizing: border-box;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border-radius: 0 0 .375rem .375rem
}

.selectize-dropdown [data-selectable] {
cursor: pointer;
overflow: hidden
}

.selectize-dropdown [data-selectable] .highlight {
background: rgba(255, 237, 40, 0.4);
border-radius: 1px
}

.selectize-dropdown .option,
.selectize-dropdown .optgroup-header,
.selectize-dropdown .no-results,
.selectize-dropdown .create {
padding: 3px .75rem
}

.selectize-dropdown .option,
.selectize-dropdown [data-disabled],
.selectize-dropdown [data-disabled] [data-selectable].option {
cursor: inherit;
opacity: .5
}

.selectize-dropdown [data-selectable].option {
opacity: 1;
cursor: pointer
}

.selectize-dropdown .optgroup:first-child .optgroup-header {
border-top: 0 none
}

.selectize-dropdown .optgroup-header {
color: var(--bs-gray-500);
background: var(--bs-white);
cursor: default
}

.selectize-dropdown .active {
background-color: var(--bs-primary-color);
color: var(--bs-white)
}

.selectize-dropdown .active.create {
color: var(--bs-gray-900)
}

.selectize-dropdown .selected {
background-color: var(--bs-primary-color);
color: var(--srm-blue)
}

.selectize-dropdown .create {
color: rgba(var(--bs-black-rgb), 0.50);
}

.selectize-dropdown .active:not(.selected) {
background: var(--bs-gray-100);
color: var(--bs-gray-900)
}

.selectize-dropdown-content {
overflow-y: auto;
overflow-x: hidden;
max-height: 200px;
overflow-scrolling: touch
}

.selectize-dropdown-emptyoptionlabel {
text-align: center
}

.selectize-dropdown .spinner {
display: inline-block;
width: 30px;
height: 30px;
margin: 3px .75rem
}

.selectize-dropdown .spinner:after {
content: " ";
display: block;
width: 24px;
height: 24px;
margin: 3px;
border-radius: 50%;
border: 5px solid var(--bs-gray-400);
border-color: var(--bs-gray-400) transparent var(--bs-gray-400) transparent;
animation: lds-dual-ring 1.2s linear infinite
}

@Keyframes lds-dual-ring {
0% {
transform: rotate(0)
}

100% {
	transform: rotate(360deg)
}

}

.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input input {
cursor: pointer
}

.selectize-control.single .selectize-input.input-active,
.selectize-control.single .selectize-input.input-active input:not(:read-only) {
cursor: text
}

.selectize-control.single .selectize-input:not(.no-arrow):after {
content: " ";
display: block;
position: absolute;
top: 50%;
right: calc(0.75rem + 5px);
margin-top: -3px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: var(--bs-gray-800) transparent transparent transparent
}

.selectize-control.single .selectize-input:not(.no-arrow).dropdown-active:after {
margin-top: -4px;
border-width: 0 5px 5px 5px;
border-color: transparent transparent var(--bs-gray-800) transparent
}

.selectize-control.rtl {
text-align: right
}

.selectize-control.rtl.single .selectize-input:after {
left: calc(0.75rem + 5px);
right: auto
}

.selectize-control.rtl .selectize-input>input {
margin: 0 4px 0 -2px !important
}

.selectize-control .selectize-input.disabled {
background-color: var(--bs-secondary-bg);
opacity: 1;
}

.selectize-dropdown,
.selectize-dropdown.form-control {
height: auto;
padding: 0;
margin: 2px 0 0 0;
z-index: 1000;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color-translucent);
border-radius: .375rem;
box-shadow: 0 6px 12px rgba(var(--bs-black-rgb), 0.175)
}

.selectize-dropdown .optgroup-header {
font-size: .875rem;
line-height: 1.5
}

.selectize-dropdown .optgroup:first-child:before {
display: none
}

.selectize-dropdown .optgroup:before {
content: " ";
display: block;
height: 0;
margin: .5rem 0;
overflow: hidden;
border-top: 1px solid var(--bs-border-color-translucent);
margin-left: -0.75rem;
margin-right: -0.75rem
}

.selectize-dropdown .create {
padding-left: .75rem
}

.selectize-dropdown-content {
padding: 5px 0
}

.selectize-dropdown-emptyoptionlabel {
text-align: center
}

.selectize-input {
min-height: calc(1.5em + 0.75rem + 2px);
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
.selectize-input {
transition: none
}
}

.selectize-input.dropdown-active {
border-radius: .375rem
}

.selectize-input.dropdown-active::before {
display: none
}

.selectize-input.focus {
border-color: var(--srm-blue);
outline: 0;
box-shadow: 0 0 0 .25rem rgba(var(--bs-black-rgb), 0.25)
}

.is-invalid .selectize-input {
border-color: var(--bs-red-400);
box-shadow: inset 0 1px 1px rgba(var(--bs-black-rgb), 0.075)
}

.is-invalid .selectize-input:focus {
border-color: var(--bs-red-600);
box-shadow: inset 0 1px 1px rgba(var(--bs-black-rgb), 0.075), 0 0 6px var(--bs-red-400)
}

.selectize-control.form-control-sm .selectize-input {
min-height: calc(1.5em + 0.5rem + 2px) !important;
height: calc(1.5em + 0.5rem + 2px);
padding: .25rem .5rem !important;
font-size: .875rem;
line-height: 1.25
}

.selectize-control.multi .selectize-input {
height: auto;
padding-left: calc(0.75rem - 5px);
padding-right: calc(0.75rem - 5px)
}

.selectize-control.multi .selectize-input>div {
border-radius: calc(0.375rem - 1px)
}

.form-select.selectize-control,
.form-control.selectize-control {
padding: 0;
height: auto;
border: 0;
background: 0;
box-shadow: none;
border-radius: 0
}

.input-group>.input-group-append>.btn,
.input-group>.form-control:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}

.input-group>.input-group-prepend>.btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}

.input-group .selectize-control:not(:last-child) .selectize-input {
overflow: unset;
border-top-right-radius: 0;
border-bottom-right-radius: 0
}

.input-group .selectize-control:not(:first-child) .selectize-input {
overflow: unset;
border-top-left-radius: 0;
border-bottom-left-radius: 0
}

.selectize-dropdown.plugin-auto_position.selectize-position-top {
border-top: 1px solid var(--bs-gray-200) !important;
border-bottom: 1px solid var(--bs-gray-200) !important;
border-radius: .375rem !important
}

.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active {
border-radius: .375rem !important;
border-top: 1px solid var(--bs-gray-200) !important
}

.selectize-dropdown.plugin-auto_position.selectize-position-top {
border-top: 1px solid var(--bs-gray-400);
border-bottom: 0 none;
border-radius: 3px 3px 0 0;
box-shadow: 0 -6px 12px rgba(var(--bs-black-rgb), 0.18)
}

.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active {
border-radius: 0 0 3px 3px;
border-top: 0 none
}

.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active::before {
top: 0;
bottom: unset
}

.selectize-control.plugin-clear_button .clear {
text-decoration: none;
display: flex;
position: absolute;
height: 100%;
width: 25px;
top: 0;
right: calc(0.75rem - 5px);
color: var(--bs-body-bg);
opacity: .4;
font-weight: bold;
border: 0;
cursor: pointer;
z-index: 1;
font-size: 21px;
justify-content: center;
align-items: center
}