在现代web应用开发中，为用户提供暗黑模式选项已成为一种趋势。elementplus作为一款流行的vue 3组件库，原生支持暗黑模式。然而，当开发者选择通过cdn方式引入elementplus而非使用npm进行项目管理时，如何启用暗黑模式可能会遇到一些疑问，因为传统基于scss编译的方案不再适用。本文将详细阐述在cdn环境下启用elementplus暗黑模式的正确方法。

理解ElementPlus暗黑模式机制

ElementPlus的暗黑模式实现主要依赖于CSS变量（CSS Custom Properties）和特定的CSS类。当html根元素上存在dark类时，ElementPlus会应用一套预定义的CSS变量值，这些变量会覆盖默认的亮色主题变量，从而改变组件的颜色方案。这种机制使得主题切换非常灵活，只需简单地添加或移除dark类即可。

CDN环境下启用暗黑模式的步骤

在CDN环境下，我们无法像NPM项目那样通过修改SCSS变量并重新编译来启用暗黑模式。取而代之的是，我们需要直接引入ElementPlus提供的暗黑模式样式文件，并确保html标签上存在相应的类。

1. 在html标签上添加dark类

这是启用暗黑模式的关键一步。ElementPlus会检测html元素的dark类来决定是否应用暗黑主题的CSS变量。

2. 引入暗黑模式专用CSS文件

除了ElementPlus的基础样式文件外，我们还需要额外引入一个包含暗黑模式CSS变量定义的样式文件。这个文件通常位于ElementPlus的theme-chalk/dark/css-vars.css路径下。

请确保引入路径正确，并且在引入ElementPlus主样式文件之后。

注意：https://unpkg.com/element-plus/dist/index.css 是一个通用路径，而 https://unpkg.com/element-plus/theme-chalk/index.css 是更具体的路径，推荐使用后者以确保兼容性。

Bandy AI

全球领先的电商设计Agent

下载

完整示例代码

以下是一个完整的HTML文件示例，演示了如何在CDN环境下使用Vue 3和ElementPlus，并成功启用暗黑模式：

  
    
    
    

    
    

    
    
    
    

    
    
  
  
    

      
Element Plus 暗黑模式演示
      {{ message }}
      
        
        
这是一段卡片内容，在暗黑模式下应该呈现深色背景和浅色文字。
      
    

    
  

将上述代码保存为.html文件并在浏览器中打开，您将看到ElementPlus组件以暗黑模式渲染。

注意事项与进阶

• CSS文件顺序: 务必将dark/css-vars.css文件放在ElementPlus主样式文件（theme-chalk/index.css）之后引入，以确保暗黑模式的CSS变量能够正确覆盖默认值。
• 动态切换: 如果您需要实现用户在亮/暗模式之间动态切换的功能，可以通过JavaScript来操作html标签的class属性。例如：

  // 切换到暗黑模式
  document.documentElement.classList.add('dark');
  // 切换到亮色模式
  document.documentElement.classList.remove('dark');

  您可以在用户设置中存储用户的偏好，并在页面加载时根据偏好设置html标签的dark类。

• CDN稳定性: 尽管unpkg.com是一个可靠的CDN服务，但在生产环境中，建议考虑使用国内的CDN服务或将这些静态资源托管在自己的服务器上，以提高访问速度和稳定性。
• 版本兼容性: 示例中使用的ElementPlus和Vue版本均为最新稳定版。在实际项目中，请根据您的需求选择合适的版本，并查阅相应版本的官方文档以确保兼容性。

总结

通过在html标签上添加dark类并引入ElementPlus提供的暗黑模式CSS文件，开发者可以轻松地在CDN环境下启用ElementPlus的暗黑模式，无需复杂的构建工具或SCSS编译流程。这种方法简单、直接，并且能够很好地支持动态主题切换，为用户提供更优质的视觉体验。