- 综合排序
- 最热优先
- 最新优先
- 来自专栏西里网CSDN博客
Meta 暗色模式适配
参考资料 Meta视口（Viewport）是HTML中用于控制网页在移动设备上显示方式的标签 meta搜索引擎索引规则 Meta Twitter 卡片 Meta作者与版权信息 Meta 暗色模式适配 meta iOS设备优化是一个用于提升iOS设备性能的库 Open Graph协议是由Facebook推出的元数据协议 Meta 内容语言声明 Meta 暗色模式适配 简介 Meta 暗色模式适配是指在网页或应用中实现与 功能 自动检测用户系统偏好(暗色/亮色模式) 提供手动切换暗色/亮色模式的功能 保持与 Meta 平台一致的视觉风格 减少夜间屏幕眩光 用法 HTML 部分 <meta name CSS 部分 :root { color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { /* 暗色模式下的变量定义 考虑保留用户的选择偏好(使用 localStorage) 避免纯黑色背景(#000000)，使用深灰色更舒适 注意表单控件和滚动条等系统组件的适配 渐进增强：确保基础功能在不支持暗色模式的浏览器中仍可用
28210编辑于 2025-05-15 - 来自专栏闲花手札
Matery主题添加暗色模式
(localStorage.getItem("dark") === "1") { document.body.classList.add("dark") } else { /*定时开启暗色模式 $("#nightMode").removeClass("fa-moon-o").addClass("fa-lightbulb"); return } }; 引入CSS暗色文件 创建css文件并引入 /*暗色模式按钮样式*/ #sma { box-shadow: #aaa 2px 5px 10px; background: #000; width: 38px important } /*图片滤镜*/ body.dark img, body.dark strong { filter: brightness(.7) } /*统计图表暗色样式*/ body.dark <body> 标签添加 class="dark" 添加暗色模式时可依据 body.dark 类名 用CSS选择器来给含有dark 的 <body> 下的类添加属性 /*给暗黑模式下的.test添加字体颜色变红样式
80520发布于 2021-08-24 - 来自专栏Android知识点总结
FlutterUnit 已上架 iOS，暗色模式全面支持
FlutterUnitWin.zip 免安装，解压即用 MacOS FlutterUnitMac.zip 免安装，解压即用 Web toly1994328.gitee.io/flutter_web 直接访问 ---- 二、暗色模式全平台支持
73650编辑于 2023-09-01 - 来自专栏静Design
一键切换亮色模式和暗色模式，用Figma搞定！
静电说：在本文中，我们将使用Figma来创建一个可以一键切换亮色模式和暗色模式设计的系统，非常简单快捷。同时，我们也可以在本文中学习到亮色模式和暗色模式在设计过程中的区别。本文来自Pixsellz。 请注意：可以将系统颜色作为背景，但例如按钮，标签等颜色应该从亮色或者暗色模式的“常量样式”中调用。 2. 效果样式 效果样式是应用于设计系统中某些组件的微小更改和效果。 阴影效果可以在亮色模式下轻松被看到，它使元素具有3D外观，使按钮浮在屏幕上。您可以在暗色模式下使用相同的效果，但是由于阴影颜色已经很暗，除非更改背景颜色，否则用户可能很难看到该效果。 OK，激动人心的时刻来了，如果我们已经完整创建了所有上文的效果，那么只需要使用插件简单设置一下，就可以一键在亮色模式和暗色模式之间转换。 如何在亮色模式和暗色模式之间切换 设置好设计系统后，就可以轻松地将组件和模块切换为暗色模式了。为此，您将需要一个名为Appearance的插件，该插件可以在Figma社区找到。
22.5K11发布于 2021-03-12 - 来自专栏Android进阶
Android Q暗色模式适配踩坑—状态栏
暗色模式已经不是什么新鲜玩意了，大家最近看到关于暗色模式最多的内容可能就是iOS版本微信未适配暗色模式面临被AppStore下架的风险。 然后今天早上一醒来，发现Android的微信也黑了（因为我手机一直用的暗色模式），然后最近也遇到了一个暗色模式适配的一个坑，就拿出来讲一讲。 适配暗色模式 在开始之前还是提一下，暗色模式的一个适配方式。 如果仅需某个View适配暗色模式，直接在view属性声明即可。 遇到的bug 暗色模式下，状态栏没有反色，导致看不清。 ?
2.2K10发布于 2020-04-13 - 来自专栏Mintimate's Blog
网站如何适配暗色模式并实现手动、自动切换
适配逻辑 本次适配的适配暗色/亮色模式的用户操作逻辑分两种情况：存在暗色模式标识符、不存在暗色模式标识符。 不存在暗色模式标识符 用户进入网站，若之前没有手动点击网站上切换暗色/亮色按钮（不存在暗色模式标识符），则使用媒体查询检测用户是否有开启暗色模式，同步系统配色。 存在暗色模式标识符 若用户之前有点击过切换暗色/亮色按钮，查询Cookies或localStorage内暗色模式标识符来展示暗色/亮色配色，优先级高于媒体查询和时间判断。 background-color: #e45353a1; border-color: #e45353a1; } 以此类推，根据自己亮色模式下的样式，适配暗色模式即可。 ，是否需要启用暗色模式 else if (Mode == null || Mode == "undefined" || Mode == "") { // 媒体查询，用户系统是否启动暗色模式
10.7K160发布于 2021-02-01 开源 Typecho 后端美化主题 BooAdmin 正式支持暗色模式
BooAdmin暗色模式：看得舒服，用得安心BooAdmin已完整支持暗色模式，并且默认自动跟随浏览器/系统的亮色或暗色偏好切换。你不需要折腾配置，打开后台就能获得一致、清晰、护眼的管理体验。 暗色模式不只是“变黑”BooAdmin的暗色模式不是简单反色，而是基于语义化主题令牌重构，覆盖表格、卡片、列表、内容区等核心后台模块，在长时间管理和夜间使用场景下更稳定、更舒适。 我们的美学思考克制而清晰：优先信息可读性，不用花哨效果干扰管理任务一致而可感知：亮色与暗色在结构、节奏、层级上保持一致，不让用户重新学习现代但不激进：在保持Typecho后台工作流稳定的前提下，提升视觉品质设计服务效率 ：每一次颜色、间距、对比度调整，都为更快地完成管理操作服务一句话总结BooAdmin=真开源、可回滚、不强制联网、无隐藏收费+完整暗色模式体验。
16920编辑于 2026-03-23- 来自专栏WELSIM
WELSIM发布2026R2版本，增加暗色外观模式
相对于上一个版本，2026R2版本对基础框架进行了重大升级，同时新增的暗色外观模式，图形化界面变得更加友好。增加暗色外观主题新增的暗色外观主题符合现代桌面软件的趋势，对用户的眼睛与视力更加友好。 用户可以在首选项中，设置外观主题，目前有经典，暗色和亮色三个主题可供选择。经典和亮色主题相似，暗色主题以深色为背景，亮色为前端文字和图标。从此版本开始，暗色主题是WELSIM的默认外观。
12010编辑于 2026-04-04 - 来自专栏刘悦的技术博客
利用CSS3自定义属性来为网站添加“暗黑模式”(暗色模式DarkMode)
究竟什么是暗黑模式？这个概念起初来源于macOS系统，该系统的mojave版本为用户提供两个主题皮肤，即浅色和深色的皮肤。 自从有了这个概念之后，很多网站和系统都会用户提供了相应的两套肤色，便于用户根据自己的习惯或爱好进行切换 从科学的角度讲，低对比度的暗色可以降低屏幕对视网膜的刺激，同时还可以让电子设备更加省电
1.5K10编辑于 2022-08-08 - 来自专栏信数据得永生
TwentyEleven暗色系主题实现透明
1.找到 /wp-content/themes/twentyeleven/colors/dark.css
44870发布于 2019-02-15 - 来自专栏姓王者的博客
hexo-theme-wang:一个简约的暗色主题
hexo-theme-wang:一个简约的暗色主题 如图,这是我自己写的hexo主题 xingwangzhe/hexo-theme-wang: 一个hexo主题 hexo-theme-wang:一个简约的暗色
35110编辑于 2024-12-20 - 来自专栏walterlv - 吕毅的博客
让 Directory Opus 支持 Windows 10 的暗色主题
由于我自己的 Windows 10 系统使用的是暗色主题，所以我希望 Directory Opus 也能搭配我系统的纯暗色主题。 本文介绍如何将 Directory Opus 打造成搭配 Windows 10 的暗色主题。 Windows 10 暗色风格的主题 你可以直接使用下面的链接下载 Windows 10 暗色风格的主题： Simple Windows 10 Dark Theme - Downloads / Themes 有一些文件的文字其实在暗色主题下看不太清。 这当然是主题设计者没有考虑到所有的情况导致的，实际上你下载的任何一款主题可能都有各种考虑不周的情况，那么如何修复这些考虑不周的细节呢？ 微调文件组标题 在我一开始的暗色主题应用后，我们注意到我的文件是分组的，组标题是深蓝色，看不清。
1.7K50编辑于 2023-10-22 - 来自专栏walterlv - 吕毅的博客
为博客添加可切换的暗色和亮色主题
为博客添加可切换的暗色和亮色主题 发布于 2018-05-19 13:42 更新于 2018-08-12 06:50 不知从什么时候开始，越来越多的小伙伴喜欢在暗色的编辑器中编写代码；于是写博客的小伙伴们也得在博客中顺应这样的潮流，这样才能更接近平时写代码时的环境。 然而——绝大多数的技术类博客或技术文章都是亮色主题的，代码在其中以和谐但不太好看的亮色存在，或者扎眼但熟悉的暗色存在。这始终觉得不那么舒适。 于是，作为博主，我决定考虑添加亮色和暗色两种主题色的支持。 如果原来的背景色是设置到 body 上的，那么我们就通过 .dark-theme 指定一个暗色版的背景色。 如果存在，则使用暗色，否则使用亮色。并且，在切换时设置 cookie。
1.3K10发布于 2018-09-18 - 来自专栏tendcode
博客添加暗色主题切换功能，从主题切换聊聊前后端cookies的使用
经常上 V2EX 的人应该知道，前一段时间该论坛上线了暗色主题切换功能，当天就获得一致好评。 也就是在当天，我给自己的博客 github 上面提交了一个 issue，也就是需要给博客添加一套暗色主题并支持主题切换。但是人都是有拖延症的，这一拖，两个月就过去了，我的主题切换功能才终于上线了。 你看，云顶之奕都元素崛起了，各个英雄都穿上了元素皮肤，我还有什么理由不给自己博客来一套暗色主题呢，其实这才是我更新暗色主题的真正动力，哈哈哈哈…… 主题切换思路 既然要上线主题切换功能，那必然先要搞清楚怎么可以切换主题 提供一份css文件 我的暗色主题色调完全是根据 V2EX 的色调来的，然后在一些地方做了自己的修改而已。 important; } 其他就没有什么特别要强调的，主题样式都是要看自己的感觉，慢慢调试就行了，我的建议是直接在 F12 模式下面调试好样式，然后再写到 css 文件中，而不是写到 css 文件中然后去调试
92710编辑于 2022-09-26 - 来自专栏李洋博客
个人博客网站怎么适配手机端夜间模式或深色模式
也就是说，现在我们可以很简单地实现“暗色模式系统访问的页面是暗色的，亮色模式系统访问的页面是亮色的”。 // 非暗色模式样式 } JavaScript 只使用 CSS 条件规则很难实现某些需求，我们可以对 window 使用 matchMedia 方法得到的 Media 使用 matches 方法来获取系统暗色模式状态 ： if (window.matchMedia('prefers-color-scheme: dark').matches) { // 是暗色模式做什么 } else { // 非暗色模式做什么 } 另外还可以监听系统暗色模式的状态，在系统开关暗色模式时作出反应： window.matchMedia('(prefers-color-scheme: dark)').addListener(e => { if (e.matches) { // 系统开启暗色模式后做什么 } else { // 系统关闭暗色模式后做什么 } }); 其实 prefers-color-scheme
1.3K20编辑于 2022-09-23 - 来自专栏互联网+
浅谈网页暗模式的实现
我们浏览网页时，经常会发现许多网页都支持两种主题模式，一种是正常模式，一种是夜间模式，夜间模式也就是我们所说的暗色模式，也可以说是深色模式或者灰色模式。今天我们就来探讨如何让网页实现暗色模式。 其实想要实现网页暗色模式，我们只需要使用CSS中的“prefers-color-scheme”属性来完成设置即可。 prefers-color-scheme属性简介： prefers-color-scheme是CSS媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。 dark表示用户已告知系统他们选择使用暗色主题的界面。 其实，我们只需要用prefers-color-scheme的dark属性值即可，具体源码如下： 普通模式演示 暗色模式演示 最后，我们只需要把PC端的浏览器设置为灰色主题（夜间模式）即可体现效果，
94430编辑于 2022-12-13 - 来自专栏腾讯位置服务
地图SDK全新版本v4.3.0上线 - 新增多项功能及优化
本次升级核心内容：地图SDK开发组件上线，包含小车平滑移动、点聚合，内置墨渊模板适配暗色模式，动态路名功能，欢迎各位开发者提出意见。 内置暗色模式模板 在iOS13暗色模式下，很多应用的背景都会变成纯黑色，但对于大部分我们自己开发的App，就需要开发者自行适配暗色模式。 为解决普通地图样式和暗色UI不匹配的问题，腾讯地图SDK使用个性化地图能力，在其中内置了一套暗色地图模板，无需官网配置用户可通过接口一键切换，满足需求。 ? 同时针对微信小程序的开发者，腾讯位置服务通过小程序开发者工具为您提供了个性化地图服务，满足适配暗色模式的需要。 您只需注册开发者后在个性化地图中选择墨渊样式并填写小程序的App ID，即可把暗色地图运用到小程序之中。具体使用可参照小程序个性化地图使用指南 ? ?
90010发布于 2019-12-03 - 来自专栏CSDNToQQCode
鸿蒙PC UI控件库 - 品牌标识系统详解
borderColorDark: '#4A4A4A', // 暗色模式边框颜色 backgroundColorDark: '#1C1C1E' // 暗色模式背景颜色 }) 配置方式三 ：获取主题颜色（支持暗色模式） import { BrandTheme } from '.. BRAND_BORDER_COLOR_DARK string '#4A4A4A' 暗色模式边框颜色 BRAND_BACKGROUND_COLOR_DARK string '#1C1C1E' 暗色模式背景颜色 支持暗色模式 如果你的应用支持暗色模式，记得配置暗色模式的颜色： BrandTheme.setConfig({ textColor: '#FF3B30', // 浅色模式 textColorDark ：完整的暗色模式配置 在下一篇文章中，我们将介绍控件库的第一个实际控件：PrimaryButton（主要按钮），敬请期待！
23110编辑于 2025-12-16 - 来自专栏搜狗测试
互联网移动端即将进入“暗黑时代”
2019-移动端将开启“暗黑时代” 2019-6-3 苹果全球开发者大会 iOS 13发布 - 新增暗黑模式 2019-5-7 Google I/O 2019 Android Q发布 - 推出暗色模式 体验一番之后，小编发现，iOS这个版本在UI上最大的变化是增加了暗黑模式，回到两个月前，Android Q的测试版本中也重点推出了暗色模式。 现在大多数的手机都是OLED屏幕，暗色的模式对OLED屏幕有非常大的省电作用。 Android Q beta 3中的暗黑模式（设备: Pixel 2） 根据小编近期使用Android Q和iOS 13的感受来看，iOS的暗黑模式比Android的暗色模式做的更出色一些，尤其是在本机 Android Q Android Q beta 1& beta 2 可以通过ADB命令进入暗色模式，命令执行后，重启Pixel就可以体验暗色模式了。
1.8K20发布于 2019-06-12 纯前端实现星空背景效果：代码解析与展示
代码拆分于个人官网 实现特点 双重视觉效果：Canvas 星空动画 + 动态背景渐变 主题自适应：亮色 / 暗色模式自动切换 响应式设计：适配各种屏幕尺寸 性能优化：仅在暗色模式下渲染星空动画 ️ 技术实现 prefers-reduced-motion 尊重用户偏好 JavaScript 功能： Canvas 星空动画（普通星星、大星星、彗星） 主题切换与状态保存 窗口大小自适应调整 代码亮点 条件渲染：星空仅在暗色模式下渲染
42110编辑于 2025-10-07
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号