Skip to content

Latest commit

 

History

History
114 lines (89 loc) · 4.39 KB

API.md

File metadata and controls

114 lines (89 loc) · 4.39 KB

English | 简体中文

API

Darkmode.run(nodes[, options])

  • nodes <DOM Object Array> 要进行 Dark Mode 转换的 DOM 节点数组。
  • options <Object> Dark Mode 转换算法配置项。
    • options.begin <Function> Dark Mode 转换开始时触发的回调。
      • isSwitch <boolean> 是否切换 Dark Mode 时进行转换。
    • options.showFirstPage <Function> 首屏处理完成时触发的回调。
    • options.error <Function> 发生 error 时触发的回调。
      • err <Error> 错误对象。
    • options.mode <string> 强制指定的颜色模式（ dark | light ），指定了就不监听系统颜色。
    • options.whitelist <Object> 节点白名单，在白名单内的 DOM 将不会被转换。
      • options.whitelist.tagName <string Array> 标签名列表。
      • options.whitelist.attribute <string Array> 属性列表。
    • options.needJudgeFirstPage <boolean> 是否需要判断首屏，默认 true。
    • options.delayBgJudge <boolean> 是否延迟背景判断，默认 false。
    • options.container <DOM Object> 延迟运行 js 时使用的容器，默认 null。
    • options.cssSelectorsPrefix <string> css 选择器前缀，默认 ''。
    • options.defaultLightTextColor <string> 非 Dark Mode 下字体颜色，默认 #191919。
    • options.defaultLightBgColor <string> 非 Dark Mode 下背景颜色，默认 #fff。
    • options.defaultDarkTextColor <string> Dark Mode 下字体颜色，默认 #a3a3a3。
    • options.defaultDarkBgColor <string> Dark Mode 下背景颜色，默认 #191919。

运行 Dark Mode 转换算法。注意：可多次运行转换，但配置只可设置一次。

Darkmode.run(document.body.querySelectorAll('*'), {
  mode: 'dark', // 强制指定深色模式
  ... // 其它配置项
});

Darkmode.init(options)

  • options 和 Darkmode.run() 中的 options 参数一致。

初始化 Dark Mode 配置。注意：配置只可设置一次。

Darkmode.init({
  begin: isSwitch => { // Dark Mode 转换开始时触发的回调，isSwitch表示是否在切换 Dark Mode
    console.log('begin');
  },
  showFirstPage: () => { // 首屏处理完成时触发的回调
    console.log('showFirstPage');
  },
  error: err => { // 发生error时触发的回调，err为错误对象
    console.error(err);
  },
  mode: 'dark', // 强制指定深色模式
  whitelist: { // 节点白名单，在白名单内的 DOM 将不会被转换
    tagName: ['a'], // 不转换a标签节点
    attribute: ['data-no-dark'], // 不转换带data-no-dark属性的节点
  },
  needJudgeFirstPage: true, // 是否需要判断首屏
  delayBgJudge: false, // 是否延迟背景判断
  container: null, // 延迟运行 js 时使用的容器
  cssSelectorsPrefix: '', // css 选择器前缀
  defaultLightTextColor: '#191919', // 非 Dark Mode 下字体颜色
  defaultLightBgColor: '#fff', // 非 Dark Mode 下背景颜色
  defaultDarkTextColor: '#a3a3a3', // Dark Mode 下字体颜色
  defaultDarkBgColor: '#191919', // Dark Mode 下背景颜色
});

Darkmode.convertBg(nodes)

  • nodes <DOM Object Array> 要处理的背景节点列表（可包含非背景节点）。

处理背景。当配置项中的 delayBgJudge = true 时，可手动指定运行背景判断的时机。

Darkmode.convertBg(document.body.querySelectorAll('*'));

Darkmode.updateStyle(node, styles)

  • node <DOM Object> 要更新的节点。
  • styles <Object> 更新的样式键值对对象，如：{ color: '#ddd' }。

更新节点 Dark Mode 样式。

Darkmode.updateStyle(node, {
  color: '#191919',
  backgroundColor: '#fff',
});

Darkmode.getContrast(color1, color2) => contrast

  • color1 <string> 要计算颜色对比度的颜色1，支持css颜色格式。
  • color2 <string> 要计算颜色对比度的颜色2，支持css颜色格式。
  • return contrast <number> 颜色对比度，取值范围为[1, 21]。

获取两个颜色的对比度。

Darkmode.getContrast('#fff', '#000'); // return 21

Darkmode.extend(pluginList)

  • pluginList <Plugin Array> 要挂载的插件列表。

挂载插件。

Darkmode.extend([pluginA, pluginB, pluginC]);