Tailwindcss开启黑夜模式

本篇讲述如何使用tailwindcss切换白天黑夜主题

tailwindcss自带的暗夜切换会比css自带的theme主体切换来得方便很多,学习成本也很低,只要求会用tailiwndcss

1,tailwindcss.config有两种暗夜模式切换,媒体查询和手动类切换。手动控制需要开启类模式

javascript 复制代码
// tailwind.config.js
export default {
    ...
    darkMode:'class', // 使用class策略
}

2,设置点击切换事件:点击为html根元素添加dark类

javascript 复制代码
// 切换主体颜色(直接修改html的类)
const toggleTheme = () => {
    const html = document.documentElement

    html.classList.toggle('dark')
    if (html.classList.contains('dark')) {
        localStorage.setItem('Dark', 'true')
    } else {
        localStorage.removeItem('Dark')
    }
}

切换后 将是否有dark类 存放在localstorage中,保持记忆性

3,进入网页前,记忆用户选择的模式,在index.html中写入函数,使其在页面渲染前执行,如果localstorage已经存放了dark 代表开启暗夜模式 如果没有 则不执行

javascript 复制代码
// index.html  
<head>
<script>
      // 在页面渲染前执行
      (function() {
        if (localStorage.getItem('Dark')) {
          document.documentElement.classList.add('dark');
        }
      })();
    </script>
</head>
相关推荐
冷琴19964 小时前
基于python+django+vue.js开发的医院门诊管理系统/医疗管理系统源码+运行
vue.js·python·django
全宝5 小时前
🔥一个有质感的拟态开关
前端·css·weui
绿草在线5 小时前
Vue3 开发的 VSCode 插件
ide·vue.js·vscode
银之夏雪6 小时前
Vue 3 vs Vue 2:深入解析从性能优化到源码层面的进化
前端·vue.js·性能优化
-代号95276 小时前
【CSS】一、基础选择器
前端·css
柒@宝儿姐6 小时前
如何判断一个项目用的是哪个管理器
前端·javascript·vue.js·vue3
计算机-秋大田7 小时前
基于Spring Boot的小区疫情购物系统的设计与实现(LW+源码+讲解)
java·vue.js·spring boot·后端·课程设计
一个处女座的程序猿O(∩_∩)O7 小时前
Vue 计算属性与 Data 属性同名问题深度解析
前端·javascript·vue.js
小咕聊编程8 小时前
【含文档+PPT+源码】基于SpringBoot和Vue的编程学习系统
vue.js·spring boot·学习