标签 HTML5 下的文章

Darkmode.Js

?黑暗模式/夜间模式，只需要几秒钟就可以给你的网站添加这个功能

本站已经添加，你可以看到网站左下方有个小按钮，你点击 Ta 预览以下效果吧！

该库使用 CSS mix-blend-mode 来将暗模式带入您的任何网站。只需复制粘贴该片段，您将获得一个小部件以打开和关闭暗模式。您也可以不使用窗口小部件而以编程方式使用它。该插件是轻量级的，内置于​​ VanillaJS 中。默认情况下，它也使用 localstorage，因此您的上一次设置将被记住！

特点

  • 窗口小部件自动显示
  • 保存用户选择
  • 如果操作系统偏好的主题为深色，则自动显示Darkmode（如果浏览器支持prefers-color-scheme）
  • 可以以编程方式使用而无需小部件

WordPress 插件

如果您使用的是 Wordpress，则可能需要看看基于 Darkmode.js 的这些插件：

简单方法（使用JSDelivr CDN）

只需将此代码添加到您的 html 页面：

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script>new Darkmode().showWidget();</script>

高级调用参数：

- 阅读剩余部分 -

我在用手机Chrome访问 Google Search Console 移动设备适合性测试 发现顶部地址栏颜色改变了，如图：

用手机Chrome访问 Google Search Console 移动设备适合性测试 截图

一般用手机版Chrome访问网页是这样子的，比如现在博客：

用手机Chrome访问 现在博客 截图

到底是用了什么特效呢？我查了下，在Google Developers 找到了这篇文档 Icons Browser Colors | Web | Google Developers

访问 Icons Browser Colors | Web | Google Developers 截图

没错，正是这段代码：

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">

使其变了颜色，ok，既然get到了这个技能，那么应用到我的博客？ok，说干就干，因为我用的是Emlog博客程序所以，打开我使用的主题文件（如果你用的WordPress、Z-Blog等博客程序或者其他的程序，只需要找到类似于 header.php 的公共文件添加即可）：

/content/templates/Life/header.php

在<head></head>里加上了这行代码

	<meta name="theme-color" content="#3ac19f">
	<!--  #3ac19f 这是颜色代码，效果就是下图所示-->

然后就变成这样子啦┏(^ω^)=☞

使用特效后访问 现在博客 截图

最后，我想说一声，用手机写一篇博文好气啊，手机不好，写好后，切换到其他网页上传图片然后返回来，又因为内存不足，自动刷新了下网页，导致我又得重写……