vue3实现主题切换功能

本文使用的技术主要包括 vue3+vite+scss

1.配置全局scss变量

首先在src目录下创建styles文件夹，并新建common.scss文件，内容如下：

// 文字颜色
$fontColor: var(--font-color, #333);
// 盒子背景
$boxBgColor: var(--bg-color, #ccc);

修改vite.config.ts文件，引入全局scss文件，内容如下：

export default defineConfig({plugins: [vue()],resolve: {alias: {'@': path.resolve(__dirname, './src'),'components': path.resolve(__dirname, './src/components'),}},css: {preprocessorOptions: {scss: {additionalData: `@import '@/styles/common.scss';` // 引入全局变量文件}}}
})

2.主题控制方法

在src下的hooks文件夹下，新建 changeColor.ts 文件，内容如下：


// 修改主题
import { ref } from 'vue';
const useThem = () => {const isDarkThem = ref(false); // 是否是暗黑主题// 主题切换const changeThem = () => {if (isDarkThem.value) {document.getElementsByTagName('body')[0].style.setProperty('--font-color', '#fff');document.getElementsByTagName('body')[0].style.setProperty('--bg-color', '#000');} else {document.getElementsByTagName('body')[0].style.setProperty('--font-color', '#333');document.getElementsByTagName('body')[0].style.setProperty('--bg-color', '#ccc');}}return { isDarkThem, changeThem }
}export { useThem };

3.页面使用

引入主题控制方法，使用按钮进行主题切换，内容如下：


<template><div class="testPage"><div class="box"><span>测试文字</span></div><el-switch v-model="isDarkThem" class="mb-2" active-text="黑夜" inactive-text="白天" @change="changeThem" /></div>
</template>
<script setup lang="ts">
import { useThem } from '@/hooks/changeColor'
const { isDarkThem, changeThem } = useThem();</script>
<style scoped lang="scss">
.box {background-color: $boxBgColor; // 全局变量width: 200px;height: 200px;margin: 0 auto 20px;line-height: 200px;text-align: center;span {color: $fontColor;  // 全局变量}
}
</style>

4.效果展示：

展示切换开关的效果，实现主题切换功能

vue3实现主题切换功能相关推荐

【Web技术】1374- 纯 JS 实现灵活的前端主题切换功能
demo在线体验地址:https://hongqingcao.github.io/v-theme-colors/ 源码地址:https://github.com/HongqingCao/v-theme ...
Android主题切换功能
App一般会有多套颜色主题,下面介绍如何在App中添加主题切换功能: 先添加自定义属性,在values目录下新建attr.xml,根据主题中需要动态修改的颜色或者图片设定自定义属性 <?xml ...
apkplug主题切换功能之主题包打包编译-07
主题包与普通插件开发相同,只是须上传服务器进行编译生成apk主题包一主题包(插件)搭建 1.按照普通app创建流程创建安卓工程 2.按照apkplug插件开发流程添加必要文件 <apkplu ...
Vue2.0实现炫酷的主题切换功能
效果展示实现原理通过写多套样式文件,在项目编译完成后动态更改link标签引入实现过程首先如果需要多套主题,必须要有多套样式文件,而样式文件又有很多写法,下面分享一下我的写法主题css 首先我 ...
【Web技术】1431- 总结前端主题切换的思考和现代前端样式的解决方案落地
关于本文来自:codercao https://juejin.cn/post/7106702604024938503 demo在线体验地址:https://hongqingcao.github.io ...
CI框架主题切换的功能
CI框架主题切换的功能本人接触到这个框架不就,属于菜鸟 , 公司现在用CI框架做项目 ,老大要做一个主题切换的功能,说明功能的要求我的脑子里瞬间有几个想法. 脑子里最简单的就是设置全局变量如 : ...
jQuery实现无刷新切换主题皮肤功能
主题皮肤切换功能在很多网站和系统中应用,用户可以根据此功能设置自己喜欢的主题颜色风格,增强了用户体验.本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能. 实现该功能的原理就是通过点击定义的 ...
iOS App主题皮肤切换功能简介和具体实现详解附有源码
分享一个朋友的人工智能教程.比较通俗易懂,风趣幽默,感兴趣的朋友可以去看看. 0.换肤的应用场景一般情况下某些App在节假日(春节.中秋.国庆等)切换主题,显得更适合当下的气氛; 切换白天或夜晚模式 ...
react实现线上主题动态切换功能
demo 框架选择: create-react-app + mobx + webpack5 + antdesign 说明由于最近公司有多个主题的共存性,所以需要实现线上主题切换的功能,所以本文主要描 ...

vue3实现主题切换功能

vue3实现主题切换功能相关推荐

最新文章

热门文章