结合scss实现黑白主题切换
是看了袁老师的视频后,自己做了一下练习。原视频地址:
b站地址
https://www.bilibili.com/video/BV15z4y1N7jB/?spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=c6cf63302f28d94ebc02cbedcecc57ea首先创建一个全局的scss文件。我这里放在了assets文件夹中,创建了一个theme的文件夹,里面放置了一个theme.scss
// 主题
$themes: (// 白亮light: (background: #fff,color: #000,textColor: #000),// 暗黑dark: (background: #121212,color: #fff,textColor: #fff)
);// 当前主题
$curTheme: light;// 混合
// @mixin useTheme() {
// html[data-theme='light'] & {
// background-color: #fff;
// color: #000;
// }
// html[data-theme='dark'] & {
// background-color: #121212;
// color: #fff;
// }
// }// 混合优化(遍历上面的主题)
@mixin useTheme() {@each $key, $value in $themes {$curTheme: $key !global; // 当前的主题html[data-theme = #{$key}] & { // & 表示传入什么选择器就是什么选择器@content; // 类似于插槽,样式可以进行传入}}
}// 生成对应主题的变量
@function getVar($key) {$themeMap: map-get($themes, $curTheme);@return map-get($themeMap, $key);
}
然后通过vite进行这个scss文件的全局配置,这样就不用多次引入了。修改vite.config.ts文件。修改之后记得重新npm run dev,重新启动一下
import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},// 上面的是默认的css: { // 引入全局的scss文件// css预处理器preprocessorOptions: {scss: {// 引入 theme.scss 这样就可以在全局中使用 theme.scss中预定义的变量和方法了// 给导入的路径最后加上 ; additionalData: '@import "./src/assets/theme/theme.scss";'}}}
})
然后就可以进行测试了
<template><div class="test">123</div><el-switch v-model="flag" @change="change"></el-switch>
</template><script setup lang="ts">
import { ref } from 'vue'// 这里从本地取是为了保持刷新以后也能一致
const flag = ref(localStorage.getItem('theme') === 'dark' ? true : false)const change = (flag: boolean) => {localStorage.setItem('theme', flag ? 'dark' : 'light') // 存本地,刷新的时候会用// 控制html标签,给自定义属性data-theme添加对应的值,这样对应的样式就会生效document.querySelector('html')?.setAttribute('data-theme', flag ? 'dark' : 'light')
}
</script><style lang="scss">
// 由于vite已经配置过了,所以不需要引入了。如果引入失败,那就老老实实在使用的文件中都引入
// @import '../assets/theme/theme.scss'; // 使用测试
.test {// 共有样式部分width: 100px;height: 100px;// 黑白主题特有部分样式@include useTheme() {background-color: getVar('background');color: getVar('color');}
}
</style>
白亮的

暗黑的

但是会有一个问题,就是刷新的时候,发现html标签的data-theme自定义属性丢失了。所以就需要在App.vue文件中,重新再给html标签设置一下data-theme自定义属性,值就是我们存本地的值
<script setup lang="ts">
import { RouterView } from 'vue-router'// 添加主题,每次刷新的时候还是原先选择的主题
let theme = localStorage.getItem('theme') || 'light'
document.documentElement.setAttribute('data-theme', theme)
</script><template><RouterView />
</template><style lang="scss">
* {padding: 0;margin: 0;box-sizing: border-box;
}html,body,#app {width: 100%;height: 100%;
}
</style>
这样刷新的话也不会受到影响了
相关文章:
结合scss实现黑白主题切换
是看了袁老师的视频后,自己做了一下练习。原视频地址: b站地址https://www.bilibili.com/video/BV15z4y1N7jB/?spm_id_from333.1007.top_right_bar_window_history.content.click&vd_sourcec6cf63302f28d94ebc02cbedcecc57ea首先创建一个全局的scs…...
go-zero对数据库的操作
一、go-zerro中结合gorm来操作mysql数据库 1、这里我这就直接结合gorm-gen的方式来实现数据库操作,关于gorm-gen可以参考官网 2、创建一个数据库,并且创建一个表 -- ------------------------ -- 用户表 -- ------------------------ DROP TABLE IF EXISTS user; C…...
Mac git查看分支以及切换分支
查看本地分支 git branch 查看远程仓库分支 git branch -r 查看本地与远程仓库分支 git branch -a 切换分支 git checkout origin/dev/js...
Qt调起Mac“系统设置”面板
mac系统设置相关字段: Accessibility 面板相关 项目 URL Scheme Main x-apple.systempreferences:com.apple.preference.universalaccess Display x-apple.systempreferences:com.apple.preference.universalaccess?Seeing_Display Zoom x-apple.systempreference…...
小程序如何刷新当前页面
小程序可以通过调用wx.pageScrollTo()方法来实现刷新当前页面,该方法可以滚动页面并使页面滚动到顶部,从而达到刷新页面的效果。具体的操作步骤如下: 在需要刷新的页面中添加一个按钮或其他触发事件的元素。 绑定相应的点击事件,…...
OSI参考模型
目录 一. OSI参考模型的各层功能二. 网络排错三. 网络安全四. 实体、协议、服务和服务访问点SAP五. TCP IP体系结构 一. OSI参考模型的各层功能 \quad \quad \quad \quad 我们首先来看应用层实现的功能 每个字段的各种取值所代表的意思 \quad \quad 比如要保存的文件内容是ab…...
(c语言进阶)内存函数
一.memcpy(void* dest,void* src,int num) ,操作单位为字节,完成复制且粘贴字符串 1.应用 #include <stdio.h> #include<string.h> int main() {int arr1[] { 1,2,3,4,5,6,7,8,9,10 };int arr2[20] { 0 };memcpy(arr2, arr1, 20);//从…...
【2023春李宏毅机器学习】快速了解机器学习基本原理
文章目录 机器学习约等于机器自动找一个函数 机器学习分类 regression:输出为连续值classification:输出为一个类别structured learning:又叫生成式学习generative learning 生成有结构的物件(如:影像、句子…...
人工智能:科技的魔术师
引言: 人工智能(Artificial Intelligence,简称AI)作为一项前沿技术,正以惊人的速度改变着我们的生活。它像魔术师一样,能够解决我们的问题、提供建议,甚至预测未来。从智能手机到智能家居&…...
三菱FX3U小项目—运料小车自动化
目录 一、项目描述 二、IO口分配 三、项目流程图 四、项目程序 五、总结 一、项目描述 设备如下图所示,其中启动按钮SB1用来开启运料小车,停止按钮SB2用来手动停止运料小车(其工作方式任务模式要求)。当小车在原点SQ1位置,按下启动按钮S…...
智慧城市大脑数据中台解决方案:PPT全套37页,附下载
关键词:智慧城市大脑解决方案,数据中台解决方案,智慧城市建设,数据中台建设,智慧城市大脑建设,数据中台建设架构 一、智慧城市大脑数据中台建设背景 智慧城市大脑数据中台是一个面向城市级数据管理、开发和…...
vs code git问题:文件明明已加入忽略文件中,还是出现
vs code git问题:文件明明已加入忽略文件中,还是出现 原因: 因为之前这些文件都已经提交过,线上GIT已经存在,已存在就不能忽略, 解决办法: 先要删除这些文件提交上去,然后把这些文…...
打不开github网页解决方法
问题: 1、composer更新包总是失败 2、github打不开,访问不了 解决方法:下载一个Watt Toolkit工具,勾选上,一键加速就可以打开了。 下载步骤: 1、打开网址: Watt Toolkit 2、点击【下载wind…...
【预处理详解】
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 1. 预定义符号 2. #define定义常量 3. #define定义宏 4. 带有副作用的宏参数 5. 宏替换的规则 6. 宏函数的对比 7. #和## 7.1 #运算符 7.2 ## 运算符 8. 命名约定 …...
BetterDisplay Pro v2.0.11(显示器颜色校准软件)
BetterDisplay Pro是一款为Mac电脑设计的屏幕亮度调节软件,旨在提高显示器的色彩和亮度表现。它可以根据用户的需求和显示器的特性,自动调整显示器的亮度、色温、对比度等参数,以获得更加真实、舒适的视觉效果。 这款软件拥有智能调节功能&a…...
APP外包开发需要注意的问题
在进行APP外包开发时,有一些关键问题需要注意,以确保项目的顺利进行和最终交付满足预期的应用。以下是一些在APP外包开发中需要关注的问题,希望对大家有所帮助。北京木奇移动技术有限公司,专业的软件外包开发公司,欢迎…...
Wireshark TS | 应用传输缓慢问题
问题背景 沿用之前文章的开头说明,应用传输慢是一种比较常见的问题,慢在哪,为什么慢,有时候光从网络数据包分析方面很难回答的一清二楚,毕竟不同的技术方向专业性太强,全栈大佬只能仰望,而我们…...
邦芒支招:求职自荐的五条技巧
求职自荐的技巧有哪些,在职场中,求职是很讲究技巧的,因为每个人都想自己的在面试的时候能取得好的结果,那么求职自荐的技巧有哪些呢?下面就跟小邦一起来了解一下吧。 第一、要积极主动。求职自荐是求职者的…...
受电诱骗快充取电芯片XSP08:PD+QC+华为+三星多种协议9V12V15V20V
目前市面上很多家的快充充电器,都有自己的私有快充协议,如PD协议、QC协议、华为快充协议、三星快充协议、OPPO快充协议等待,为了让它们都能输出快充电压,就需要在受电端也增加快充协议取电芯片XSP08,它可以和充电器通讯…...
课程32:.Net Core Web API部署IIS
这里写目录标题 🚀前言前言一、服务器环境配置1.1 安装 ASP.NET Core模块/托管捆绑包1.2 检查是否安装成功二、项目发布2.1 选择发布方式2.2 发布配置2.3 发布三、服务器部署3.1 IIS添加网站3.2 数据库链接配置3.3 让IIS支持.NET Web Api3.4 验证四、最后🚀前言 本文是《.…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
Robots.txt 文件
什么是robots.txt? robots.txt 是一个位于网站根目录下的文本文件(如:https://example.com/robots.txt),它用于指导网络爬虫(如搜索引擎的蜘蛛程序)如何抓取该网站的内容。这个文件遵循 Robots…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...
【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)
1.获取 authorizationCode: 2.利用 authorizationCode 获取 accessToken:文档中心 3.获取手机:文档中心 4.获取昵称头像:文档中心 首先创建 request 若要获取手机号,scope必填 phone,permissions 必填 …...
安卓基础(aar)
重新设置java21的环境,临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的: MyApp/ ├── app/ …...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...
AI病理诊断七剑下天山,医疗未来触手可及
一、病理诊断困局:刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断",医生需通过显微镜观察组织切片,在细胞迷宫中捕捉癌变信号。某省病理质控报告显示,基层医院误诊率达12%-15%,专家会诊…...
