Element Plus 项目中暗黑模式切换图标的实现原理
在使用 Element Plus 框架构建项目时，我们经常会遇到一些巧妙的代码实现。本文将针对 element-plus-vite-starter 项目中暗黑模式切换按钮的图标切换代码进行详细解读，特别是代码 <i i="dark:ep-moon ep-sunny"></i> 的含义和实现原理。
这段代码位于一个 el-button 组件内部，用于显示切换暗黑模式的图标。点击按钮会调用 toggleDark() 函数，从而改变图标的显示。关键在于 i 标签的 i 属性，其值为 "dark:ep-moon ep-sunny"。 乍一看，这似乎不是标准的 HTML 属性。
实际上，i 属性并非标准 HTML 属性，而是项目中自定义的一个属性。它巧妙地利用了 CSS 选择器和类名的特性来实现图标的动态切换。 "dark:ep-moon ep-sunny" 实际上包含了两个属性信息：ep-moon 和 ep-sunny。
当应用处于非暗黑模式时，CSS 选择器 [i~="ep-sunny"] 会生效，显示 ep-sunny 对应的图标。 当应用切换到暗黑模式时，应用会添加一个 class="dark" 属性到 HTML 元素上。 此时，CSS 选择器 .dark [i~="ep-moon"] 优先级更高，因此会覆盖 [i~="ep-sunny"] 的样式，显示 ep-moon 对应的图标。 这说明开发者自定义的 i 属性，结合 CSS 选择器 [i~="…"] 和类名 dark，实现了根据暗黑模式状态动态切换图标的功能。 这种方式使得代码更具可读性和语义化，方便理解和维护。 开发者通过自定义属性和 CSS 选择器的巧妙结合，达到了简洁高效的目的。
