如何在Next.js中修改默认滚动条颜色且保留原生样式？

核心思路是不破坏浏览器原生滚动条的结构与交互，只通过系统配色机制或轻量CSS属性调整颜色，以下是两种可靠方案：

1. 原生配色方案（推荐，和Tailwind/MDN一致） #

直接利用CSS的color-scheme属性，让浏览器自动适配对应配色的原生控件样式，包括滚动条：

/* 浅色模式下使用浏览器默认浅色滚动条 */
:root {
  color-scheme: light;
}

/* 深色模式下切换为浏览器原生深色滚动条 */
.dark {
  color-scheme: dark;
}

• 优势：完全保留浏览器原生滚动条的所有特性（比如Chrome的圆角滑块、Firefox的窄轨道），不同浏览器的差异会被自然保留，且明暗切换完全由浏览器原生处理，无需自定义样式。
• 只需配合你的明暗模式切换逻辑（比如添加/移除.dark类），就能自动切换滚动条的原生配色。

2. 轻量颜色微调方案（不破坏原生结构） #

如果需要在原生样式基础上微调颜色，而不是完全依赖系统配色，可以用以下方式：

针对Firefox #

使用scrollbar-color属性，这个属性仅修改颜色，不改变滚动条的结构：

/* 浅色模式 */
:root {
  scrollbar-color: #888 #f1f1f1; /* 滑块颜色 轨道颜色 */
}

/* 深色模式 */
.dark {
  scrollbar-color: #ccc #222;
}

针对WebKit内核浏览器（Chrome、Edge等） #

只修改滚动条伪元素的颜色属性，不要设置::-webkit-scrollbar的宽高或结构样式，避免破坏原生形态：

/* 深色模式下仅调整滑块和轨道的颜色 */
.dark ::-webkit-scrollbar-thumb {
  background-color: #ccc;
}
.dark ::-webkit-scrollbar-track {
  background-color: #222;
}

• 注意：不要写::-webkit-scrollbar { width: 8px; }这类代码，否则会覆盖原生滚动条的结构，丢失默认样式。

避坑提醒 #

不要直接用::-webkit-scrollbar系列伪元素重置整个滚动条样式，这会完全替换掉浏览器的原生滚动条，丢失其默认的交互和形态差异——这正是你之前遇到的问题。优先用color-scheme方案，它是最符合Tailwind、MDN这类网站实现逻辑的方法。

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