CDN引入Vue与ElementPlus时如何配置开启暗色主题

不需要修改SCSS、不需要npm构建环境，直接使用官方预构建的暗色样式资源、配合类名控制即可实现，配置步骤如下：

• 在原有Element Plus默认样式引入的后面，追加引入官方预编译的暗色模式CSS文件
• 给需要生效暗色模式的DOM容器添加dark类名：需要全局暗色就直接给<html>标签加该类，仅需局部暗色就给对应组件的父容器加该类
• （可选）如果需要动态切换亮/暗主题，直接通过JS增删对应容器上的dark类就能实时切换，无需刷新页面

修改后的完整可运行示例代码如下：

<!DOCTYPE html>
<html class="dark"> <!-- 全局生效暗色则给html标签加dark类 -->
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://unpkg.com/vue@next"></script>
  <!-- 原有默认亮色样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <!-- 追加引入暗色主题CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/theme-chalk/dark/css-vars.css">
  <!-- 引入Element Plus JS -->
  <script src="https://unpkg.com/element-plus"></script>
  <title>Element Plus Dark Mode Demo</title>
  <style>
    /* 暗色模式下给页面加基础背景，避免背景发白和组件风格冲突 */
    html.dark body {
      background-color: #141414;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div id="app">
    <el-button type="primary">{{ message }}</el-button>
    <!-- 动态切换按钮示例 -->
    <el-button @click="toggleDark">切换亮/暗模式</el-button>
  </div>
  <script>
    const App = {
      data() {
        return {
          message: "Hello Element Plus 暗色模式",
        };
      },
      methods: {
        toggleDark() {
          // 切换根元素的dark类即可完成主题切换
          document.documentElement.classList.toggle('dark')
        }
      }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
  </script>
</body>
</html>

实现原理说明：Element Plus 暗色模式基于原生CSS变量实现，引入的暗色CSS文件中已经定义好了暗色下所有组件的变量值，只要容器带dark类，内部组件就会自动读取暗色变量渲染，不需要额外修改组件配置。如果需要自定义暗色主题的品牌色、圆角、间距等样式，直接覆盖对应的CSS变量即可，无需编译SCSS。

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