change_dark

介绍

切换暗黑模式的动画效果

引用

# yarn 安装
yarn add @travel_wsy/change_dark

# npm 安装
npm install @travel_wsy/change_dark -S

使用方法

1、引入

# 在需要使用的页面引入文件
# 引入方法
import {change_dark} from '@travel_wsy/change_dark'
# 引入样式
import '@travel_wsy/change_dark/index.css'

2、使用

# event :当前点击节点
# isDark :是否暗黑模式
# 回调函数
change_dark(event,isDark,async () =>{
  # 添加dark到html
 document.getElementsByTagName("html")[0].className = isDark ? 'dark':''
  # 在这里添加项目暗黑-日间模式切换代码
 await this.$nextTick()
})

注意：如果 dark 不是添加在html的class中，则需要修改下面样式

.dark::view-transition-old(root) {
  z-index: 2147483646;
}

.dark::view-transition-new(root) {
  z-index: 1;
}