Open main menu
首页
专栏
课程
分类
归档
Chat
Sci-Hub
谷歌学术
Libgen
GitHub镜像
登录/注册
搜索
搜索
关闭
Previous
Previous
Next
Next
【博客重构之路】网站黑暗模式优化技巧与实践
sockstack
/
982
/
2023-08-03 20:56:33
博客重构之路
<p><span style="color: red; font-size: 18px">ChatGPT 可用网址,仅供交流学习使用,如对您有所帮助,请收藏并推荐给需要的朋友。</span><br><a href="https://ckai.xyz/?sockstack§ion=detail" target="__blank">https://ckai.xyz</a><br><br></p> ### 背景 大家在浏览网页的时候经常见到部分网站是支持黑暗模式的,但是实现暗黑模式和普通样式的话,需要写两套,整体的编码工作量就会变的很大,所以很多网站都没有实现这样的功能,本篇文章通过一种比较简单的方式给大家讲解一下如何通过**tailwindcss**快速实现。 ### Tailwindcss 介绍 Tailwind CSS是一款颠覆性的前端开发工具,通过一系列直观的类名,让样式设计变得高效而简单。本文将深入介绍Tailwind CSS的核心特性,包括响应式布局、样式组合、实用工具等。无需繁琐的手写CSS,您将了解如何利用Tailwind CSS快速构建现代化且响应式的界面。无论您是前端新手还是经验丰富的开发者,都将在本文中找到提升工作效率和样式设计的方法。让我们一起探索Tailwind CSS,开启高效前端开发的全新篇章! ### 实现 #### 启用深色模式 要为 Tailwind CSS 项目和 Flowbite 组件启用暗模式,您需要做的就是在 tailwind.config.js 文件中添加以下代码,然后在 html 元素上添加 dark 类。 ```javascript // tailwind.config.js module.exports = { darkMode: 'class', // ... } ``` #### 暗模式切换 **1.通过检查 HTML <head>标记中的用户首选项来切换深色模式:** ```javascript ``` 这将首先检查您之前是否使用本地存储手动设置了主题颜色首选项,它将根据您的浏览器配色方案首选项设置深色或浅色模式。 **2.创建一个可以与之交互的
元素以手动更改主题颜色** ```html ``` 在此示例中,我们使用了一个 <button> 组件,在该组件中,我们根据当前的配色方案更改内部的图标 **3.在<button> 元素上的单击事件** ```javascript var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon'); var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon'); // Change the icons inside the button based on previous settings if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { themeToggleLightIcon.classList.remove('hidden'); } else { themeToggleDarkIcon.classList.remove('hidden'); } var themeToggleBtn = document.getElementById('theme-toggle'); themeToggleBtn.addEventListener('click', function() { // toggle icons inside button themeToggleDarkIcon.classList.toggle('hidden'); themeToggleLightIcon.classList.toggle('hidden'); // if set via local storage previously if (localStorage.getItem('color-theme')) { if (localStorage.getItem('color-theme') === 'light') { document.documentElement.classList.add('dark'); localStorage.setItem('color-theme', 'dark'); } else { document.documentElement.classList.remove('dark'); localStorage.setItem('color-theme', 'light'); } // if NOT set via local storage previously } else { if (document.documentElement.classList.contains('dark')) { document.documentElement.classList.remove('dark'); localStorage.setItem('color-theme', 'light'); } else { document.documentElement.classList.add('dark'); localStorage.setItem('color-theme', 'dark'); } } }); ``` 此脚本根据以前的首选项更改按钮内的图标,并通过使用本地存储设置暗模式首选项以及从主 标记中添加或删除 dark 类来处理单击事件。 **4.在所使用的 class 类加上前缀 dark:** ```html
Dark mode
hello world!!!
``` ### 总结 在 **tailwindcss** 中,实现暗黑模式比较简单的,在 **html** 标签中加入 **dark** 的类即可实现黑暗模式,这样在开发中减少适配两套 css 样式的时间。
【博客重构之路】网站黑暗模式优化技巧与实践
作者
sockstack
许可协议
CC BY 4.0
发布于
2023-08-03
修改于
2024-12-03
上一篇:百度快速收录
下一篇:【博客重构之路】webman-admin安装指南
尚未登录
登录 / 注册
文章分类
博客重构之路
5
Spring Boot简单入门
4
k8s 入门教程
0
MySQL 知识
1
NSQ 消息队列
0
ThinkPHP5 源码分析
5
使用 Docker 从零开始搭建私人代码仓库
3
日常开发汇总
3
标签列表
springboot
hyperf
swoole
webman
php
多线程
数据结构
docker
k8s
thinkphp
mysql
tailwindcss
flowbite
css
前端