首页 > 文章 > web前端 > 如何在 Web 应用程序中实现深色/浅色主题

如何在 Web 应用程序中实现深色/浅色主题

王林原创: 2024-07-19 14:22:08902浏览

您是否曾经在网站上的深色和浅色主题之间切换并想过“我希望我的网站也能做到这一点”？嗯，现在可以了。在本文中，我将向您展示如何使用 HTML、CSS 和 JavaScript 在 Web 项目中实现深色和浅色模式，为您的用户提供最佳的视觉体验。

先决条件：要理解本教程，需要对 HTML 和 CSS 有基本的了解。

深色/浅色主题实施

在网站上设置暗模式/亮模式的关键组件是：

网页
主题之间切换的按钮
要切换的主题或颜色
切换主题和按钮文本背后的逻辑。

一个网页

设置您的项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtual Tour App</title>
</head>
<body>
    <div class="hero-sec">
        <div class="col1">
            <h1>Everyday Is a Journey</h1>
            <p>Visit any Location Virtually, Anytime, Anywhere</p>
            <button>Tour</button>
        </div>
        <div class="col2">
            <img src="img.jpg" alt="landscape" width="560px">
        </div>
    </div>
</body>

</html>

纯网页的输出

Web app theming image

切换按钮

添加主题切换按钮很重要。这是触发从浅色模式到深色模式颜色变化的按钮，反之亦然。

    <button id="toggle-button">Dark mode</button>

How to Implement Dark/Light Themes in Your Web Apps

浅色/深色模式主题

这是至关重要的一步，因为这里涉及到两个主题或颜色。我们需要一种方法，用几行代码将不同的样式附加到网页上。我们将使用 CSS 变量进行主题化。如果您对 CSS 变量感到陌生，请阅读我的文章。

第 1 步：
声明浅色主题的样式

:root{
    --bg: #fafaf3;
    --color: #0A0A0A
}
// This is the light theme; the default theme

第 2 步：
声明深色主题的类

.dark{
    --bg: #0A0A0A;
    --color: #ffffff;
}
// This is the class that will be added onclick of the button

注意：变量名必须相同。

这可以在没有变量的情况下仅使用 body 元素来完成。但是，最好使用 CSS 变量，因为许多场合需要更改的不仅仅是背景颜色。一些 Web 应用程序主题需要更改文本颜色、边框颜色、阴影等。因此使用变量可以完全控制所有元素，尤其是在大型应用程序中。

让我们完成网页的样式。确保您的 CSS 链接到 HTML 文件。

:root{
    --bg: #fafaf3;
    --color: #0A0A0A
}
// This is the light theme; the default theme
.dark{
    --bg: #0A0A0A;
    --color: #ffffff;
}
body{
    background: var(--bg);
    color: var(--color);
    font-family: monospace
}
.hero-sec{
    display: flex;
    justify-content: space-evenly;
    color: var(--color);
    margin-top: 48px;
}
.col1{
    margin-top: 6rem;
    height: 40%;
}
h1{
    font-size: 2.5rem;
}
p{
    font-size: 1.3rem;
}
button{
    padding: 1rem 2rem;
    background-color: #3f51b5;
    color: #ffffff;
    border: none;
    cursor: pointer;
}
.hero-sec button{
    font-size: 1.3rem;
}

输出

How to Implement Dark/Light Themes in Your Web Apps

切换主题背后的逻辑

当用户单击切换按钮时，我们预计会发生两件事。

网站的主题或颜色模式应该更改。
按钮上的文字应该改变。

更改主题
操作 DOM（文档对象模型）来获取网页的按钮和正文。
声明一个函数，将“dark”类添加到 body 元素（我们已经在 css 中声明）。
用户单击暗/亮模式按钮后调用该函数。确保您的 JS 链接到您的 HTML。

const toggleBtn = document.getElementById("toggle-button")
const body = document.body

function toggleTheme() {
    body.classList.toggle("dark")
}
toggleBtn.addEventListener('click', toggleTheme);

更改文本
将另一个代码块添加到toggleTheme 函数。此代码仅意味着如果正文包含“dark”类，则将文本切换为“Light mode”，反之亦然。

if (body.classList.contains("dark")) {
        toggleBtn.textContent = "Light Mode";
    } else {
        toggleBtn.textContent = "Dark Mode";
    }

这可以在一行中完成，以获得更清晰的代码。

 toggleBtn.textContent = body.classList.contains("dark")? "Light Mode" : "Dark Mode"

是的，您现在可以切换主题。很酷吧？查看随附的视频以获取完整演示。

dark mode website

综上所述

通过遵循本教程中概述的步骤，您可以为用户提供选择他们喜欢的主题的灵活性，使您的网络应用程序更具吸引力和易于访问。
如果您喜欢我的文章，您可以给我买杯咖啡来支持我的工作

阅读我关于渐进式 Web 应用程序、网络最内部工作原理、CSS 变量、前端开发初学者指南等的其他文章。

请点赞、评论并关注更多网络开发和技术相关文章。快乐编码！！！

以上是如何在 Web 应用程序中实现深色/浅色主题的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css html Object if switch for require using class JS function dom this border background web app

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Preventing Supply Chain Attacks in JavaScript下一篇：WebRTC SFU: the complete Guide.

查看更多