Files
mini-programs/src/nutui-theme.scss
2025-11-16 13:02:00 +08:00

232 lines
5.6 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
// ==========================================
// 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;
}
.nut-popup-bottom.nut-popup-round {
border-radius: 0 !important;
}