近年来，我发现深色操作系统 UI 的受欢迎程度不断上升，这背后有许多原因。

深色系操作系统 UI 近年来受到开发者和用户的青睐。对于开发者而言，深色模式能提高代码的可读性，减少长时间编程时的眼睛疲劳，同时也能提升界面的美观度。而对于用户来说，深色 UI 提供了一种独特的视觉体验，尤其在低光环境中使用时更显舒适。

今天，我想分享一些我认为出色的深色操作系统 UI！

本文图片内容来自网络，版权属于原作者

优点

• • 减轻视觉疲劳：在低光环境中，深色模式能有效减少眼睛压力。

• • 时尚美观：深色界面通常更显高级感，提升用户体验。

• • 电量节省：在 OLED 屏幕上，深色模式能降低电量消耗。

• • 增强对比度：使文本和重要元素更加突出，提高可读性。

• • 灵活性：许多应用和系统支持切换，用户可根据环境和个人喜好调整。

网页系统暗色模式的 W3C 新标准：prefers-color-scheme

近年来，随着各大主流操作系统对暗色模式的重视，用户在低光环境下的阅读体验得到了显著改善。从 iOS 13 和 macOS Mojave 开始，除了 Linux 外，几乎所有主流操作系统都实现了系统层级的暗色模式。尽管 Linux 由于桌面环境和窗口管理器多样化，目前尚未形成统一标准，但用户依然可以通过暗色 GTK+ 主题和浏览器插件等方法，体验“伪全局”的暗色模式。

有了系统层面的适配，浏览器能够读取暗色模式的设置，从而实现网页的自适应。这便是 W3C 在 2020 年 7 月 31 日发布的 Media Queries Level 5 标准草案中引入的新属性 prefers-color-scheme。

什么是 prefers-color-scheme？

prefers-color-scheme 允许网页通过条件规则来获取用户操作系统的暗色模式状态，并应用相应的样式。具体来说，这意味着网页可以轻松地实现适应不同主题的效果：如果用户的系统处于暗色模式，网页也将呈现暗色风格；反之则为亮色模式。

如何使用 prefers-color-scheme？
根据 MDN 的描述，prefers-color-scheme 有两个主要值：

• • light：表示用户的系统使用亮色主题，这是默认值。当浏览器的隐私设置为 privacy.resistFingerprinting 为 true 时，也将返回此值。

• • dark：表示用户的系统使用暗色主题。

此外，还有一个已废弃的值 no-preference，表示浏览器不确定用户的主题偏好，常在较旧版本的浏览器或系统不支持暗色模式时返回。

通过以下 CSS 代码，开发者可以为不同模式定义样式：

//css
@media (prefers-color-scheme: dark) {
    /* 暗色模式样式 */
}

@media not (prefers-color-scheme: dark) {
    /* 亮色模式样式 */
}

使用 JavaScript 处理 prefers-color-scheme

仅依靠 CSS 条件规则可能无法满足所有需求，因此可以通过 JavaScript 的 matchMedia 方法获取系统的暗色模式状态：

//javascript
if (window.matchMedia('prefers-color-scheme: dark').matches) {
    // 系统处于暗色模式，执行相关操作
} else {
    // 系统处于亮色模式，执行相关操作
}

此外，我们还可以监听系统主题的变化，以便在用户切换暗色模式时作出相应反应：

window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
    if (e.matches) {
        // 系统开启暗色模式后执行的操作
    } else {
        // 系统关闭暗色模式后执行的操作
    }
});

通过这些新规范，网页设计师和开发者可以更灵活地应对用户的视觉需求，提升整体的用户体验。

写在最后（私活源码）

今天给大家分享一套基于Springboot+Vue的仓库管理系统源码，在实际项目中可以直接复用。(免费提供，文末自取)

一、系统运行图（设计报告和接口文档）

1、登陆页面

2、物品信息管理

3、设计报告包含接口文档

二、系统搭建视频教程

源码免费领取方式

扫码关注本号，回复 仓库

扫码关注本号，回复 仓库 

持续关注，有更多私活源码免费分享