利用less实现多主题切换(配合天气现象)

这篇具有很好参考价值的文章主要介绍了利用less实现多主题切换(配合天气现象)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 先看效果:利用less实现多主题切换(配合天气现象),实用方法,less,前端,javascript
2. 话不多说直接撸吧:

  • 原理:先给body元素添加style,再根据天气现象动态更改style
    利用less实现多主题切换(配合天气现象),实用方法,less,前端,javascript

  • 开撸:

  • 创建src/assets/style/variables.less 使用 @XXX:var(–XXX,‘style’) 声明系列变量,之后添加其他变量直接增加即可(由于之后要配置颜色,默认值可以先给" ")
    也可以声明一下常用的class,方便全局使用(这里已.backgroundCard 为例)

// 默认的主题颜色
@backgroundImg: var(--backgroundImg, ''); //背景
@backgroundCard: var(--backgroundCard, ''); //卡片背景
@backgroundTab: var(--backgroundTab, ''); //底部tab背景
@backgroundDeep: var(--backgroundDeep, ''); //小时累计背景
@backgroundDeepTextColor: var(--backgroundDeepTextColor, ''); //小时累计字体颜色
@textColorStyle: var(--textColorStyle, ''); //卡片内的(包括不限于温度,降水,风)值得颜色
@textColorStyleBottom: var(--textColorStyleBottom, ''); //卡片内的(包括不限于温度,降水,风)值下面的描述颜色
@backgroundCardLine: var(--backgroundCardLine, ''); //卡片标题下面的线条
@colorStopsOffset1: var(--colorStopsOffset1, ''); //echarts折线图渐变色0%处
@colorStopsOffset2: var(--colorStopsOffset2, ''); //echarts折线图渐变色100%处
@lineStyleClor: var(--lineStyleClor, ''); echarts折线颜色
@backgroundPrecipitation: var(--backgroundPrecipitation, ''); //降水按钮背景
@r: 25rem;
//首页卡片
.backgroundCard {
  position: relative;
  padding: 14 / @r;
  border-radius: 14 / @r;
  background-color: @backgroundCard;
  text-align: center;
  font-size: 13 / @r;
  color: #fff;
  margin-bottom: 14 / @r;
}
  • 创建src/config/model.ts 声明所有类型主题themes
//定义主题使用条件及强制使用时间
export const weatherType: any = [
  { typeNames: ['默认底部tabber'], theme: 'defaultTabbar', mandatoryUsageTime: [] },
  { typeNames: ['晴'], theme: 'default', mandatoryUsageTime: [] },
  {
    typeNames: [
      '雨',
      '阴',
      '阵雨',
      //...
    ],
    theme: 'rain',
    mandatoryUsageTime: []
  },
  { typeNames: ['夜晚'], theme: 'dark', mandatoryUsageTime: ['22:00:00', '7:00:00'] }
]
// 定义主题色变量值
// 默认使用default(蓝色);  '雾'使用rain(灰色);
// 在mandatoryUsageTime[开始时间,第二天结束时间]之间使用dark
export const themes: any = {
  defaultTabbar: {
    backgroundCard: 'rgba(35,115,191,0.8)',
    backgroundTab: 'rgba(35,115,191,0.8)',
    textColorStyle: '#FFDE3D'
  },
  default: {
    backgroundImg: 'url(/images/weatherBg/img-qinbtian.png)',
    backgroundCard: 'rgba(35, 115, 191, 0.80)',
    backgroundTab: '#2373BF',
    backgroundDeep: '#1C6CB7',
    backgroundDeepTextColor: '#00A4FF',
    backgroundPrecipitation: 'rgba(35, 115, 191, 0.80)',
    textColorStyle: '#FFDE3D',
    backgroundCardLine: 'rgba(255,255,255,.2)',
    textColorStyleBottom: '#95bde3',
    colorStopsOffset1: 'rgba(110, 186, 255,1)',
    colorStopsOffset2: 'rgba(255,255,255,0)',
    lineStyleClor: '#00A4FF'
  },
  dark: {
    backgroundImg: 'url(/images/weatherBg/img-wanshang.png)',
    backgroundCard: 'rgba(16, 4, 77, 0.80)',
    backgroundTab: '#10044D',
    backgroundDeep: '#281A72',
    backgroundDeepTextColor: '#D9D9D9',
    backgroundPrecipitation: 'rgba(16, 4, 77, 0.80)',
    textColorStyle: '#EB6ECC',
    backgroundCardLine: 'rgba(255,255,255,.2)',
    textColorStyleBottom: '#918ca9',
    colorStopsOffset1: 'rgba(235, 110, 204,1)',
    colorStopsOffset2: 'rgba(255,255,255,0)',
    lineStyleClor: '#EB6ECC'
  },
  rain: {
    backgroundImg: 'url(/images/weatherBg/img-yingtian.png)',
    backgroundCard: 'rgba(82, 102, 126, 0.80)',
    backgroundTab: '#52667E',
    backgroundDeep: '#4D617B',
    backgroundDeepTextColor: '#B5B5B5',
    backgroundPrecipitation: 'rgba(82, 102, 126, 0.8)',
    textColorStyle: '#64D2FE',
    backgroundCardLine: 'rgba(255,255,255,.2)',
    textColorStyleBottom: '#adb7c4',
    colorStopsOffset1: 'rgba(110, 186, 255,1)',
    colorStopsOffset2: 'rgba(255,255,255,0)',
    lineStyleClor: '#00A4FF'
  }
}
  • 创建src/config/weatherTheme.ts 进行逻辑处理
import { themes, weatherType} from './model'
import { store, pinia } from '@src/store'
import { ref } from 'vue'
import dayjs from 'dayjs'
import * as webStorage from '@src/utils/web-storage'

/**
 * 传入天气现象名称更改主题
 * @param typeName 天气现象名称
 */
export function changeTheme(typeName) {
  const day = dayjs().format('YYYY-MM-DD')
  const dayAdd1 = dayjs().add(1, 'days').format('YYYY-MM-DD')
  const nowTime_ = new Date().getTime()
  let theme = 'default'
  for (let i = 0; i < weatherType.length; i++) {
    const ele = weatherType[i]
    store.system.useThemeStore(pinia).changeIsDark(false)
    //有强制使用时间先使用强制时间 ['21:00:00', '10:00:00']
    if (ele.mandatoryUsageTime.length && typeName != '默认底部tabber') {
      const sTime = `${day} ${ele.mandatoryUsageTime[1]}` //2023-08-09 22:00:00
      const eTime = `${day} ${ele.mandatoryUsageTime[0]}` //2023-08-10 10:00:00
      const sTime_ = dayjs(sTime).valueOf() //2023-08-09 09:44:00
      const eTime_ = dayjs(eTime).valueOf()
      if (nowTime_ >= sTime_ && nowTime_ <= eTime_) {
      } else { //使用夜晚风格
        setTheme(ele.theme)
        store.system.useThemeStore(pinia).changeIsDark(true)
        return
      }
    } else {
      if (ele.typeNames.includes(typeName)) theme = ele.theme
    }
  }
  setTheme(theme)
}

// 修改页面中的样式变量值
const changeStyle = (obj: any, themeName: string) => {
  //存入主题类型
  store.system.useThemeStore(pinia).changeThemeType(themeName)
  for (const key in obj) {
    document.getElementsByTagName('body')[0].style.setProperty(`--${key}`, obj[key])
    //存入主题色
    store.system.useThemeStore(pinia).changeWeatherThemeObj(`--${key}`)
  }
}
// 改变主题的方法
export const setTheme = (themeName: any) => {
  const themeConfig = themes[themeName]
  changeStyle(themeConfig, themeName)
}
  • 使用:再需要改变主题的页面或者逻辑中使用changeTheme()方法即可(这里已首次进入的.vue文件为例)
//首先使用上次的主题
const weatherThemeName = webStorage.getLocalStorage(`weatherThemeName`)
changeTheme(weatherThemeName || '晴'
)
//我业务的逻辑是动态获取天气现象,根据天气现象的不同使用不同的主题,这里可以改成自己的逻辑(方法有筛检)
const getWeatherInfo = async (time, posInfo) => {
  await api.windRain
    .weatherLiveBypoint() //自己的方法
    .then(res => {
      if (!res.code && res.data) {
        const data = res.data
        //只有再首页“风雨”模块使用,防止底部切换过快
        if (router.value.meta.title == pageStore.defaultname) {
          //每次将天气现象存到storage里,下次进来直接取
          webStorage.setLocalStorage('weatherThemeName', data.wpName)
          changeTheme(data.wpName || '晴')
        }
      }
      emit('getWeatherInfoData', weatherInfoData)
    })
}

getWeatherInfo()
//css使用,这里只是一部分,在相应的class后直接使用之前定义的方法即可
<style lang="less" scoped>
.page-wind-rain {
  width: 100%;
  height: 100%;
  background-image: @backgroundImg;
  background-size: 100% 100%;
  background-color: @backgroundCard;	
}
</style>
  • vite.config.ts配置
    最后将我们定义的variable.less在css预处理器中配置
    利用less实现多主题切换(配合天气现象),实用方法,less,前端,javascript

  • 大功告成!!!

利用less实现多主题切换(配合天气现象),实用方法,less,前端,javascript文章来源地址https://www.toymoban.com/news/detail-700240.html

到了这里,关于利用less实现多主题切换(配合天气现象)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue css变量实现多主题皮肤切换

    实现方式 多主题皮肤切换有很多种实现方式,可以用css预处理器实现,可以用js实现,其实最近简单的一种方式是用css变量(css variable)实现 单页面应用中,可以通过设置body的css变量爱控制整个系统的颜色,body添加一个属性my-theme,该属性值用来表示当前页面的主题皮肤,切换

    2024年02月06日
    浏览(52)
  • C# WPF实现动画渐入暗黑明亮主题切换效果

    最近在Bilibili的桌面端看到一个黑白主题切换的效果感觉,挺有意思。于是我使用WPF尝试实现该效果。 主要的切换效果,基本实现不过还存在一些小瑕疵,比如字体等笔刷不能跟随动画进入进行切换。因为Bilibili的客户端是用electron写的,前端使用的html,css确实太强了,这咱只

    2024年02月16日
    浏览(46)
  • vue使用element-ui 实现多套自定义主题快速切换

    下载到本地项目文件 配置所需主题样式文件和className,例如上面代码:theme-black、theme-blue… 在根目录执行以下命令:

    2024年02月11日
    浏览(47)
  • uniapp主题切换功能的第二种实现方式(scss变量+require)

    在上一篇 “uniapp主题切换功能的第一种实现方式(scss变量+vuex)” 中介绍了第一种如何切换主题,但我们总结出一些不好的地方,例如扩展性不强,维护起来也困难等等,那么接下我再给大家介绍另外一种切换主题的方法“scss变量+require”的方式 在介绍如何使用前,先看下

    2024年02月08日
    浏览(49)
  • uniapp主题切换功能的第一种实现方式(scss变量+vuex)

    随着用户端体验的不断提升,很多应用在上线的时候都要求做不同的主题,最基本的就是白天与夜间主题。 就像b站app主题切换,像这样的 uniapp因为能轻松实现多端发布而得到很多开发者的青睐,但每个端的实现也有可能不同,现我把已实现的功能一点点的大家分享给大家,

    2024年02月08日
    浏览(49)
  • Naive UI+Vue3来实现点击按钮一键切换明暗主题的功能

    记录一下如何使用Naive UI+Vue3代码来实现一键切换明暗主题的功能。 效果如下: 终端下输入: 起好项目的名称,然后一路回车即可。 至此Vue3的项目已经搭建完毕,打开http://127.0.0.1:5173/就可以看到项目的默认首页了。 安装Naive UI依赖库 然后我们根据官方出的配置对项目进行

    2024年02月12日
    浏览(41)
  • Rspack 创建 vue2/3 项目接入 antdv(rspack.config.js 配置 less 主题)

    Rspack CLI 官方文档。 rspack.config.js 官方文档。 创建项目(文档中还提供了 Rspack 内置 monorepo 框架 Nx 的创建方式,根据需求进行选择) 创建好项目并运行,目前 Rspack 版本支持的工程模版: 默认创建的 vue 项目为 vue3 : 如果需要其他版本,或其他框架的基础工程,可到官方提

    2024年02月11日
    浏览(54)
  • Hadoop高可用(主备切换)---配合Zookeeper

    HA(High Available), 高可用,是保证业务连续性的有效解决方案 ,一般有两个或两个以上的节点,分为活动节点(Active)及备用节点(Standby)。 通常把正在执行业务的称为活动节点(Active),而作为活动节点的一个备份的则称为备用节点(Standby) 。当活动节点出现问题,导致正

    2024年01月15日
    浏览(48)
  • Android 中利用多个Button组合实现选项切换效果

    效果图:       xml布局: gray_button.xml rect_white_button.xml  rect_gray_bg.xml  ​自己再实现3个按钮的点击事件即可  

    2024年02月15日
    浏览(48)
  • 利用悬浮窗加PopupWindow实现从手机屏幕右边划出应用快捷切换

    效果如上图所示 安卓小白记录学习过程。一起交流学习。有问题请多多指出。话不多说进入正题。 一、思路 首先明确需求,我们需要做一个右划弹出一个快捷切换应用的弹窗。 悬浮窗可以在其他应用上层显示出来,那么我们可以设置一个透明的悬浮窗让它显示在其他应用上

    2024年02月11日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包