边缘暗模式介绍

边缘暗模式是一种视觉效果，将页面的边缘以及顶部/底部的工具栏背景色改为暗色。这种模式可以给用户一个更加专业、时尚、舒适的感觉。

实现方式

实现边缘暗模式需要将页面的CSS样式表进行修改。以下是示例代码：

body {
  background-color: #000;
  color: #fff;
}

header, footer {
  background-color: #222;
  color: #fff;
}

上面的代码将页面的背景色改为黑色(#000)，字体颜色改为白色(#fff)。同时，将页头(header)和页脚(footer)的背景色改为深灰色(#222)。

适用场景

边缘暗模式适用于需要强调内容的页面，例如设计作品集、科技产品的介绍页面等。另外，对于夜间使用的应用程序，也可以使用边缘暗模式来提高用户体验。

使用方法

用户可以在设置中进行边缘暗模式的开启或关闭。在JavaScript中，可以通过以下代码实现：

if (localStorage.darkMode === 'true') {
  document.body.classList.add('dark-mode');
}

以上代码会在localStorage中读取一个名为darkMode的变量，如果变量值为true，则将body元素添加一个名为dark-mode的类。接下来，在CSS样式表中添加以下代码：

.dark-mode {
  background-color: #000;
  color: #fff;
}

.dark-mode header, .dark-mode footer {
  background-color: #222;
  color: #fff;
}

这样，当localStorage中的darkMode变量为true时，页面的背景色和字体颜色将会被改变。

参考链接

• 边缘暗模式：一个新增的应用程序设计趋势
• 如何使用localStorage储存你网站的设置