首页 > 其他分享 >第七章 项目布局实现(7.4.6)——暗黑模式切换功能

第七章 项目布局实现(7.4.6)——暗黑模式切换功能

时间:2024-08-31 12:23:09浏览次数:11  
标签:scss use 7.4 dark html 暗黑 第七章 css

7.4.6 暗黑模式切换功能

Element Plus 参考:https://cn.element-plus.org/zh-CN/guide/dark-mode.html

VueU 参考:https://vueuse.org/core/useDark/

Element Plus 2.2.0+ 版本支持暗黑模式,导入暗黑样式文件,然后在 index.htmlhtml 标签上添加一个 class="dark" 的类名即可切换为暗黑模式。

  1. 导入暗黑主题 css 变量文件

    // src/styles/index.scss
    @use 'base.scss';
    @use '@unocss/reset/tailwind-compat.css';
    // ++++++++++
    @use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
    // ----------
    
    
  2. 修改 src/layout/layoutHeader/Head

标签:scss,use,7.4,dark,html,暗黑,第七章,css
From: https://blog.csdn.net/qdbest/article/details/141602027

相关文章

  • 第七章 项目布局实现(7.5.1)——页面缓存
    7.5右侧主区域实现7.5.1页面缓存defineOptions定义组件name属性值参考:https://cn.vuejs.org/api/sfc-script-setup.html#defineoptions对于[email protected]及以上版本,在使用<scriptsetup>的单文件组件时,vue会根据文件名,自动推导出name属性值。比如:名称为Layo......
  • window 安装redis7.4
    下载:github:https://github.com/redis-windows/redis-windows/releasesredis7.4.0:https://github.com/redis-windows/redis-windows/releases/download/7.4.0/Redis-7.4.0-Windows-x64-msys2-with-Service.zip解压:Redis-7.4.0-Windows-x64-msys2-with-Service.zip安装:1、可......
  • lazarus编写的应用开启(windows) 暗黑模式
    在QQ群大神大悟还俗发现fpcudeluxe在windows暗黑模式使用时界面也是和windows一样,这是他提供的方法:1、拷贝fpcudeluxe的metadarkstyle文件夹的文件到project目录(下载地址https://www.123pan.com/s/6OFxjv-JFdu3?提取码:iBiZ)2、在project*.lpr的uses增加下图绿框的代码programPr......
  • ThinkPHP 6 + PHP7.4.3nts +nginx 使用mysql和oracle数据库
    ThinkPHP6+PHP7.4.3nts+nginx使用mysql和oracle数据库.前言业务需求,之前使用的php7.3.4nts,mysql自己写的代码,需要对接第三方系统,第三方使用的oracle数据库。之前也是各种的网查,稀里糊涂的成功了。上周五又需要对接,这次用的是php7.4.3nts,各种试了两三天不行,昨晚就突然可以......
  • Centos7(最小化安装)系统源代码安装mysql5.7.44版本
    官网下载mysql源代码安装包步骤(旧档案-版本下载方式)-CSDN博客下载cmake操作步骤-CSDN博客下载ncurses操作步骤-CSDN博客下载bison操作步骤-CSDN博客下载boost操作步骤-CSDN博客安装之前由于是最小化安装centos7安装一些开发环境和工具包文章使用国内阿里源cd/etc/yum.r......
  • [每周一更]-(第111期):从零开始:如何在 CentOS 上源码编译安装 PHP 7.4
    文章目录系统信息:0、安装版本:1、下载/解压2、安装依赖3、配置autoconf4、配置参数5、编译和安装6、验证安装的插件6.1、配置php.ini6.2、配置opcache7、错误7.1Failedtoconnectto2a03:2880:f10e:83:face:b00c:0:25de:Networkisunreachable7.1.1禁用yum使用I......
  • CentOS 7.4 Linux 下文件名乱码快速解决方案
    原文链接: https://blog.csdn.net/qingyujin/article/details/119026866文件是在WIndows下创建的,Windows的文件名中文编码默认为GBK,而Linux中默认文件名编码为UTF8,由于编码不一致所以导致了文件名乱码的问题,解决这个问题需要对文件名进行转码。文件名转码工具convmv没安装......
  • TCPIP路由技术第一卷第七章第三部分Eigrp邻居发现以及DUAL算法
    普通情况下eigrp每5秒发一次hello.在多点的x.25、帧中继和atm接口上,由于他们介入链路速率通常是t1或更低的速率,他们的hello数据包是以单播方式每60s发送一次的.hello包5秒一次常见接口ethernet,point-to-point,point-to-point子接口帧中继.hello包60秒一次常见接口nbmafra......
  • TCPIP路由技术第一卷第七章第二部分Eigrp的五种包以及RTP机制
    rtp也可以使用不可靠的发送,不需要确认,而且在使用不可靠发送的eigrp数据包中不包含序列号.eigrp协议使用多种类型的数据包,所有这些数据包都通过ip头部的协议号88来标识.hello(hello)-用于邻居发现和恢复进程,hello数据包使用组播方式发送.而且使用不可靠的发送方式.确认(ackn......
  • TCPIP路由技术第一卷第七章第一部分Eigrp整体概述以及邻居
    igrp不支持无类路由eigrp思科私有扩展更新算法dualk值metric=cost[10^7/BWmin+delaysum]*256距离矢量路由协议触发更新ipbandwidth-percenteigrp来改变缺省占用总带宽的百分比.缺省情况下,egirp协议使用的带宽不超过链路总带宽的50%.eigrp无类别的路由协议,更新包含子......