vue实现多窗口主题样式切换以及跟随系统切换

最新推荐文章于 2024-09-05 15:50:58 发布

原创

最新推荐文章于 2024-09-05 15:50:58 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章介绍了如何在Vue项目中利用matchMediaAPI检测系统主题，并结合localStorage实现多窗口间的主题切换功能。同时，提供了完整的代码示例，包括监听系统变化、跨页面通信及AntDesignVue主题切换的配置方法。

vue实现多窗口主题样式切换以及跟随系统切换

自我记录

一.知识点链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme
一.知识点链接:https://www.runoob.com/jsref/met-win-matchmedia.html
二.监听 storage 变动（跨页签通信）
三.watchEffect 侦听器

一.js+css 去匹配系统主题颜色

// 使用matchMedia API 去匹配css的媒体查询的 系统的主题是否为案(dark)颜色 (也可以去匹配屏幕的宽度高度等)
const match = matchMedia('(prefers-color-scheme:dark)')
console.log(match,'match');

在这里插入图片描述

二. 跨标签通信

window.addEventListener('storage', (event) => {
   
   
      console.log(event.newValue)
    })

A页面存储发生变化时B页面可以监听到
在这里插入图片描述

三.监听本地存储的变化并赋值

watchEffect(() => {
   
   
 localStorage.setItem(LOCAL_KEY, theme.value)
 document.documentElement.className = theme.value
})

四.全部代码

<template>
  <a-layout-header class="head-box" :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
    <a-row :gutter="{ xs: 24, sm: 24, md: 24, lg: 24 }">
      <a-col :xs="7" :sm="7" :md="7" :lg="7">奔跑的代码!</a-col>
      <a-col :xs="6" :sm="6" :md="6" :lg="6">奔跑的代码!</a-col>
      <a-col :xs="6" :sm="6" :md="6" :lg="6">奔跑的代码!</a-col>
      <a-col :xs

最低0.47元/天解锁文章