// ========================================== // NutUI 专用黑色主题覆盖文件 // ========================================== // 引入NutUI原始样式(如果需要) // @import '@nutui/nutui-react-taro/dist/style.css'; // 全局主题变量覆盖 $nut-primary-color: #000000 !important; $nut-primary-color-end: #000000 !important; // 超强力样式覆盖 - 确保在所有环境下生效 :global { // 页面根元素 page, .taro_page, #app, .app { // ===== Checkbox 复选框 ===== .nut-checkbox { .nut-checkbox__icon { border-color: #ddd; &.nut-checkbox__icon--checked { background-color: #000000 !important; border-color: #000000 !important; color: #ffffff !important; &::after, &::before { color: #ffffff !important; border-color: #ffffff !important; } .nut-icon, .nut-icon-check { color: #ffffff !important; } } } &.nut-checkbox--checked { .nut-checkbox__icon { background-color: #000000 !important; border-color: #000000 !important; color: #ffffff !important; } } } // ===== Button 按钮 ===== .nut-button { &.nut-button--primary { background-color: #000000 !important; border-color: #000000 !important; color: #ffffff !important; &:hover, &:active, &:focus { background-color: #333333 !important; border-color: #333333 !important; color: #ffffff !important; } } &.nut-button--default { border-color: #000000 !important; color: #000000 !important; &:active { background-color: #f5f5f5 !important; } } } // ===== Switch 开关 ===== .nut-switch { &.nut-switch--open, &.nut-switch--active { background-color: #000000 !important; .nut-switch__button { background-color: #ffffff !important; } } } // ===== Radio 单选框 ===== .nut-radio { .nut-radio__icon { &.nut-radio__icon--checked { background-color: #000000 !important; border-color: #000000 !important; color: #ffffff !important; } } &.nut-radio--checked { .nut-radio__icon { background-color: #000000 !important; border-color: #000000 !important; } } } // ===== Input 输入框 ===== .nut-input { &.nut-input--focus { .nut-input__input { border-color: #000000 !important; } } } // ===== Picker 选择器 ===== .nut-picker { .nut-picker__confirm { color: #000000 !important; } } // ===== Slider 滑动条 ===== .nut-slider { .nut-slider__track { background-color: #000000 !important; } .nut-slider__button { background-color: #000000 !important; border-color: #000000 !important; } } // ===== ActionSheet 动作面板 ===== .nut-actionsheet { .nut-actionsheet__item { &.nut-actionsheet__item--active { color: #000000 !important; } } } // ===== Tab 标签页 ===== .nut-tabs { .nut-tabs__tab { &.nut-tabs__tab--active { color: #000000 !important; } } .nut-tabs__line { background-color: #000000 !important; } } } } // 超强力直接覆盖 - 针对所有可能的选择器 .nut-checkbox__icon--checked, .nut-checkbox-icon-checked, .nut-checkbox__icon.nut-checkbox__icon--checked, .nut-checkbox .nut-checkbox__icon--checked, .nut-checkbox .nut-checkbox__icon.nut-checkbox__icon--checked { background-color: #000000 !important; border-color: #000000 !important; color: #ffffff !important; background: #000000 !important; border: 1px solid #000000 !important; } // 针对内部图标 .nut-checkbox__icon--checked .nut-icon, .nut-checkbox-icon-checked .nut-icon, .nut-checkbox__icon--checked::after, .nut-checkbox-icon-checked::after, .nut-checkbox__icon--checked::before, .nut-checkbox-icon-checked::before { color: #ffffff !important; background-color: #ffffff !important; border-color: #ffffff !important; } // 针对所有可能的勾选图标 .nut-icon-check, .nut-icon-checklist, .nut-checkbox__icon--checked .nut-icon-check, .nut-checkbox-icon-checked .nut-icon-check { color: #ffffff !important; fill: #ffffff !important; } // 针对 checkbox button 激活状态 .nut-checkbox-button-active, .nut-checkbox-button.nut-checkbox-button-active { background-color: #000000 !important; border-color: #000000 !important; color: #ffffff !important; background: #000000 !important; border: 1px solid #000000 !important; } .nut-button--primary, .nut-button.nut-button--primary { background-color: #000000 !important; border-color: #000000 !important; color: #ffffff !important; background: #000000 !important; border: 1px solid #000000 !important; } .nut-switch--open, .nut-switch.nut-switch--open { background-color: #000000 !important; background: #000000 !important; } .nut-radio__icon--checked, .nut-radio-icon-checked, .nut-radio .nut-radio__icon--checked { background-color: #000000 !important; border-color: #000000 !important; color: #ffffff !important; background: #000000 !important; border: 1px solid #000000 !important; }