切换主题 | 切换白天和夜晚模式

简介: 夜晚浏览网页太亮,试试夜晚模式吧,此以 vue3 为例

image.png

夜晚浏览网页太亮,试试夜晚模式吧,此以 vue3 为例

本项目自定义了两种模式,即白天模式和夜晚模式,当然可以添加更多的模式。

image.png

1.新建一个 base.scss 文件,里面写上需要的主题颜色。

// 主题
$themes: (
  // 白天模式
  light:
    (
      bgColor: #ebeaea,
      textColor: #121212,
      cardBgColor: #ffffff,
    ),
  // 夜间模式
  dark:
    (
      bgColor: #121212,
      textColor: #ebeaea,
      cardBgColor: #3a3a3a,
    )
);

2.新建一个 theme.scss 文件,文件主要是解析 theme(这里主要是采自网上写法)


//遍历主题map
@mixin themeify {
  @each $theme-name, $theme-map in $themes {
    //!global 把局部变量强升为全局变量
    $theme-map: $theme-map !global;
    //判断html的data-theme的属性值  #{}是sass的插值表达式
    //& sass嵌套里的父容器标识   @content是混合器插槽,像vue的slot
    [data-theme="#{$theme-name}"] & {
      @content;
    }
  }
}

//声明一个根据Key获取颜色的function
@function themed($key) {
  @return map-get($theme-map, $key);
}

//获取背景颜色
@mixin background_color($color) {
  @include themeify {
    background-color: themed($color) !important;
  }
}

//获取字体颜色
@mixin font_color($color) {
  @include themeify {
    color: themed($color) !important;
  }
}

//获取边框颜色
@mixin border_color($color) {
  @include themeify {
    border-color: themed($color) !important;
  }
}

3.新建 color.scss 文件,主要是自定义颜色样式,在项目任何地方即可使用。


@import "./theme.scss";

// 页面背景色
.page-bgColor {
  @include background_color("bgColor");
}

// 字体颜色
.basis-text-color {
  @include font_color("textColor");
}

// 导航卡片的颜色
.nav-card-bgColor {
  @include background_color("cardBgColor");
}

4.根据需求,切换主题。

假如这里有一个切换的按钮(这里使用两个 icon 代替)

<div class="theme-icon">
  <i
    class="iconfont icon-yueduqi_yewanmoshi-98 title"
    @click="handleChangeThemes"
    v-if="themeData.isDark"
  />
  <i
    class="iconfont icon-baitianmoshi light title"
    @click="handleChangeThemes"
    v-else
  />
</div>

点击切换按钮切换主题(这里是用 vue3,并将其 ts 代码分离)

新建一个 changeTheme.ts 文件


import { onMounted, reactive } from 'vue'

export const changeTheme = () => {
    const themeData = reactive({
        isDark: false
    })
    const handleChangeThemes = () => {
        themeData.isDark = !themeData.isDark
        if (themeData.isDark) {
            window.document.documentElement.setAttribute('data-theme', 'light')
        } else {
            window.document.documentElement.setAttribute('data-theme', 'dark')
        }
    }
    onMounted(() => {
        handleChangeThemes()
    })
    return { themeData, handleChangeThemes }
}

在需要使用的页面引用即可

export default defineComponent({
  name: "",
  setup() {
    const { themeData, handleChangeThemes } = changeTheme()
    return {
      themeData,
      handleChangeThemes
    }
  }
})
相关文章
|
29天前
|
前端开发 定位技术 SEO
基于WordPress开发的高颜值的自适应主题,支持白天与黑夜模式
环境要求 WordPress >=6.0PHP >=7.4 主题特性 支持白天与暗黑模式 全局无刷新加载 支持博客、CMS、企业三种布局 内置 WP 优化策略 内置前台用户中心 支持 QQ / Github / Gitee / 微博登录 支持缩略图伪静态 全局顶部滚动公告 图形及极验验证码支持 自定义 SMTP 支持 一键全站变灰 网页压缩成一行 后台防恶意登录 内置出色的 SEO 功能 评论 ajax 加载 文章点赞、打赏、海报生成、分享 Twemoji 集成 丰富的广告位 丰富的小工具 自动百度链接提交 众多页面模板(读者墙 / 归档 / 书籍推荐 / 站点导航 / 标签 / 站点地图
32 5
|
4月前
|
前端开发 iOS开发 MacOS
vscode自动跟随Mac或window系统系统切换主题色-白天用亮色主题、晚上用暗黑主题
vscode自动跟随Mac或window系统系统切换主题色-白天用亮色主题、晚上用暗黑主题
131 0
|
6月前
|
UED 内存技术
AS3多人游戏开发—同步人物移动
AS3多人游戏开发—同步人物移动
43 0
|
9月前
|
编解码 计算机视觉 Python
2023年电赛---运动目标控制与自动追踪系统(E题)关于网友的问题回复
2023年电赛---运动目标控制与自动追踪系统(E题)关于网友的问题回复
271 0
|
10月前
|
监控 C#
C#大华监控画面切换
C#大华监控画面切换
99 0
|
11月前
|
程序员
同步模式之犹豫模式Balking
同步模式之犹豫模式Balking是一种多线程编程中的同步模式。在该模式中,线程在执行操作之前会先检查某些条件,如果发现在执行操作之前会导致某些不良后果,则该线程会放弃执行该操作,避免出现问题。
76 0
同步模式之犹豫模式Balking
|
12月前
摇杆控制移动自动瞄准射击如何实现?
前言 这篇教程实现了射击游戏中的摇杆控制移动以及自动瞄准射击功能,并提供一个示例项目的模版。
98 0
|
12月前
|
容器
射击游戏中如何实现双摇杆控制
嗨!大家好,我是小蚂蚁。 在移动设备上玩射击游戏,双摇杆控制是一种比较好的方式,我们今天就来分享一下如何在射击游戏中实现双摇杆控制。 所谓的双摇杆控制,指的是一个摇杆控制角色的移动,一个摇杆控制角色的射击。 来到小游戏制作工具中,先导入一些素材。
126 0
抖音白天与晚上触发不同特效的Graph节点编写
抖音白天与晚上触发不同特效的Graph节点编写
79 0
抖音白天与晚上触发不同特效的Graph节点编写
一个解决视频切换花屏的方案
指挥传递RTP的是RTCP,那么RTCP中有没有介绍传递I帧的命令呢?我抱着这样的疑问进行了下搜索,解决方法RFC已经帮我们定义好了。
一个解决视频切换花屏的方案