向网站添加深色模式的最简单方法-js教程-PHP中文网

向网站添加深色模式的最简单方法

WBOY

发布： 2024-07-29 04:46:23

原创

568 人浏览过

The Easiest Way to Add Dark Mode to Your Website

近年来，以深色模式使用网站和应用程序的能力越来越受欢迎。它可以缓解眼睛疲劳，延长 OLED 屏幕设备的电池寿命，并为传统的灯光主题提供美观的替代品。本教程将向您展示如何使用 JavaScript 切换主题和 CSS 变量，以向您的网站添加暗模式。

第 1 步：设置 HTML

首先，让我们从基本的 HTML 结构开始。创建一个包含以下内容的 index.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to Dark Mode Tutorial</h1>
        <button id="theme-toggle">Toggle Dark Mode</button>
    </header>
    <main>
        <p>This is a sample website to demonstrate dark mode implementation.</p>
    </main>
    <script src="script.js"></script>
</body>
</html>

登录后复制

此 HTML 文件包含一个带有标题的标头和一个用于切换暗模式的按钮、一个包含一些文本的主要内容区域以及指向我们的 CSS 和 JavaScript 文件的链接。

第 2 步：定义 CSS 变量

现在让我们在 CSS 中定义变量。制作一个包含以下内容的 styles.css 文件：

:root {
    --background-color: #ffffff;
    --text-color: #000000;
    --header-background-color: #f1f1f1;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

header {
    background-color: var(--header-background-color);
    padding: 20px;
    text-align: center;
}

button {
    padding: 10px 20px;
    margin-top: 20px;
    cursor: pointer;
}

.dark-mode {
    --background-color: #181818;
    --text-color: #ffffff;
    --header-background-color: #242424;
}

登录后复制

我们使用 :root 在此 CSS 文件中定义一组 CSS 变量。对于浅色模式，这些变量确定背景颜色、文本颜色和标题背景颜色。此外，还定义了 .dark-mode 类，其设置优先于这些变量。 body 元素的过渡属性保证了主题之间的无缝过渡。

第 3 步：添加用于主题切换的 JavaScript

现在，让我们添加 JavaScript 来处理主题切换。创建一个包含以下内容的 script.js 文件：

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

// Check for saved user preference
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
    body.classList.add(savedTheme);
}

// Toggle dark mode
themeToggle.addEventListener('click', () => {
    body.classList.toggle('dark-mode');

    // Save user preference
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark-mode');
    } else {
        localStorage.removeItem('theme');
    }
});

登录后复制

此脚本选择主题切换按钮和主体元素。单击该按钮时，它会切换主体上的 深色模式 类。该脚本还将用户的主题首选项保存在 localStorage 中，因此主题在页面重新加载时仍然存在。