如何使用 CSS 和 JavaScript 將網站切換到深色模式

介紹

深色模式是一種使用深色背景和淺色文字和元素的顯示設定。它之所以受到歡迎，是因為它看起來不錯並且具有多種實際好處。

深色模式的好處包括：

1. 減少眼睛疲勞：黑暗模式可以減少眼睛發出的強光，特別是在弱光環境中。
2. 延長OLED 螢幕的電池壽命：在OLED（有機發光二極管）螢幕上，深色模式可以節省電池壽命，因為黑色像素基本上被關閉，與顯示明亮的顏色相比，消耗的電量更少。

在本教學中，我們將介紹如何使用 CSS 和 JavaScript 將您的網站切換到深色模式。我們將從一個簡單的淺色主題網頁模板開始，將其改造成一個可切換淺色/深色模式的網站，讓用戶可以在淺色和深色主題之間順利切換。

設定項目

讓我們從一個簡單的淺色主題網頁範本開始。然後，我們將其改造成一個可切換明暗模式的網站，讓使用者在明暗主題之間切換。

實現深色模式樣式

選擇顏色

第一步是列出我們正在使用的所有顏色，並為每種顏色選擇一個深色主題版本。在下表中，我列出了頁面上的所有顏色及其對應的深色版本。

Name	Light version	Dark version
body-bg	#f4f4f4	#121212
primary-text	#333333	#e0e0e0
header-footer-bg	#333333	#181818
header-footer-text	#ffffff	#ffffff
section-bg	#ffffff	#1f1f1f
secondary-text	#006baf	#1e90ff
shadow	rgba(0, 0, 0, 0.1)	rgba(0, 0, 0, 0.2)

自定义变量

然后我们使用 CSS 变量在 body 上使用这些变量创建一个深色和浅色类。

body.dark {
    --body-bg: #121212;
    --primary-text: #e0e0e0;
    --header-footer-bg: #1f1f1f;
    --header-footer-text: #ffffff;
    --section-bg: #1f1f1f;
    --secondary-text: #1e90ff;
    --shadow: rgba(0, 0, 0, 0.2);
}

body.light {
    --body-bg: #f4f4f4;
    --primary-text: #333333;
    --header-footer-bg: #333333;
    --header-footer-text: #ffffff;
    --section-bg: #ffffff;
    --secondary-text: #006baf;
    --shadow: rgba(0, 0, 0, 0.1);
}

您可以在使用 CSS 自定义属性中阅读有关 CSS 变量的内容。本质上，它们是使用两个破折号 (--) 定义的实体，用于存储值以便在文档中重用。 CSS 变量允许自动更新更改，从而使维护变得更加容易。

动态元素颜色

我们使用 var() CSS 函数插入 CSS 变量的值。这样，我们就可以动态更改颜色并更新一个变量以反映整个文档的更改，而不是手动更改每个变量。

这是 nav 元素及其子元素的示例：

body {
  background-color: var(--body-bg);
  color: var(--primary-text);
}

header, footer {
  background-color: var(--header-footer-bg);
  color: var(--header-footer-text);
}

article {
  background-color: var(--section-bg);
  box-shadow: 0 4px 8px var(--shadow);
}

a {
  color: var(--secondary-text);
}

使用 JavaScript 切换亮/暗模式

现在我们可以将主体的类别更改为深色或浅色来切换主题。首先，在标题中添加一个按钮，并为其点击事件设置changeTheme()函数：

<button onclick="changeTheme()" class="theme-toggle">
    <svg> <!-- icon --> </svg>
</button>

定义切换主体类的changeTheme()函数：

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }
}

现在用户可以通过单击按钮来更改网站的主题。

您可以在下面的CodePen中看到教程的代码

下一步

此外，您可以将用户的主题偏好存储在本地存储中。更新 changeTheme() 函数以保存选定的主题并在页面加载时检查它，这将确保用户的选择被记住并在下次访问时自动应用。

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }

    // Save the current theme in localStorage
    const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
    localStorage.setItem('theme', theme);
}

document.addEventListener('DOMContentLoaded', function () {
    // Get the saved theme from localStorage when the page loads
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.body.classList.add(savedTheme);
});

添加配色方案：深色；深色主题中的属性还可以确保某些难以设置样式的元素的样式将被浏览器更改。

body.dark {
  color-scheme: dark;
}

结论

总而言之，在您的网站中添加深色模式可以通过减少眼睛疲劳并延长 OLED 屏幕的电池寿命来改善用户体验。通过遵循本指南，您可以使用 CSS 和 JavaScript 轻松设置亮/暗模式切换。自定义深色模式以适合您的设计。

分享您的实现或在下面的评论中提出问题。

以上是如何使用 CSS 和 JavaScript 將網站切換到深色模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！