如何使用themify配置修改::-webkit-scrollbar-thumb实现滚动条深浅主题切换

问题原因 #

你的@include themify配置位置不符合编译规则和浏览器选择器匹配逻辑。绝大多数themify主题混入的实现原理是：通过在根节点（<html>/<body>）或组件根节点切换主题类（如.theme-dark/.theme-light）来注入对应主题的变量值，你把themify写在::-webkit-scrollbar-thumb伪元素选择器内部，编译后生成的选择器要么多了无效空格、要么结构无法被浏览器正确识别，因此样式不生效。

修复方案 #

把所有滚动条相关的样式规则，整体包裹在themify混入内部即可，示例代码如下：

// 全局滚动条样式
@include themify {
  ::-webkit-scrollbar-thumb {
    background-color: $ant-scroll-color !important;
    border-radius: 10px;
  }
  // 可同步配置滚动条轨道样式
  ::-webkit-scrollbar-track {
    background-color: $ant-scroll-track-color !important;
  }
}

如果是针对指定Web组件修改滚动条，写法如下：

// 指定组件的滚动条样式
@include themify {
  .your-component-root-class {
    &::-webkit-scrollbar-thumb {
      background-color: $ant-scroll-color !important;
      border-radius: 10px;
    }
  }
}

补充注意事项 #

• 如果你的Web组件使用了Shadow DOM，滚动条样式必须写在Shadow DOM内部的样式表中，全局样式无法穿透作用到Shadow DOM内部的滚动条
• 请确认$ant-scroll-color变量在明暗两套主题配置中都有正确定义，避免缺值
• Chrome 121及以上版本已支持标准scrollbar-color属性，兼容效果更好，可同步添加做向下兼容：

@include themify {
  :root {
    scrollbar-color: $ant-scroll-color $ant-scroll-track-color;
  }
  ::-webkit-scrollbar-thumb {
    background-color: $ant-scroll-color !important;
    border-radius: 10px;
  }
}

内容的提问来源于stack exchange，提问作者R Desilva