Dark mode

[johan-smits]

I have a setup where we use the https://github.com/vinorodrigues/bootstrap-dark-5/blob/main/docs/bootstrap-dark.md theme. The select2 BS5 theme does not support it. It stays pretty white. Is this because Select2 uses different stylesheets that the dark theme does not know of?

[apalfrey]

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.

[levinuss]

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 :)

[GDC-Nirmal]

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 👈👌❤️

[bhaumikpatel]

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;
}

[aidf-lsr]

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;
}

[cesarbuendia]

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