暗调
用于管理网络上"黑暗模式"的工具包.
黑暗模式(Dark Mode)是现代操作系统中的一个功能,它允许您将默认的UI从光线转换为暗主题. 在网络上,我们可以利用这一点来控制我们网站的主题.
利用 matchMedia API及其听众,结合 prefers-color-scheme 媒体查询,以便每当您在"黑暗模式"中时点燃功能.
在 Windows 10 Firefox 中使用暗模的示例应用程序
· 先决条件
需要一个支持暗模式的操作系统 :
- 马科斯 10.14
- iOS 13.0 (韩语)
- iPadOS 13.0 (英语)
- 视窗 10
- ...或更远
还需要支持 prefers-color-scheme 媒体查询。 完整清单 支持的浏览器 可以在罐头上找到.
V2+中突破变化:虽然被暗影所暴露的基底API一直未变,但在罩下
MediaQueryList是因为addListener财务报告和审定财务报表removeListener方法在Web标准中标为已贬值,因此被替换为addEventListener财务报告和审定财务报表removeEventListener恭敬地说. 对于从未得到明确支持的很老的浏览器来说,浏览器兼容性略有不同,但是由于这个原因,产生了一个大版本的凸起.
QQ 安装
$ npm install @assortment/darkmodejs
使用量
import darkmodejs from '@assortment/darkmodejs';
const config = { onChange: (activeTheme, themes) => {} };
darkmodejs(config);
如果你需要ES5支持,你可以 require 换成包裹.
const darkmodejs = require('@assortment/darkmodejs');
例如, 当主题活动时, 可以登录控制台 :
import darkmodejs from '@assortment/darkmodejs';
const onChange = (activeTheme, themes) => {
switch (activeTheme) {
case themes.DARK:
console.log('darkmode enabled');
break;
case themes.LIGHT:
console.log('lightmode enabled');
break;
case themes.NO_PREF:
console.log('no preference enabled');
break;
case themes.NO_SUPP:
console.log('no support sorry');
break;
}
};
darkmodejs({ onChange });
你可以打个电话打扫一下 removeListeners 从 darkmodejs。它可以删除两者 DARK 财务报告和审定财务报表 LIGHT 查询听众.
const dmjs = darkmodejs({ onChange });
dmjs.removeListeners();
这在卸载使用动态路由技术的组件或页面时可能有用.
• API
配置
darkmodejs 接受一个 config 对象,然后接受 onChange。 。 。 .
onChange(activeTheme, themes)
类型 : Function。 。 。 . 要求 : No。 。 。 .
此函数在 darkmodejs 执行以检查 :
- 如果有支持的话
prefers-color-scheme· ; - 若为
dark, (中文(简体) ),light或者说no-preference主题已激活.
该函数还有义务 媒体查询列表 add listener 来聆听更改.
activeTheme
类型 : String。 。 。 . 要求 : No。 。 。 .
返回当前活动主题 .
themes
类型 : Object{String}。 。 。 . 要求 : No。 。 。 .
返回所有可用的主题状态 :
{
DARK: 'dark',
LIGHT: 'light',
NO_PREF: 'no-preference',
NO_SUPP: 'no-support'
}
已返回
一旦启动,您也可以访问 removeListeners 函数用于清理目的.
removeListeners
类型数字 : Function。 。 。 .
删除两者 DARK 财务报告和审定财务报表 LIGHT 查询听众.
实例
以下例子摘自: darkmodejs-demo,为显示如何使用而创建的演示应用程序 @assortment/darkmodejs 与 情感主题 基于用户的OS偏好来控制您网站的主题.
- 密码 : https://github.com/Assortment/darkmodejs-demo 页面存档备份,存于互联网档案馆
- QQ 網址 : https://darkmodejs-demo.netlify.com/ 互联网档案馆的存檔,存档日期2014-12-22
麦克OS
萨法里( 支持)
Firefox( 支持) (Firefox) Name
视窗 10
Firefox( 支持) (Firefox) Name
Chrome( 在 Chrome 76 之前不支持)
无偏好
特别提及 no-preference据我所知,我认为目前没有任何操作系统允许任何偏好选项,因此目前不存在这样的情况: prefers-color-scheme 媒体查询。 这么说, 作为规格的一部分 我已经把它作为一个选项 在演示应用中 如果你想做任何具体.
许可证
麻省理工学院 卢克·怀特豪斯