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

sockstack / 525 / 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-04-27

上一篇：百度快速收录下一篇：【博客重构之路】webman-admin安装指南

尚未登录

文章分类

标签列表

springboot hyperf swoole webman php 多线程数据结构 docker k8s thinkphp mysql tailwindcss flowbite css 前端