正文：

在现代网页设计中，滚动条不仅是功能组件，更是UI体验的重要部分。随着操作系统支持深色/浅色主题切换，用户期望网页元素（包括滚动条）能智能适配系统主题。本文将深入讲解实现这一效果的多种技术方案。

一、基础方案：CSS媒体查询

最直接的方法是使用prefers-color-scheme媒体查询检测系统主题。以下代码示例展示了如何为不同主题设置滚动条样式：

/* 浅色主题滚动条 */
@media (prefers-color-scheme: light) {
  ::-webkit-scrollbar {
    width: 10px;
    background-color: #f5f5f5;
  }
  ::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 5px;
  }
}

/* 深色主题滚动条 */
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar {
    width: 10px;
    background-color: #2d2d2d;
  }
  ::-webkit-scrollbar-thumb {
    background: #5c5c5c;
    border-radius: 5px;
  }
}

注意：此方案仅适用于WebKit内核浏览器（Chrome/Safari），且需配合CSS变量实现更完整的跨浏览器支持。

二、进阶方案：CSS变量+JavaScript动态监听

要实现更灵活的控制，可以结合CSS变量和系统主题监听：

1. 首先定义CSS变量：

:root {
  --scrollbar-bg: #f5f5f5;
  --scrollbar-thumb: #c1c1c1;
}

[data-theme="dark"] {
  --scrollbar-bg: #2d2d2d;
  --scrollbar-thumb: #5c5c5c;
}

::-webkit-scrollbar {
  width: 10px;
  background-color: var(--scrollbar-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

1. 通过JavaScript检测主题变化：

const themeQuery = window.matchMedia('(prefers-color-scheme: dark)');

function handleThemeChange(e) {
  document.documentElement.setAttribute(
    'data-theme', 
    e.matches ? 'dark' : 'light'
  );
}

// 初始检测
handleThemeChange(themeQuery);
// 监听变化
themeQuery.addEventListener('change', handleThemeChange);

三、全浏览器兼容方案

对于Firefox等非WebKit浏览器，需要使用标准滚动条属性：

html {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
  scrollbar-width: thin;
}

四、增强用户体验的技巧

1. 平滑过渡效果：

::-webkit-scrollbar-thumb {
  transition: background 0.3s ease;
}

1. 备用颜色方案：
   在CSS变量定义中添加默认值，防止未检测到主题时显示异常：

:root {
  --scrollbar-bg: #f5f5f5;
  --scrollbar-thumb: #c1c1c1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --scrollbar-bg: #2d2d2d;
    --scrollbar-thumb: #5c5c5c;
  }
}

通过以上方法的组合使用，开发者可以创建出既美观又能智能响应系统主题的滚动条样式，显著提升网页的视觉一致性和用户体验。实际项目中，建议配合整体主题切换方案（如CSS-in-JS或前端框架的主题插件）实现更统一的效果。