后端开发教程 - Java、Spring Boot 实战 - msg200.com
根据用户系统设置将您的 Web 应用设置为暗/亮模式
我们都知道黑暗模式是 2019 年最热门的功能之一。从智能手机、笔记本电脑到应用程序，现在都内置了黑暗模式。
它有很多优点。对于在弱光环境下长时间使用笔记本电脑的用户来说，它无疑是最佳选择。
通过关闭黑色像素，它还可以为使用 OLED 屏幕的较新设备节省大量电池电量。
但是，始终选择轻度模式真的是最佳选择吗？让我们拭目以待。
黑暗模式也有一些缺点。
在光线充足的情况下使用暗黑模式会像在弱光环境下使用过多灯光一样，导致眼睛疲劳。在明亮的环境中，眼睛很难聚焦在对比度较低的黑暗背景中的内容。因此，大多数用户会根据周围环境在设备的暗黑模式和亮黑模式之间切换。
如果我们作为开发者，可以根据设备设置来设置 Web 应用的主题，从而减少切换应用的额外步骤，那会怎样？这可能吗？
嗯，有办法。
什么是 Window.matchMedia()？
Windows.matchMedia() 是一种返回对象的方法，该对象确定文档是否与媒体查询字符串匹配。
就像我们在 CSS 中使用 @media 一样，您可以在 javascript 中检测相同的媒体查询。
例如，如果我们在 CSS 中有以下媒体查询
@media screen and (max-width:700px){
}
JavaScript 等效代码如下：
const mw = window.matchMedia("screen and (max-width:700px)")
使用 matchMedia() 检测系统主题
考虑一个简单的 React 组件，其中写有 Hello World 文本。
function App() {
return (
<div>
Hello World
</div>
);
}
export default App;
为了将暗黑模式添加到组件，我们使用了 CSS 媒体特性 prefers-color-scheme。它可以检测系统处于暗黑主题还是亮黑主题。
prefers-color-scheme 的 matches 属性是一个根据查询更新的布尔值。
因此，为了检查系统偏好设置，我们添加了 isDark 变量来检测系统是否使用暗模式。
function App() {
const isDark = window.matchMedia("(prefers-color-scheme:dark)").matches
const lightTheme = {
backgroundColor : "white",
color : "black"
}
const darkTheme = {
backgroundColor : "black",
color : "white"
}
return (
<div style={isDark?darkTheme:lightTheme}>
Hello World
</div>
);
}
export default App;
根据 isDark 变量值，darkTheme 或 lightTheme 样式适用于该组件。
在应用程序内切换主题的选项
如果用户想要在主题之间切换，我们还可以在应用程序内添加一个切换按钮。
为此，我们创建一个状态变量并使用系统主题设置对其进行初始化。
每次用户单击按钮时，状态变量都会相应切换。
import { useState } from 'react';
function App() {
const isSystemDark = window.matchMedia("(prefers-color-scheme: dark)").matches
const [isDark,setIsDark] = useState(isSystemDark)
const lightTheme = {
backgroundColor : "white",
color : "black"
}
const darkTheme = {
backgroundColor : "black",
color : "white"
}
return (
<div style={isDark?darkTheme:lightTheme}>
Hello World
<button onClick={()=>setIsDark(toggle =>!toggle)}>Switch Theme</button>
</div>
);
}
export default App;