element组件暗黑模式的开启(elementplus 后面的版本支持暗黑模式 )\

最新推荐文章于 2024-10-01 16:33:27 发布

一直码码

最新推荐文章于 2024-10-01 16:33:27 发布

阅读量1.1k

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_77705954/article/details/131695772

版权

文章讲述了如何在ElementPlus框架中实现暗黑模式。首先，需要导入dark主题样式，然后创建一个组件来切换html的dark类。通过Vue.js的ref和事件处理函数toggleDark，动态地添加或移除html的dark和light类，从而改变页面的暗黑模式状态。

摘要由CSDN通过智能技术生成

1.在老版本里面可以使用filter去过滤

html {
  filter: invert(1) hue-rotate(.5turn);
}

2.图片的样式也会受到影响所以需要将上面的代码重新写一下

img {
  filter: invert(1) hue-rotate(.5turn);
}

element版本在支持暗黑模式的情况下

1.我们要先在main.js导入暗黑样式

import 'element-plus/theme-chalk/dark/css-vars.css'

2. 通过创建一个组件来控制是否在html上面添加样式dark

<template>
    <div class="dark-box">
      <el-button text class="switch" :class="isDark ? 'isDark-switch' : 'noDark-switch'" @click="toggleDark">
        <el-icon v-if="isDark">
          <svg viewBox="0 0 24 24">
            <path
              d="M6.05 4.14l-.39-.39a.993.993 0 0 0-1.4 0l-.01.01a.984.984 0 0 0 0 1.4l.39.39c.39.39 1.01.39 1.4 0l.01-.01a.984.984 0 0 0 0-1.4zM3.01 10.5H1.99c-.55 0-.99.44-.99.99v.01c0 .55.44.99.99.99H3c.56.01 1-.43 1-.98v-.01c0-.56-.44-1-.99-1zm9-9.95H12c-.56 0-1 .44-1 .99v.96c0 .55.44.99.99.99H12c.56.01 1-.43 1-.98v-.97c0-.55-.44-.99-.99-.99zm7.74 3.21c-.39-.39-1.02-.39-1.41-.01l-.39.39a.984.984 0 0 0 0 1.4l.01.01c.39.39 1.02.39 1.4 0l.39-.39a.984.984 0 0 0 0-1.4zm-1.81 15.1l.39.39a.996.996 0 1 0 1.41-1.41l-.39-.39a.993.993 0 0 0-1.4 0c-.4.4-.4 1.02-.01 1.41zM20 11.49v.01c0 .55.44.99.99.99H22c.55 0 .99-.44.99-.99v-.01c0-.55-.44-.99-.99-.99h-1.01c-.55 0-.99.44-.99.99zM12 5.5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm-.01 16.95H12c.55 0 .99-.44.99-.99v-.96c0-.55-.44-.99-.99-.99h-.01c-.55 0-.99.44-.99.99v.96c0 .55.44.99.99.99zm-7.74-3.21c.39.39 1.02.39 1.41 0l.39-.39a.993.993 0 0 0 0-1.4l-.01-.01a.996.996 0 0 0-1.41 0l-.39.39c-.38.4-.38 1.02.01 1.41z"
              fill="currentColor"></path>
          </svg>
        </el-icon>
        <el-icon v-else>
          <svg viewBox="0 0 24 24">
            <path
              d="M11.01 3.05C6.51 3.54 3 7.36 3 12a9 9 0 0 0 9 9c4.63 0 8.45-3.5 8.95-8c.09-.79-.78-1.42-1.54-.95A5.403 5.403 0 0 1 11.1 7.5c0-1.06.31-2.06.84-2.89c.45-.67-.04-1.63-.93-1.56z"
              fill="currentColor"></path>
          </svg>
        </el-icon>
      </el-button>
    </div>
  </template>
  
  <script setup >
  import { ref } from 'vue'
  const isDark = ref(true)
  const toggleDark = () => {
    isDark.value = !isDark.value
    const html = document.querySelector('html')
    if (html) {
      if (isDark.value) {
        html.classList.remove("dark");
        html.classList.add("light");
      } else {
        html.classList.remove("light");
        html.classList.add("dark");
      }
  }
  }
  
  </script>
  
  <style scoped>
  .dark-box {
    margin-right: 20px;
  }
  .switch {
    width: 40px;
    height: 20px;
    border: 1px solid #dcdfe6;
    border-radius: 10px;
    box-sizing: border-box;
    cursor: pointer;
    padding-bottom: 0;
    padding-top: 0px;
    background-color: #ebeef5 !important;
    font-size: 12px;
  }
  

  .isDark-switch .el-icon {
      background-color: #fff !important;
      padding: 2px;
      border-radius: 50%;
      color: #000;
      margin-left: -8px;
    }
  .noDark-switch {
    background-color: rgb(8, 8, 8) !important;
  
   
  }
  .noDark-switch .el-icon {
      color: #fff;
      margin-left: 15px;
    }
  </style>