vue2、vue3实现暗黑模式

news2024/11/15 6:45:30

1、序言

        elementPlus、naive UI这些UI组件里面封装好了暗黑模式,直接使用相关api即可实现暗黑模式切换功能,而elementUI没有封装好,我们可以看看elementPlus、naive UI如何实现暗黑模式,然后在elementUI中模仿,从而实现暗黑模式!

2、vue3实现暗黑模式

        2.1、使用

(1)npm i @vueuse/core,  这个里面封装了很多hook工具函数:   VueUse | VueUse

(2)import { useDark, useToggle } from '@vueuse/core'

(3)在<script> 下使用:

<script setup>
import { useDark, useToggle} from '@vueuse/core'

const isDark = useDark();
</script>
<style scoped>

(4)useDark()可以获取当前的主题模式是不是暗黑模式,返回的是布尔值,useToggle()类似于开关,能将useDark()取反,实现主题模式切换效果

(5)main.js中引入暗黑模式的样式包:

 

        import 'element-plus/dist/index.css' :引入elementplus推荐的light模式的样式文件

        import 'element-plus/theme-chalk/dark/css-vars.css':是elementplus实现的dark模式的样式文件

 

        2.2、原理

        结论:暗黑模式时 import 'element-plus/theme-chalk/dark/css-vars.css'  覆盖 light模式中

import 'element-plus/dist/index.css' 的样式文件

        (1)会给html添加个class = "dark" 选择器

暗黑模式:

light模式

        (2)dark模式会在 'element-plus/theme-chalk/dark/css-vars.css'   进行样式覆盖

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

html.dark {
    color-scheme: dark;
    --el-color-primary: #409eff;
    --el-color-primary-light-3: #3375b9;
    --el-color-primary-light-5: #2a598a;
    --el-color-primary-light-7: #213d5b;
    --el-color-primary-light-8: #1d3043;
    --el-color-primary-light-9: #18222c;
    --el-color-primary-dark-2: #66b1ff;
    --el-color-success: #67c23a;
    --el-color-success-light-3: #4e8e2f;
    --el-color-success-light-5: #3e6b27;
    --el-color-success-light-7: #2d481f;
    --el-color-success-light-8: #25371c;
    --el-color-success-light-9: #1c2518;
    --el-color-success-dark-2: #85ce61;
    --el-color-warning: #e6a23c;
    --el-color-warning-light-3: #a77730;
    --el-color-warning-light-5: #7d5b28;
    --el-color-warning-light-7: #533f20;
    --el-color-warning-light-8: #3e301c;
    --el-color-warning-light-9: #292218;
    --el-color-warning-dark-2: #ebb563;
    --el-color-danger: #f56c6c;
    --el-color-danger-light-3: #b25252;
    --el-color-danger-light-5: #854040;
    --el-color-danger-light-7: #582e2e;
    --el-color-danger-light-8: #412626;
    --el-color-danger-light-9: #2b1d1d;
    --el-color-danger-dark-2: #f78989;
    --el-color-error: #f56c6c;
    --el-color-error-light-3: #b25252;
    --el-color-error-light-5: #854040;
    --el-color-error-light-7: #582e2e;
    --el-color-error-light-8: #412626;
    --el-color-error-light-9: #2b1d1d;
    --el-color-error-dark-2: #f78989;
    --el-color-info: #909399;
    --el-color-info-light-3: #6b6d71;
    --el-color-info-light-5: #525457;
    --el-color-info-light-7: #393a3c;
    --el-color-info-light-8: #2d2d2f;
    --el-color-info-light-9: #202121;
    --el-color-info-dark-2: #a6a9ad;
    --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
    --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
    --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
    --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
    --el-bg-color-page: #0a0a0a;
    --el-bg-color: #141414;
    --el-bg-color-overlay: #1d1e1f;
    --el-text-color-primary: #E5EAF3;
    --el-text-color-regular: #CFD3DC;
    --el-text-color-secondary: #A3A6AD;
    --el-text-color-placeholder: #8D9095;
    --el-text-color-disabled: #6C6E72;
    --el-border-color-darker: #636466;
    --el-border-color-dark: #58585B;
    --el-border-color: #4C4D4F;
    --el-border-color-light: #414243;
    --el-border-color-lighter: #363637;
    --el-border-color-extra-light: #2B2B2C;
    --el-fill-color-darker: #424243;
    --el-fill-color-dark: #39393A;
    --el-fill-color: #303030;
    --el-fill-color-light: #262727;
    --el-fill-color-lighter: #1D1D1D;
    --el-fill-color-extra-light: #191919;
    --el-fill-color-blank: transparent;
    --el-mask-color: rgba(0, 0, 0, 0.8);
    --el-mask-color-extra-light: rgba(0, 0, 0, 0.3)
}

html.dark .el-button {
    --el-button-disabled-text-color: rgba(255, 255, 255, 0.5)
}

html.dark .el-card {
    --el-card-bg-color: var(--el-bg-color-overlay)
}

html.dark .el-empty {
    --el-empty-fill-color-0: var(--el-color-black);
    --el-empty-fill-color-1: #4b4b52;
    --el-empty-fill-color-2: #36383d;
    --el-empty-fill-color-3: #1e1e20;
    --el-empty-fill-color-4: #262629;
    --el-empty-fill-color-5: #202124;
    --el-empty-fill-color-6: #212224;
    --el-empty-fill-color-7: #1b1c1f;
    --el-empty-fill-color-8: #1c1d1f;
    --el-empty-fill-color-9: #18181a
}

        (3)css文件中,--开头的为自定义变量,要使用它时var(--自定义变量),从而实现变量复用,减少冗余的css样式

        (4)举个例子:el-card

element-plus/dist/index.css 文件中

 

  'element-plus/theme-chalk/dark/css-vars.css' 文件中 

3、vue2实现暗黑模式

        3.1、实现

        (1)建立一个暗黑主题样式文件:my-theme.css,并将其引入到main.js

        (2)my-theme.css文件中 自己根据chrome浏览器的样式工具进行调整了,html.dark为父选择器

 示范:在my-theme.css 中根据需求调节出自己想要的样式

html.dark .el-submenu__title {
    background-color: #121212;
    color: #fff;
}

html.dark .el-submenu__title:hover {
    background-color: #18222b;
}

html.dark .el-menu--inline {
    background-color: #121212;
    color: #fff;
}

html.dark .el-menu-item.is-active {
    color: var(--el-color-primary);
}

html.dark .el-menu-item {
    background-color: #121212;
    color: #fff;
}

html.dark .el-menu-item:hover {
    background-color: #18222b;
}


html.dark .el-card {
    background-color: #121212;
}

 

        (3)添加一个开关用于给html添加class="dark"选择器,也就是暗黑模式

<template>
    <el-switch v-model="isDark" @change="changeMode" active-color="#13ce66" inactive-color="#ff4949">
    </el-switch>
</template>
<script>
export default {
    data() {
        return {
            isDark: false,
        }
    },
    methods: {
        // 模式切换
        changeMode(val) {
            // 获取html根元素标签
            let html = document.documentElement
            if (val) {
                // html添加class="dark"选择器
                html.classList.add('dark')
            } else {
                // html移除class="dark"选择器
                html.classList.remove('dark')
            }
        }
    }
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/447828.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C++】模板初识

C模板初识 1.泛型编程2.函数模板2.1.函数模板概念2.2.函数模板格式2.3.函数模板使用的原理2.4.函数模板的实例化2.5.模板参数的匹配原则 3.类模板3.1.类模板格式3.2.类模板的实例化 1.泛型编程 在实际编程中&#xff0c;经常会用到交换函数。比如有整型值的交换&#xff0c;浮…

Nacos 鉴权系统源码讲解

目录 1. 介绍 2. Nacos SPI 鉴权机制 3. 后台管理 / HTTP 接口鉴权 4. 客户端 / GRPC 接口鉴权 1. 介绍 鉴权功能默认没有开启&#xff0c;开启后的效果就是 Nacos 的接口需要用户登录并且具有权限才能调用该接口。例如注册实例、发布配置等。 鉴权也就是 我是谁、我能干…

探讨接口测试颗粒度

偶然间在论坛上看到一个帖子&#xff0c;帖子内容如下&#xff1a; 假设现在有一个新增商品的接口&#xff0c;返回的参数中有新增商品的 id&#xff08;每次返回的 id 都不一样&#xff09;、success&#xff08;判断是否成功&#xff0c;0 失败 1 成功&#xff09; 1. 接口…

代码随想录之对称二叉树

本内容来自代码随想录 使用后序遍历。 class Solution { public:bool traversal(TreeNode* left,TreeNode* right){//处理空节点情况if (left nullptr && right ! nullptr) return false;else if (left ! nullptr && right nullptr) return false;else if …

Python人工智能之混合高斯模型运动目标检测详解分析

搬运工项目&#xff0c;换个平台纪录&#xff0c;之前的广告太多 运动目标检测是计算机视觉领域中的一个重要内容&#xff0c;其检测效果将会对目标跟踪与识别造成一定的影响&#xff0c;本文将介绍用Python来进行混合高斯模型运动目标检测&#xff0c;感兴趣的朋友快来看看吧 …

4.2寸黑白红TFT电子标签【基站版】

ESL_TFT_4.2_V4 产品参数 产品型号 ESL_TFT_4.2_V4 尺寸(mm) 101.7*84.4*6.5mm 显示技术 TFT反射式 显示区域(mm) 84.8(H) * 63.6(V) 分辨率(像素) 400*300 像素尺寸(mm) 0.212x0.212 显示颜色 黑/白/红 视觉角度 45/45/60/60 工作温度 -20-70℃ 产品重量…

Spring6从入门到精通 第一章 带你玩转Spring

这里写目录标题 一 Spring框架产生的原因二 Spring6配置的关键环节 一 Spring框架产生的原因 传统的JavaWeb存在着耦合度较高的问题&#xff0c;而且实现完整的的MVC三层架构&#xff0c;开发成本过大&#xff0c;因此出现了Spring这个轻量级的开发框架&#xff0c;相当于建筑里…

C++初阶之命名空间的使用

目录 前言 命名空间的介绍 1.1 命名空间的定义 1.2 命名空间的使用 C输入&输出 总结&#xff1a; 前言 今天小编就给大家带来C的相关内容了&#xff0c;相对于C语言而言C的语法会比较复杂一点点&#xff0c;但是我相信大家通过自己的努力&#xff0c;也会很快的上手…

使用AIDEGen进行AOSP开发

什么是AIDEGen AIDEGen&#xff0c;大概是“Android IDE (helper) Generator”的简写&#xff0c;是 AOSP 源代码树中的一个工具&#xff0c;它允许从 Android Studio 等通常仅为非平台应用程序开发配置的 IDE 中处理系统应用程序。 AIDEGen 旨在自动化项目设置过程&#xff…

计算机视觉 | 八斗人工智能 (上)

目录 数字图像像素和分辨率灰度、通道和对比度其他概念 插值算法上采样和下采样的概念1. 最邻近插值2.双线性插值&#xff08;最常用&#xff09;3.双三次插值 直方图均衡化1. 灰度图直方图均衡化2. 彩色图直方图均衡化 数字图像 像素和分辨率 像素&#xff1a; 像素是分辨率…

智能营销服务性能提升2倍关键秘诀?就是亚马逊云科技

随着数字化进程加快和B2B商业市场竞争的白热化&#xff0c;通过挖掘数据“黄金”提升投资回报比与市场竞争力的智能营销&#xff0c;正成为B2B营销的热门风口。 但企业在获得更精准、更智能营销服务的同时&#xff0c;也不得不面临来自海量数据的搜寻以及数据实时更新等方面的…

Golang gorm

GORM 指南 | GORM - The fantastic ORM library for Golang, aims to be developer friendly. 一 对多入门 比如要开发cmdb的系统&#xff0c;无论是硬件还是软件。硬件对应的就是对应的哪个开发在用。或者服务对应的是哪个业务模块在使用&#xff0c;或者应用谁在使用。那么这…

【CXL】在gem5中跑一个实际的应用程序——Viper KV存储

有了CXL扩展内存&#xff0c;自然是要在DRAMCXL扩展内存上跑跑实际的应用程序&#xff0c;看看和DRAM传统磁盘有什么区别。 实际的应用程序其实就是一些工业界部署使用的&#xff0c;比如数据库、深度学习训练项目等等。本文主要找到一个KV存储Viper&#xff0c;搭建并进行简单…

水电设计院信息管理系统1.0

水电设计公司信息管理系统软件使用说明书 代码太多就不贴了&#xff0c;请在我的资源里下载&#xff0c;已部署在企业进行试运行。https://download.csdn.net/download/weixin_44735475/87704302 目录 1.引言 1 2.项目背景 1 3.系统功能 2 3.1系统功能 2 3.2系统性能 2 3.3系…

Python GUI自动化神器pyautogui,精准识别图片并自动点赞(32)

小朋友们好&#xff0c;大朋友们好&#xff01; 我是猫妹&#xff0c;一名爱上Python编程的小学生。 欢迎和猫妹一起&#xff0c;趣味学Python。 今日主题 你听过GUI自动化吗&#xff1f; GUI自动化就是用软件模拟鼠标和键盘的操作。 提到Python GUI自动化&#xff0c;不…

Flink State 笔记帖

1 State 分类 Operator State 主要用在Source、Sink等没有key分布的位置。 Keyed State 用在keyBy后的KeyedStream里&#xff0c;每个存储状态与一个key想关联。 ValueState ListState MapState ReducingState AggeratingState 2 State Backend StateBackend分类 HashMa…

JVM之JDK 监控和故障处理工具总结

JDK 命令行工具 这些命令在 JDK 安装目录下的 bin 目录下&#xff1a; jps (JVM Process Status&#xff09;: 类似 UNIX 的 ps 命令。用于查看所有 Java 进程的启动类、传入参数和Java 虚拟机参数等信息&#xff1b;jstat&#xff08;JVM Statistics Monitoring Tool&#x…

虚拟人与娱乐传媒融合,推动综艺新模式

经过多年的更新迭代和市场的推动&#xff0c;虚拟人技术正在逐渐迈向成熟&#xff1a;3D虚拟形象的制作变得越来越精致且真实&#xff0c;并且出现了越来越多功能丰富使用便捷的动捕设备。因此&#xff0c;包括综艺影视在内的诸多领域&#xff0c;开始尝试将虚拟人技术融入行业…

DETR:end-to-end object detection with transformers

DETR 论文精读【论文精读】_哔哩哔哩_bilibili更多论文&#xff1a;https://github.com/mli/paper-reading/, 视频播放量 90699、弹幕量 493、点赞数 3566、投硬币枚数 2939、收藏人数 2564、转发人数 663, 视频作者 跟李沐学AI, 作者简介 &#xff0c;相关视频&#xff1a;在线…

【设计原则】依赖倒置原则--高层代码和底层代码到底谁该依赖谁?

文章目录 前言一、谁依赖谁二、依赖于抽象总结 前言 依赖这个词&#xff0c;程序员们都好理解&#xff0c;意思就是&#xff0c;我这段代码用到了谁&#xff0c;我就依赖了谁。依赖容易有&#xff0c;但能不能把依赖弄对&#xff0c;就需要动点脑子了。 如果依赖关系没有处理…