这样修改过后,useDark 就只作用于带有color-scheme属性的body标签,并且根据color-scheme="dark"或者color-scheme="light"来静态设置主题。 可以点进 useDark 的源代码看到默认配置 除此之外,还可以为 useDark 配置 dom 变更的监听方法 相当于重写了 useDark 切换主题的逻辑,一旦配置则原主题切换功能失效。 constisD...
基于vue3 & element-plus 的项目现在可以方便的添加暗黑模式 一、基本使用 因为是通过在html标签上添加dark类,可以自行实现切换 但为了方便切换以及进一步的定制化 示例:以下,基于 element-plus switch组件 创建了一个暗黑模式开关组件,将它放入菜单栏,就可以方便地切换模式了 import { useDark, useToggle } from '...
element-plus-dark 起源 Element UI 和现在的 Element Plus 已经成为事实上的 Vue 项目首选骨架,也就是说,哪怕你只需要 Layout、Button、Input 寥寥几个组件,Element 也是首选。 同时,一些项目可能需要暗黑模式,而 Element Plus 目前还未提供官方解决方案,因此诞生了这个非官方项目:Element Plus Dark。 2022 年 2...
importElementPlusfrom'element-plus';import'element-plus/dist/index.css';importAppfrom'./App.vue';// 引入 App.vue 必须放在引入 Element Plus 之后,因为需要在 App.vue 中引入 element-plus-dark,覆盖 Element Plus 原有变量和样式 2. App.vue // SCSS$dark-bg-color-base:rgb(你的基本背景色);// ...
通过在html标签上添加一个名为 dark 的类来启用 基于vue3 & element-plus 的项目现在可以方便的添加暗黑模式 一、基本使用 因为是通过在html标签上添加dark类,可以自行实现切换 但为了方便切换以及进一步的定制化,官方推荐使用useDark | VueUse 示例:以下,基于 element-plus switch组件 创建了一个暗黑模式开关组件,...
v-model="isDark" size="small" inline-prompt style="--el-switch-on-color: #f2f2f2; --el-switch-off-color: #141414" :active-icon="Sunny" :inactive-icon="Moon" @change="themeChange" /> // 设置switch的背景颜色 const blackColor = 'var(--bg-color-mute)' ...
storageKey:'useDarkKEY', valueDark:'dark', valueLight:'light'})/** *@Date:2023-04-01 14:07:39 *@description:深色模式切换,主要是靠这个useToggle实现 *@param{}参数说明 *@return:返回值*/const toLight=useToggle(isDark) const useMyStoreDark = useMyDark() ...
在Element Plus组件库中,CSS系统颜色被广泛应用。通过合理地选择系统颜色,组件库能够在不同的操作系统和环境下呈现出一致且美观的界面。此外,系统颜色还可以根据用户的个性化设置进行自动调整,满足用户的个性化需求。 二、暗黑模式 暗黑模式(Dark Mode)是一种用户界面设计风格,它使用深色背景和浅色文本,以减少屏幕对眼睛...
import "~/styles/dark.scss"; const app = createApp(App) // app.use(ElementPlus) app.mount('#app') 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 3.在vite.config.ts 中配置 import { defineConfig } from 'vite' ...
Element-Plus 提供了修改主题颜色的功能,可以通过配置theme和dark属性来实现: import{createApp}from'vue';importAppfrom'./App.vue';import'element-plus/dist/index.css';import{createApp,h}from'vue';import{ElButton}from'element-plus';import{createSSRApp}from'vue';constapp=createApp(App);app.use(El...