disabled表单在暗色模式下“消失”并非样式丢失，而是:disabled伪类规则被高优先级暗色变量或第三方组件样式覆盖；其禁用态仍用亮色模式浅灰值，在深背景上隐形，需统一改用CSS变量驱动并确保.is-disabled类适配暗色主题。
disabled属性在暗色模式下为何让表单样式“消失”
不是样式真丢了，而是:disabled伪类规则被暗色模式的高优先级CSS变量或第三方组件样式覆盖了。Element Plus、Ant Design 等库的禁用样式通常硬编码颜色值（如#ccc），而暗色模式下根级--el-color-primary等变量已切换为深色系，但:disabled规则没参与变量计算，导致禁用态文字/边框仍用亮色模式下的浅灰，在深背景上直接“隐形”。更麻烦的是，某些组件（如el-select）的禁用状态不触发:disabled匹配，而是靠.is-disabled类控制，而这个类的样式可能压根没适配暗色变量。
修复disabled表单在暗色模式下的显示问题
核心是让禁用态样式也走CSS变量驱动，而不是写死颜色。关键动作有三：
- 检查项目中是否所有
:disabled选择器都改用[disabled]属性选择器——后者兼容性更好，且在Vue/React响应式绑定中更可靠（:disabled对disabled={false}这种布尔绑定失效） - 把原生表单控件（
input、button、select）的禁用样式重写为变量引用，例如：color: var(--el-text-color-placeholder); background-color: var(--el-fill-color-light); - 对第三方组件，不要试图覆盖
.el-input.is-disabled .el-input__inner这种深层结构，而是通过主题变量注入覆盖：在el-config-provider中传入disabledColor配置，或在SCSS中重定义$--select-disabled-border等变量
Element Plus Select禁用态图标与边框异常
这是典型“禁用状态未同步”的问题。Select下拉箭头图标和聚焦边框在is-disabled时仍保留is-focus样式，导致深色背景下边框发白、箭头颜色不对。原因在于源码中&.is-focus块未加@include when(disabled)条件判断。
临时修复方案（不改源码）：
.el-select.is-disabled .el-select__arrow {
filter: brightness(0.6) saturate(0.5);
}
.el-select.is-disabled .el-select__wrapper:focus-within {
outline: none;
box-shadow: none;
}
.el-select.is-disabled .el-input__inner {
border-color: var(--el-border-color-light);
}
注意：必须确保这些规则在暗色模式生效后才加载，否则会被主题变量覆盖。
为什么localstorage保存的主题切换后disabled样式仍不更新
因为页面加载时，disabled状态由初始props决定，而CSS变量虽已切换，但组件内部样式（尤其是第三方组件）可能缓存了旧的computed style。常见于动态渲染的弹窗、表格行内编辑等场景。
解决办法不是重新渲染整个页面，而是：
- 监听
dark-mode类变更事件，手动触发el-form重绘：this.$refs.form?.clearValidate()（Vue2）或formRef.value?.resetFields()（Vue3） - 对
el-select等动态挂载组件，在主题切换后调用updatePopper方法强制刷新下拉面板样式 - 避免在
mounted钩子中一次性设置所有disabled状态，改用watch监听主题变化并逐个更新表单项的disabled绑定值
最易忽略的一点：fieldset[disabled]会递归禁用子元素，但子元素自身没有disabled属性，所以input[disabled]选择器捕获不到它们——必须用fieldset[disabled] input来定位，且这个规则也要参与暗色变量计算。
