如何将网站调整为暗色模式，并实现手动和自动切换
最编程
2024-03-30 15:13:13
...
文章简介
现在，常见的操作系统，基本都已经适配了暗色/亮色模式，并提供API接口:
-
macOS Mojave 10.14开始提供了外观设置选项，支持设置浅色 / 深色外观。 -
Windows10 1809版开始支持亮色/暗色主题风格。 -
Android 10 (API 级别 29)开始支持深色主题背景（第三方OEM厂商可能有所差异）。 -
iOS13开始全面支持暗色模式。
那么，我们自己的网站如何适配暗色/亮色模式呢？首先说一下最基础的媒体查询，然后带大家了解一下我的适配方案（纯JS、CSS和HTML的前端操作）。
效果图
媒体查询的优缺点
很多文章会介绍你直接使用媒体查询来适配暗色模式；的确高版本的浏览器，可以提供媒体查询功能，使用CSS，加入媒体判断即可：
/\* 常规浅色模式下的网页背景颜色及文本颜色 \*/
body {
background: #fff;
color: #222;
}
/\* 深色模式下的网页背景颜色及文本颜色 \*/
@media (prefers-color-scheme: dark) {
body {
background-color: #222;
color: #ddd;
}
}prefers-color-scheme支持三个值，分别是 :
-
no-preference：无指定 -
light：亮色 -
dark：暗色
这样的好处是适配快，但是坏处也有,主要的体现是无法用户主动切换：
举个例子，有些用户习惯把系统长期设置为暗色模式，访问你网站时，想看清你网站的图片，希望调整成亮色模式，却必须到系统设置内，手动把系统配色调成亮色再刷新网站，体验差。
当时还好，我们有JS，使用JS也可以媒体查询，我们就不需要用CSS来媒体查询系统暗色或亮色配色：
// JS查询是系统是否为暗色配色
matchMedia('(prefers-color-scheme: dark)').matches下文，我们开始给网站适配。
适配逻辑
本次适配的适配暗色/亮色模式的用户操作逻辑分两种情况：存在暗色模式标识符、不存在暗色模式标识符。
暗色标识符：由暗色/亮色按钮调用的JS实现存储在Cookies或localStorage内，用来提示JS展现那种页面配色。
而暗色/亮色的现实主要是，当需要给用户展现网站暗色配色时，在HTML内<body>标签内加入class="night"。
不存在暗色模式标识符
用户进入网站，若之前没有手动点击网站上切换暗色/亮色按钮（不存在暗色模式标识符），则使用媒体查询检测用户是否有开启暗色模式，同步系统配色。
同时，媒体查询存在一定的兼容性问题，浏览器版本过低（如：IE 9），在查询失败时：
则逻辑判断用户当前系统时间，根据时间显示暗色或亮色配色。
存在暗色模式标识符
若用户之前有点击过切换暗色/亮色按钮，查询Cookies或localStorage内暗色模式标识符来展示暗色/亮色配色，优先级高于媒体查询和时间判断。
HTML结构
首先，我们依靠<body>标签内是否存在class="night"来实现，所以JS引用，最好紧接<body>标签：
<body>
<!--切换`亮色/暗色`按钮，加上"小埋皮肤"-->
<i onclick="switchNightMode()" id="xm"></i>
<!--`亮色/暗色`逻辑判断JS"-->
<script type="text/javascript" src="/DarkMode/js/switch.js"></script>
<i onclick="switchNightMode()" id="xm"></i>这条是我实现的切换暗色/亮色按钮，大家可以根据自己需要进行替换:
CSS结构
因为暗色模式的现实是依靠<body>标签内是否存在class="night"来实现：
.night {
color: #E0E0E0;
background-color: #424242;
}派生
因为我们是直接在<body>标签内添加CSS叠加，所以，按照样式的优先级来说，在CSS内使用，我们就需要使用派生方法写样式，如：
/\*暗色模式span标签\*/
.night span {
color: #E0E0E0;
}
/\*暗色模式警告按钮样式\*/
.night .btn-danger {
color: #fff;
background-color: #e45353a1;
border-color: #e45353a1;
}以此类推，根据自己亮色模式下的样式，适配暗色模式即可。
图片处理
另外，为了让暗色模式下，图片不要过度亮而刺眼，我们添加filter样式：
.night img{
filter: brightness(0.9);
}JS结构
JS结构就比较复杂了，主要分三个部分
进入网站，判断是否启动暗色模式
//检查当前主题模式和系统主题是否对应Start
function checkNightMode() {
var Mode = document.cookie.split(";")[0].split("=")[1];
cookiesExp=new Date(new Date().setMonth(new Date().getMonth()+1));
//存在暗色模式标识符，且Cookies中DarkMode值为1
if (Mode == 1) {
// 值为1：添加class="night"到body标签"
$("body").addClass("night");
}
//不存在暗色模式标识符情况下，是否需要启用暗色模式
else if (Mode == null || Mode == "undefined" || Mode == "") {
// 媒体查询，用户系统是否启动暗色模式
if (matchMedia('(prefers-color-scheme: dark)').matches) {
$("body").addClass("night");
}
// 媒体查询，用户系统是否启动亮色模式
else if (matchMedia('(prefers-color-scheme: light)').matches) {
$("body").removeClass("night");
}
// 时间判断，是不是到点了( ；´Д｀)
else if (new Date().getHours() >= 21 || new Date().getHours() < 7) {
$("body").addClass("night");
}
}
}
//检查当前主题模式和系统主题是否对应End这个JS是在用户进入网站，加载到<body>标签时，进行判断，是否需要在表情内加入class="night"。先判断是否有标识符，再判断媒体查询结果，最后判断用户系统时间，优先级逐级递减。
用户主动切换按钮
// 切换暗亮模式Start
function switchNightMode() {
// 获取Cookies内DarkMode值
var Mode = document.cookie.split(";")[0].split("=")[1];
// 如果DarkMode值不存在，也就是不存在标识符
if (Mode == null || Mode == "undefined" || Mode == "") {
// 判断是否处于暗色模式
if ($("body").hasClass("night")) {
// 处于暗色模式，删除标签内night
$("body").removeClass("night");
// 添加标识符
document.cookie = "DarkMode=0;path=/" + ";expires=" + cookiesExp.toGMTString();
$('#nightMode').removeClass("icon-yueliang").addClass("icon-zhishifufeiqiapianicon-");
} else {
// 不处于暗色模式，添加标签
$("body").addClass("night");
// 添加标识符
document.cookie = "DarkMode=1;path=/" + ";expires=" + cookiesExp.toGMTString();
$('#nightMode').removeClass("icon-zhishifufeiqiapianicon-").addClass("icon-yueliang");
}
} else if (Mode == '0') {
// 标识符为0，代表之前没开启暗色模式
$("body").addClass("night");
document.cookie = "DarkMode=1;path=/" + ";expires=" + cookiesExp.toGMTString();
$('#nightMode').removeClass("icon-zhishifufeiqiapianicon-").addClass("icon-yueliang");
} else {
$("body").removeClass("night");
document.cookie = "DarkMode=0;path=/" + ";expires=" + cookiesExp.toGMTString();
$('#nightMode').removeClass("icon-yueliang").addClass("icon-zhishifufeiqiapianicon-");
}
}
// 切换暗亮模式End用户主动切换按钮，是在用户点击某个元素，触发onclick函数事件，这边为还替换了页面id为nightMode标签内的图标：
图标替换
系统配色切换监听
其实，配置已经基本配置完成，但是如果用户设置的是自动变换配色，如Mac用户的外观自动：
在系统自动切换暗色/亮色的同时，如何让网站也一同切换？
答案就是创建监听器：
// 监听暗色、亮色切换Start
let lightMedia = window.matchMedia('(prefers-color-scheme: light)');
let darkMedia = window.matchMedia('(prefers-color-scheme: dark)');
let callback = (e) => {
let prefersDarkMode = e.matches;
if (prefersDarkMode) {
checkNightMode();
}
};
if (typeof darkMedia.addEventListener === 'function'||typeof lightMedia.addEventListener === 'function') {
lightMedia.addEventListener('change', callback);
darkMedia.addEventListener('change', callback);
}
// 监听暗色、亮色切换End这样就可以在用户系统更改配色的同时，网站随之更改了。
Demo
最后，可以看看我适配好的效果图网站：https://image.mintimate.cn
Tips
本次适配，标识符存储在Cookies内，且设置切换一次后，有效期为30天，实际生产环境中，存储在localStorage内可能是一个更好的选择。
推荐阅读
-
35 岁实现财务*，腾讯程序员手握2300万提前退休？-1000万房产、1000万腾讯股票、加上300万的现金，一共2300万的财产。有网友算了一笔账，假设1000万的房产用于自住，剩下1300万资产按照平均税后20-50万不等进行计算，大约花上26-60年左右的时间才能赚到这笔钱。也就是说，普通人可能奋斗一辈子，才能赚到这笔钱。在很多人还在为中年危机而惶惶不可终日的时候，有的人的35岁，就已经安全着陆，试问哪个打工人不羡慕？但问题是有这样财富积累必然有像样的实力做靠山。没有人可以不劳而获。 看到这里，肯定有人说，那么对于普通人来说，卷可能真就成了唯一的出路。但是卷也有轻松的卷，“偷懒”的卷法，对于程序员而言，刨除掉一时无法改掉的开会传统占用的大部分时间，如何把有限的时间和精力放在真正重要的架构设计、需求设计上，而不是重复的造*，编码、改bug、手动测试。因此在科技改变生活的今天，学会使用AI工具成为程序员们的必备技能。 以全栈式全自动的软件开发工具飞算SoFlu软件机器人为例，作为全球首款面向微服务架构设计和最佳实践的软件机器人,SoFlu软件机器人改变了原来手工编码的作业模式,通过可视化拖拽方式以及参数配置就能实现等同于编写复杂代码的业务逻辑,在设计业务逻辑时就完成了微服务应用开发,做到“业务即图,图即代码”,实现“软件开发,十倍提效”。 而作为飞算SoFlu软件机器人的一个重要组成部分，FuncGPT（慧函数）支持所有类型函数创建。通过自然语言描述Java函数需求，实时生成高质量、高可读性的Java函数代码。生成代码可直接复制到IDEA，或一键导入Java全自动开发工具函数库。 FuncGPT（慧函数）具有五大核心能力： ● 自然语言：通过自然语言即可生成函数，降低软件开发门槛。 ● 秒级函数开发：全自动秒级开发函数，秒级完成，效率千倍提升。 ● 一站式函数开发应用：函数生成即可直接应用，效率、安全有保障。 ● 质量可靠：生成的函数代码符合业界规范、具备良好的可读性，符合最优解。 ● 灵活生成：可以根据开发人员的具体需求生成并支持调整和修改。 以“将文件流转换为File对象”这个需求为例，以下是FuncGPT（慧函数）秒级生成的代码： / 类名：FileConverter // 函数名：convertStreamToFile // 函数功能：将文件流转换为File对象 // POM依赖包：无 import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; public class FileConverter { /** * 将文件流转换为File对象 * @param inputStream 文件流 * @param filePath 文件路径 * @param fileName 文件名 * @return 转换后的File对象 * @throws IOException 如果发生I/O异常 */ public static File convertStreamToFile(InputStream inputStream, String filePath, String fileName) throws IOException { File file = new File(filePath + File.separator + fileName); // 创建File对象 try (FileOutputStream outputStream = new FileOutputStream(file)) { // 创建文件输出流 byte buffer = new byte[1024]; int bytesRead; while ((bytesRead = inputStream.read(buffer)) != -1) { // 从文件流读取数据并写入文件 outputStream.write(buffer, 0, bytesRead); } } return file; // 返回转换后的File对象 } } // 函数示例 // 将文件流转换为File对象示例 // 入参：inputStream，文件流 // 入参：filePath，文件路径 // 入参：fileName，文件名 // 出参：file，转换后的File对象 // 调用示例： // InputStream inputStream = new FileInputStream("example.txt"); // String filePath = "C:\\Users\\User\\Documents"; // String fileName = "example.txt"; // File file = FileConverter.convertStreamToFile(inputStream, filePath, fileName); // System.out.println(file.getAbsolutePath); // 输出结果：例如，将文件流转换为File对象后，文件的绝对路径为：C:\Users\User\Documents\example.txt // 则输出结果为：C:\Users\User\Documents\example.txt 通过分析，不难发现以上代码：
-
如何将网站调整为暗色模式，并实现手动和自动切换
-
Grid++Report 锐浪报表开发常见问题解答集锦-报表设计 问：怎样在设计时打印预览报表？ 答：为了及时查看报表的设计效果，Grid++Report 报表设计应用程序提供了四种查看视图：普通视图、页面视图、预览视图与查询视图。通过窗口下边的 Tab 按钮可以在四种视图中任意切换。在预览视图中查看报表的打印预览效果，在查询视图中查看报表的查询显示效果。如果在报表的记录集提供了数据源连接串与查询 SQL，在进入预览视图与查询视图时会利用数据源连接串与查询 SQL 从数据源中自动取数,否则 Grid++Report 将自动生成模拟数据进行模拟打印预览与查询显示。注意：在预览视图与查询视图中看到的报表运行结果有可能与在你程序中的最终运行结果有差异，因为在报表的生成过程中我们可以在程序中对报表的生成行为进行一定的控制。 问：怎样用 Grid++Report 设计交叉表？ 答：Grid++Report 没有提供专门实现交叉表的功能，其它的报表构件提供的交叉表功能一般也比较死板和功能有限。利用 Grid++Report 的编程接口可以做出灵活多变，功能丰富的交叉表。示例程序 CrossTab 就是一个实现交叉表的例子程序，认真领会此例子程序，你就可以做出自己想要各种交叉表，并能提取一些共用代码，便于重复使用。 问：怎样设置整个报表的缺省字体？ 答：设置报表主对象的字体属性，也就是设置了整个报表的缺省字体。如果改变报表主对象的字体属性，则没有专门的设置字体属性的子对象的字体属性也跟随改变。同样每个报表节与明细网格也有字体属性，他们的字体属性也就是其拥有的子对象的缺省字体。 问：怎样在打印时限制一页的输出行数？ 答：设定明细网格的内容行的‘每页行数(RowsPerPage)’属性即可。另外要注意‘调节行高(AdjustRowHeight)’属性值：为真时根据页面的输出高度自动调整行的高度，使整个页面的输出区域充满。为假时按设计时的高度输出行。 问：怎样显示中文大写金额？ 答：将对象的“格式(Format)”属性设为 “$$” 及可，可以设置格式的对象有：字段(IGRField)、参数(IGRParameter)、系统变量(IGRSystemVarBox)与综合文字框(IGRMemoBox)，其中综合文字框是在报表式上设格式。 问：能否实现自定义纸张与票据打印？ 答：Grid++Report 完全支持自定义纸张的打印，只要在报表设定时在页面设置中选定自定义纸张，并指定准确的纸张尺寸。当然要在最终输出时得道合适的打印结果，输出打印机必须支持自定义纸张打印。Windows2000/XP/2003 操作系统上可以在打印机上定义自定义纸张，也可以采用这种方式实现自定义纸张打印。 问：怎样实现 0 值不打印？ 答：直接设置格式串就可以，在“数字格式”设置对话框中选定“0 不显示”，就会得到合适的格式串。也可以通过直接录入格式串来指定 0 不显示，但格式串必须符合 Grid++Report 的规定格式。另一种实现办法是在报表获取明细记录数据时，在 BeforePostRecord 事件中将值为零的字段设为空，调用字段的 Clear 方法将字段置为空。 问：怎样实现多栏报表? 答：在明细网格上设‘页栏数（PageColumnCount）’属性值大于 1 即可。通过 Grid++Report 的“页栏输出顺序”还可以指定多栏报表的输出顺序是“先从上到下”还是“先从左到右”。 问：如何实现票据套打？ 答：Grid++Report 为实现票据套打做了很多专门的安排：报表设计器提供了页面设计模式，按照设定的纸张尺寸显示设计面板，如果将空白票据的扫描图设为设计背景图，在定位报表内容的输出位置会非常方便。报表部件可以设定打印类别，非套打输出的内容在套打打印模式下就不会输出。 问：Grid++Report 有没有横向分页功能？ 答：回答是肯定的，在列的总宽度超过打印页面的输出宽度时，Grid++Report 可以另起新页输出剩余的列，如果左边存在锁定列，锁定列可以在后面的新页中重复输出，这样可以保证关键数据列在每一页都有输出。仔细体会 Grid++Report 提供的多种打印适应策略，选用最合适的方式。Grid++Report 的多种打印适应策略为开发动态报表提供了很好的支持。 问：怎样实现报表本页小计功能？ 答：定义一个报表分组,将本分组定义为页分组，在本分组的分组头与分组尾上定义统计。页分组就是在每页产生一个分组项，在每页的上端与下端都会分别显示页分组的分组头与分组尾，页分组不用定义分组依据字段。 报表运行 问：怎样与数据库建立连接? 答：如果在设计报表时指定了数据集的数据源连接串与查询 SQL 语句，Grid++Report 采用拉模式直接从数据源取得报表数据，Grid++Report 利用 OLE DB 从数据源取数，OLE DB 提供了广泛的数据源操作能力。如果 Grid++Report 的数据来源采用推模式，即 Grid++Report 不直接与数据库建立连接，各种编程语言/平台都提供了很好的数据库连接方式，并且易于操作，应用程序在报表主对象(IGridppReport)的 FetchRecord 事件中将数据传入，例子程序提供了各种编程语言填入数据的通用方法，对C++Builder 和 Delphi 还进行了专门的包装，直接关联 TDataSet 对象也可以将 TDataSet 对象中的数据传给报表。 问：打印时能否对打印纸张进行自适应？支持表格的折行打印吗? 答：Grid++Report 在打印时采用多种适应策略，通过设置明细网格(IGRDetailGrid)的‘打印策略(PrintAdaptMethod)’属性指定打印策略。(1)丢弃：按设计时列的宽度输出，超出范围的内容不显示。(2)绕行：按设计时列的宽度输出，如果在当前行不能完整输出，则另起新行进行输出。(3)缩放适应：对所有列的输出宽度进行按比例地缩放，使总宽度等于页面的输出宽度。(4)缩小适应：如果列的总宽度小于页面的输出宽度，对所有列的输出宽度进行按比例地缩小，使总宽度等于页面的输出宽度。(5)横向分页：超范围的列在新页中输出。(6)横向分页并重复锁定列。 问：如何改变缺省打印预览窗口的窗口标题？ 答：改变报表主对象的‘标题(Title)’属性即可。 问：利用集合对象的编程接口取子对象的接口引用，但不是自己期望的结果。 答：Grid++Report中所有集合对象的下标索引都是从 1 开始，另按对象的名称查找对象的接口引用时，名称字符是不区分大小写的。 问：怎样在运行时控制报表中各个对象的可见性？即怎样在运行时显示或隐藏对象？ 答：在报表主对象(GridppReport)的 SectionFormat 事件中设定相应报表子对象的可见(Visible)属性即可。 问：报表主对象重新载入数据，设计器中为什么没有反映新载入的数据？ 答：应调用 IGRDesigner 的 Reload 方法。 问：怎样实现不进入打印预览界面，直接将报表打印出来？