Comments (6)
aidf-lsr
commented on August 29, 2024
4
Based on @bhaumikpatel post, I tried and here is a CSS overwrite that works for both single and multiple choice,
/* Select 2 bootstrap-5 theme override */
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
background-color: transparent !important;
border: 1px solid #495057;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
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='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
color: #dee2e6 !important;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
color: #dee2e6 !important;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
border: 1px solid var(--bs-gray-600);
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
color: #dee2e6 !important;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
background-color: transparent !important;
color: #dee2e6 !important;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
color: #dee2e6 !important;
border: 1px solid #495057 !important;
background-color: var(--bs-body-bg);
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
color: var(--bs-secondary-color)!important;
}
from select2-bootstrap-5-theme.
levinuss
commented on August 29, 2024
1
Color modes got added to Bootstrap 5.3 (alpha right now, see docs). I would love to see this to be supported by this theme to be able to have a dark mode or even a dark mode switch on sites with select2 :)
from select2-bootstrap-5-theme.
apalfrey
commented on August 29, 2024
Yes, this theme is an additional stylesheet to be installed in addition to Bootstrap 5. As it's using the SCSS variables used in Bootstrap 5, it doesn't have dark mode functionality at this time, however, they are planning on adding dark mode support in (hopefully) the next version (see twbs/bootstrap#35857). Once it's in Bootstrap 5, we'll be adding the functionality to this theme.
In the meantime, if you were to set the required color variables in SCSS ($s2bs5-color, $s2bs5-placeholder-color, $s2bs5-border-color) to the colors Bootstrap 5 Dark uses and compile it, you should have a version that'd work for what you need.
from select2-bootstrap-5-theme.
GDC-Nirmal
commented on August 29, 2024
I wrote dark mode support sass code for myself. @apalfrey, use this code with your improvements for this package if you like.
If needs anyone, paste this code to your sass file.
/*
import bootstrap for use its variables
only variables files
@node_modules/bootstrap/scss/functions
@node_modules/bootstrap/scss/variables
@node_modules/bootstrap/scss/variables-dark
or full bootstrap file
@import node_modules/bootstrap/scss/bootstrap
import select2-bootstrap-5-theme for bootstrap 5 styles
@import node_modules/select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme
*/
[data-bs-theme="dark"] .select2-container--bootstrap-5 {
background-color: $dropdown-dark-bg;
.selection {
background-color: $dropdown-dark-bg;
.select2-selection--multiple {
display: flex;
align-items: center;
.select2-selection__rendered {
min-width: fit-content;
.select2-selection__choice {
margin-bottom: 0;
}
}
}
.select2-selection--single {
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='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
.select2-selection__rendered{
color: $dropdown-dark-color;
}
}
.select2-selection {
background-color: $dropdown-dark-bg;
.select2-selection__choice__display {
color: $dropdown-dark-color;
}
.select2-selection__choice__remove {
color: $danger;
}
.select2-search {
background-color: $dropdown-dark-bg;
.select2-search__field {
background-color: $dropdown-dark-bg;
color: $dropdown-dark-color;
}
}
}
}
.select2-dropdown {
background-color: $dropdown-dark-bg;
.select2-search {
background-color: $dropdown-dark-bg;
.select2-search__field {
background-color: $dropdown-dark-bg;
color: $dropdown-dark-color;
}
}
.select2-results {
background-color: $dropdown-dark-bg;
.select2-results__options {
background-color: $dropdown-dark-bg;
color: $dropdown-dark-color;
}
}
}
}
Hope this helpful...! ❤️
I love this package and I would love to see this package support bootstrap color modes 👈👌❤️
from select2-bootstrap-5-theme.
bhaumikpatel
commented on August 29, 2024
Dark theme
/* Select 2 bootstrap-5 theme override */
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
background-color: transparent !important;
border: 1px solid #495057;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
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='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
color: #dee2e6 !important;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
color: #dee2e6 !important;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
background-color: transparent !important;
color: #dee2e6 !important;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
color: #dee2e6 !important;
border: 1px solid #495057 !important;
}
from select2-bootstrap-5-theme.
cesarbuendia
commented on August 29, 2024
Based on @bhaumikpatel post, I tried and here is a CSS overwrite that works for both single and multiple choice,
/* Select 2 bootstrap-5 theme override */ html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection { background-color: transparent !important; border: 1px solid #495057; } html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single { 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='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: #dee2e6 !important; } html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { color: #dee2e6 !important; } html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { border: 1px solid var(--bs-gray-600); } html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder { color: #dee2e6 !important; } html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { background-color: transparent !important; color: #dee2e6 !important; } html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown { color: #dee2e6 !important; border: 1px solid #495057 !important; background-color: var(--bs-body-bg); } html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group { color: var(--bs-secondary-color)!important; }
Works
from select2-bootstrap-5-theme.
Related Issues (20)
- Floating Label - Multi Select Box HOT 2
- Validation icons HOT 1
- input not focus on mobile (iphone) HOT 4
- select2-bootstrap-5-theme@npm:1.2.0 doesn't provide @popperjs/core (p36ae4), requested by bootstrap HOT 2
- The magnifying glass image and the CSS to display it seem to be missing from all the v4 e v5 themes. HOT 1
- Minor CSS change in Bootstrap 5.2.0 HOT 2
- Comatibility issue with Django-autocomplete-light. Clear button not appearing. HOT 1
- Repo "About"
- Yarn warning with @popperjs/core
- Error after upgrade to "Bootstrap 5.2.3" HOT 1
- Error with BS 5.3.0-aplha1 HOT 12
- Autofocus is not working in [email protected] HOT 2
- SCSS Floating Labels
- select2-bootstrap-5-theme with ajax lost the style HOT 1
- Add pls support dark theme bootstrap 5.3 and floating label HOT 2
- Could someone add support for small images HOT 1
- https://cdn.jsdelivr.net/npm/[email protected]/+esm
- Non-Responsive when viewport changes HOT 1
- With a multiple select, the search input isn't actually inline (ie it breaks onto it's own line) HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from select2-bootstrap-5-theme.