将网站切换到暗黑模式的 3 个超级简单的方法

正如臭名昭著的达斯·维达曾经说过的那样：“你不知道黑暗面的力量。” 2019年，黑暗模式席卷了我们的应用程序，维达也得到了应有的惩罚，而这股热潮至今仍未见顶。从Instagram到YouTube，我们钟爱的应用程序纷纷加入这股潮流，西斯的胜利指日可待。

什么是黑暗模式？

对于那些喜欢技术术语的人来说，维基百科将暗模式定义为“在深色背景上使用浅色文本、图标和图形用户界面元素的配色方案”。

简而言之，黑暗模式正如其名：为你的应用提供一个更暗的主题界面。然而，它的意义远不止于哥特式的设定。

“准备好了，你准备好了”，让我们来看看为网站实现暗模式的三种简单方法。

在深入探讨细节之前，务必检查操作系统的参数。例如，某些 Android 版本的 Whatsapp 允许用户切换到夜间模式，而 iOS 设备上的应用默认设置是暗黑模式。在添加暗黑主题的代码之前，应该考虑到这一点。以下是实现暗黑主题的 CSS 和 Js 代码。

	/* Light mode */
	@media (prefers-color-scheme: light) {
	body {
	background-color: #fff;
	color: black;
	}
	}
	/* Dark mode */
	@media (prefers-color-scheme: dark) {
	body {
	background-color: #000;
	color: white;
	}
	}

	/* Light mode */
	@media (prefers-color-scheme: light) {
	body {
	background-color: #fff;
	color: black;
	}
	}
	/* Dark mode */
	@media (prefers-color-scheme: dark) {
	body {
	background-color: #000;
	color: white;
	}
	}


	if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
	// dark mode
	}


	if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
	// dark mode
	}

在这个追求便利的时代，完全启用暗黑模式可能并不适合您网站的用户。使用一个与时间同步的主题，您的网站将焕然一新。这样，早起的鸟儿得到了照顾，夜猫子也得到了照顾！保持这种自然平衡才是明智之举。

	function returnThemeBasedOnTime(){
	const date = new Date()
	const hour = date.getHours()
	if (hour < 5 \|\| hour > 20) return 'dark'
	else return 'light'
	}

	function returnThemeBasedOnTime(){
	const date = new Date()
	const hour = date.getHours()
	if (hour < 5 \|\| hour > 20) return 'dark'
	else return 'light'
	}

俗话说，“情人眼里出西施”。并非所有人都能适应深色主题，如果您启用在两种主题之间切换的选项，将对您有所帮助。想象一下，一位远视的叔叔在夜间模式下浏览您的网站，会是怎样的困境。

我们都曾面临过这种情况。

打开在旧版本中创建和修改的附件时，会出现令人困扰的兼容性问题。上述代码也存在同样的问题，因为它可能无法在某些版本或不同的浏览器中运行。为了帮助您解决问题，下表概述了这方面的问题。

黑暗模式将会继续存在，至少在绝地武士以新格式崛起之前。

以上三种方法绝对可以提升您网站的吸引力。如果您想了解更多关于夜间模式及相关主题的信息，这里有一些链接供您参考！

在那之前，愿原力与你同在！🖖