Co ExtensionAppearance
暗黑模式
运行平台 core@^6.2 以上版本，支持在运行时切换主题风格（明亮及暗黑）。
主题切换
平台内置了导航栏上切换模式的开关，可通过配置布局 暗黑模式插件 来启用。
扩展开发
平台暗黑模式工作原理与 Tailwindcss 类似，我们通过在 html 节点上动态增加或移除 class: dark 来实现动态切换。 若需要主动切换主题可自行对该样式进行添加或移除。
若想扩展插件能与平台同时适配暗黑模式，为其提供两种主题即可：
scss
// light mode
.my-button {
color: black;
background-color: white;
}
// dark mode
html.dark {
.my-button {
color: white;
background-color: black;
}
}
// light mode
.my-button {
color: black;
background-color: white;
}
// dark mode
html.dark {
.my-button {
color: white;
background-color: black;
}
}
如果需要与平台颜色主题保持一致，可使用 element-plus 提供的 CSS 变量：
scss
html.dark {
.my-button {
color: var(--el-color-primary);
}
}
html.dark {
.my-button {
color: var(--el-color-primary);
}
}
使用 element-plus CSS 变量
阅读 Dark Mode | Elment Plus 了解更多细节。