介绍

您有没有想过网站如何根据您的喜好在浅色和深色模式之间无缝切换？这不是魔法，而是现代网络技术的巧妙运用。在这篇文章中，我将揭示检测用户是否喜欢深色模式背后的简单而强大的技术，以及如何使用此信息来增强网站上的用户体验。

了解暗模式检测

随着深色模式的流行，许多网站和应用程序现在都提供符合用户系统偏好的主题。此功能是使用 JavaScript 中的 matchMedia API 实现的，它允许 Web 应用程序响应媒体查询的变化，例如用户的配色方案首选项。

它是如何运作的

matchMedia API

window.matchMedia 方法提供了一种评估媒体查询并根据用户偏好调整网站外观的方法。要检查是否启用了暗模式，您可以使用以下 JavaScript 函数：

// Check if the user prefers dark mode
function isDarkMode() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

实际实施

index.html

    
    



    
Hello, World!

    
    

• updateTheme 功能：此函数检查深色模式首选项并相应更新类。 实时更新：向matchMedia添加事件监听器，以检测配色方案首选项的变化并调用更新主题以实时调整外观。

当您更改系统的配色方案时，网站将自动适应您的偏好，无需刷新页面。

在 GitHub 上关注我 Avinash Tare