Electron中不存在“系统原生CSS”文件，所谓原生外观源自Chromium对HTML元素的默认UA样式及操作系统级渲染支持，而非外部CSS引入；所有system.css或native.css均为误解，实际应通过font-family继承、prefers-color-scheme响应、::-webkit-scrollbar定制等标准方式适配系统表现。
Electron 里没有“系统原生 CSS”这个概念——Windows、macOS、Linux 不提供可直接加载的全局样式表供网页渲染进程使用。所谓“原生外观”，靠的是 Chromium 自身对 appearance 属性、::-webkit-scrollbar、button 等元素的默认 UA 样式，以及操作系统级的字体、缩放、高 DPI 渲染支持，不是靠引入某个 .css 文件实现的。
为什么你搜不到 system.css 或 native.css
Chromium 不暴露操作系统 UI 样式为可读取的 CSS 文件资源；Electron 也没有内置或封装任何跨平台的“系统样式表”。所有你看到的按钮、滚动条、输入框的“原生感”，都来自浏览器引擎对标准 HTML 元素的默认渲染逻辑，而非外部 CSS 注入。
常见误解来源：
- 误把 WebKit 的伪元素（如
::-webkit-scrollbar-thumb）当作系统 CSS - 看到某些 Electron UI 库（如
@electron/remote旧版 demo）用了os-theme.css，其实是作者自己写的模拟样式 - 混淆了 Windows 的
Common Controls（C++ 原生控件）和网页渲染层的样式控制
想让界面更贴近系统，该做什么
真正起效的不是“引入 CSS”，而是启用和适配 Chromium 原生能力：
立即学习“前端免费学习笔记（深入）”；
- 确保
webPreferences中未禁用nativeWindowOpen: true和contextIsolation: true，否则部分 UA 样式可能被降级 - 用
appearance: none慎重移除默认样式——移除后若不手动还原，反而会丢失系统感 - 在 CSS 中显式继承系统字体：
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif; - 响应系统偏好：监听
prefers-color-scheme和prefers-reduced-motion媒体查询，而不是硬写暗色模式类名 - 滚动条定制必须用
::-webkit-scrollbar系列伪类，且仅限 Chromium 内核生效；别指望它在 WebView2 或 Firefox 中复用
别碰这些“伪原生 CSS”方案
以下做法看似省事，实则破坏一致性或引入兼容性陷阱：
- 试图用
preload.js读取/System/Library/Fonts/（macOS）或C:\Windows\Fonts\（Windows）路径下的文件——路径不可移植、权限受限、asar 打包后完全失效 - 在 HTML 中写
<link rel="stylesheet" href="file:///etc/some-os-styles.css">—— 会被webSecurity: true立即拦截，且根本不存在这类文件 - 用
protocol.registerFileProtocol('sys', ...)映射系统目录——安全策略禁止、沙箱拒绝、Electron 主进程根本不会允许这种注册 - 依赖第三方 npm 包声称提供 “Windows 11 CSS” 或 “macOS Sonoma Theme”——它们只是 CSS 变量模拟，无法响应系统级设置变更（如动态主题切换）
最易被忽略的一点：系统级样式感知（比如自动适配深色模式）只在 BrowserWindow 创建时由 Chromium 主动探测，不依赖任何 CSS 文件加载时机。如果你在运行时动态切换系统设置，Electron 渲染进程并不会自动重载样式——得靠 matchMedia('(prefers-color-scheme: dark)').addEventListener 手动响应。
