Skip to content

API.md

Latest commit

 

History

History
114 lines (89 loc) · 4.46 KB

API.md

File metadata and controls

114 lines (89 loc) · 4.46 KB

English | 简体中文

API

Darkmode.run(nodes[, options])

  • nodes <DOM Object Array> The DOM to be converted.
  • options <Object> Configuration.
    • options.begin <Function> Callback triggered when Dark Mode conversion starts.
      • isSwitch <boolean> Whether to switch to Dark Mode.
    • options.showFirstPage <Function> Callback triggered when the first page render finish.
    • options.error <Function> Callback triggered when an error occurs.
      • err <Error> Error object.
    • options.mode <string> The specified color mode (dark | light), if specified, the system color will not be monitored.
    • options.whitelist <Object> The DOM in whitelist will not be processed.
      • options.whitelist.tagName <string Array> The whitelist for tag name.
      • options.whitelist.attribute <string Array> The whitelist for attributes.
    • options.needJudgeFirstPage <boolean> Whether to judge the first screen. Default true.
    • options.delayBgJudge <boolean> Whether to delay background judgment. Default false.
    • options.container <DOM Object> The container to use when delaying running js. Default null.
    • options.cssSelectorsPrefix <string> Css selector prefix. Default ''.
    • opt.defaultLightTextColor <string> Font color in non-Dark Mode. Default #191919.
    • opt.defaultLightBgColor <string> Background color in non-Dark Mode. Default #fff.
    • opt.defaultDarkTextColor <string> Font color in Dark Mode. Default #a3a3a3.
    • opt.defaultDarkBgColor <string> Background color in Dark Mode. Default #191919.

Run Dark Mode conversion algorithm. Note: The conversion can be run multiple times, but the configuration can only be set once.

Darkmode.run(document.body.querySelectorAll('*'), {
  mode: 'dark', // force dark mode
  ... // other configuration items
});

Darkmode.init(options)

  • options Same as the options parameter in Darkmode.run().

Initialize Dark Mode configuration. Note: The configuration can only be set once.

Darkmode.init({
  begin: isSwitch => { // callback triggered when Dark Mode conversion starts. The isSwitch means whether to switch to Dark Mode
    console.log('begin');
  },
  showFirstPage: () => { // callback triggered when the first page render finish
    console.log('showFirstPage');
  },
  error: err => { // an error occurred
    console.log(err);
  },
  mode: 'dark', // force dark mode
  whitelist: {
    tagName: ['a'], // ignore <a>
    attribute: ['data-no-dark'], // ignore data-no-dark attribute
  },
  needJudgeFirstPage: true, // whether to judge the first screen
  delayBgJudge: false, // whether to delay background judgment
  container: null, // the container to use when delaying running js
  cssSelectorsPrefix: '', // css selector prefix
  defaultLightTextColor: '#191919', // font color in non-Dark Mode
  defaultLightBgColor: '#fff', // background color in non-Dark Mode
  defaultDarkTextColor: '#a3a3a3', // font color in Dark Mode
  defaultDarkBgColor: '#191919', // background color in Dark Mode
});

Darkmode.convertBg(nodes)

  • nodes <DOM Object Array> List of background nodes to be processed (may contain non-background nodes).

Processing background. When delayBgJudge = true in the configuration item, you can manually specify the timing to run the background judgment.

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

Darkmode.updateStyle(node, styles)

  • node <DOM Object> The node to be updated.
  • styles <Object> The key-value pair object to be updated. eg: { color: '#ddd' }.

Update the Dark Mode style of the specified node.

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

Darkmode.getContrast(color1, color2) => contrast

  • color1 <string> The color used to calculate color contrast, supports CSS color format.
  • color2 <string> The color used to calculate color contrast, supports CSS color format.
  • return contrast <number> The color contrast, its value range is [1, 21].

Get the contrast between two colors.

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

Darkmode.extend(pluginList)

  • pluginList <Plugin Array> List of plugins to mount.

Mount the plugin.

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