【博客重构之路】网站黑暗模式优化技巧与实践

sockstack / 1020 / 2023-08-03 20:56:33

博客重构之路

<p><span style="color: red; font-size: 18px">ChatGPT 可用网址，仅供交流学习使用，如对您有所帮助，请收藏并推荐给需要的朋友。</span><br><a href="https://ckai.xyz/?sockstack&section=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.创建一个可以与之交互的 <button> 元素以手动更改主题颜色**

```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');
        }
    }
});
```

此脚本根据以前的首选项更改按钮内的图标，并通过使用本地存储设置暗模式首选项以及从主 <html> 标记中添加或删除 dark 类来处理单击事件。

**4.在所使用的 class 类加上前缀 dark:**

```html
<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Dark mode</h1>
  <p class="text-gray-600 dark:text-gray-300">
    hello world!!!
  </p>
</div>
```

### 总结

在 **tailwindcss** 中，实现暗黑模式比较简单的，在 **html** 标签中加入 **dark** 的类即可实现黑暗模式，这样在开发中减少适配两套 css 样式的时间。

【博客重构之路】网站黑暗模式优化技巧与实践

作者

sockstack

许可协议

CC BY 4.0

发布于

2023-08-03

修改于

2024-12-21

上一篇：半天实现的NextJS轮子项目下一篇：【博客重构之路】webman-admin安装指南

尚未登录

【博客重构之路】网站黑暗模式优化技巧与实践

文章分类

博客重构之路

Spring Boot简单入门

k8s 入门教程

MySQL 知识

NSQ 消息队列

ThinkPHP5 源码分析

使用 Docker 从零开始搭建私人代码仓库

日常开发汇总

标签列表

springboot

hyperf

swoole

webman

php

多线程

数据结构

docker

k8s

thinkphp

mysql

tailwindcss

flowbite

css

前端