Bootstrap 5中Select2切换深色模式不生效问题排查

Mazer的深色模式切换是通过给<body>添加/移除.dark类实现的，但Select2默认不会监听这个类的变化，也没有适配Bootstrap 5深色模式的内置样式，所以需要手动关联样式和切换逻辑。以下是具体解决步骤：

1. 自定义Select2深色模式样式 #

在项目的自定义CSS文件中添加以下样式，针对body.dark下的Select2元素覆盖默认样式：

/* 深色模式下的Select2基础样式 */
body.dark .select2-container--default .select2-selection--single {
    background-color: #1e293b; /* 匹配Mazer深色背景色 */
    border-color: #475569;
    color: #f1f5f9;
}

/* 下拉箭头颜色 */
body.dark .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #f1f5f9 transparent transparent transparent;
}

/* 下拉菜单容器 */
body.dark .select2-dropdown {
    background-color: #1e293b;
    border-color: #475569;
}

/* 下拉选项文字颜色 */
body.dark .select2-results__option {
    color: #f1f5f9;
}

/* 高亮选项背景 */
body.dark .select2-results__option--highlighted[aria-selected] {
    background-color: #334155;
}

/* 搜索框样式 */
body.dark .select2-search--dropdown .select2-search__field {
    background-color: #0f172a;
    border-color: #475569;
    color: #f1f5f9;
}

如果需要更贴合Mazer的主题色，可以替换上述颜色值为模板内置的深色变量（比如--bs-dark-bg-subtle等）。

2. 监听深色模式切换，同步更新Select2 #

Mazer的深色模式切换按钮通常会触发<body>类的变化，我们需要监听这个操作，让Select2重新渲染以应用新样式：

// 绑定深色模式切换按钮的点击事件（替换为你项目中按钮的实际选择器）
document.querySelector('[data-bs-theme-value="dark"], [data-bs-theme-value="light"]').addEventListener('click', function() {
    // 延迟执行，确保body类切换完成
    setTimeout(() => {
        // 遍历所有Select2元素，重新初始化
        $('select.select2').each(function() {
            const $select = $(this);
            // 保存原有配置，避免丢失自定义设置
            const config = {
                width: $select.data('width') || '100%',
                placeholder: $select.data('placeholder') || ''
            };
            // 销毁后重新初始化
            $select.select2('destroy').select2(config);
        });
    }, 100);
});

// 页面加载时，检查当前模式并初始化对应样式
$(document).ready(function() {
    $('select.select2').select2({
        width: '100%',
        placeholder: '请选择'
    });

    // 如果初始状态是深色模式，强制更新Select2
    if (document.body.classList.contains('dark')) {
        $('select.select2').each(function() {
            const $select = $(this);
            $select.select2('destroy').select2({
                width: $select.data('width') || '100%',
                placeholder: $select.data('placeholder') || ''
            });
        });
    }
});

3. 验证效果 #

切换深色模式按钮后，检查Select2的输入框、下拉菜单、搜索框是否都同步变为深色样式，若有局部样式未适配，可以根据实际情况补充CSS规则。

内容的提问来源于stack exchange，提问作者Nurul Mustofa