How to use themer - 7 common examples

componentDidMount() {
    this.themer = new Themer({
      debug: true,
      onUpdate: theme => this.setState({ active: theme }),
      themes: {
        light,
        dark,
        auto,
        system,
        custom
      }
    });
    this.themer.set(this.state.selected);
  }

mounted() {
    this.themer = new Themer({
      debug: true,
      onUpdate: theme => (this.active = theme),
      themes: { light, dark, auto, system, custom }
    });
    this.themer.set(this.selected);
  }
};

componentDidMount() {
    this.themer = new Themer({
      debug: true,
      onUpdate: theme => this.setState({ active: theme }),
      themes: { light, dark, auto, system, custom }
    });
    this.themer.set(this.state.selected);
  }

render() {
    return (
      <footer id="footer">
        <span>{PACKAGE.author.name}</span>
        <span>{PACKAGE.author.email}</span>
        <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
          <path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" fill="currentColor"></path>
        </svg>
      </footer>
    );
  }

render() {
    return (
      <footer id="footer">
        <span>{PACKAGE.author.name}</span>
        <span>{PACKAGE.author.email}</span>
        <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
          <path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" fill="currentColor"></path>
        </svg>
      </footer>
    );
  }
}

render() {
    return (
      <header id="header">
        <div>
          <h1>
            Themer.js <span>v{PACKAGE.version}</span>
          </h1>
          <div>
            <span>
              {this.props.icon}
            </span>
            <a href="https://github.com/krestaino/themer.js">
              github.com/krestaino/themer.js
            </a>
          </div>
        </div>
        <div>{this.props.children}</div>
      </header>
    );
  }
}

export default async function generateZip(selections, colors, width, height, url, cliColors) {
  const zip = new JSZip();
  const preparedColors = prepareColors(colors, () => {});
  zip.file('Instructions.md', instructions(selections, url));
  zip.file('colors.js', colorsForCli(cliColors, url));
  for (const [key, selected] of Object.entries(selections)) {
    if (selected) {
      const files = await Promise.all(templates[key].render(
        preparedColors,
        key in resolutionOptions
          ? { [resolutionOptions[key]]: `${width}x${height}` }
          : {},
      ));
      files.forEach(file => {
        zip.folder(templates[key].folderName).file(file.name, file.contents);
      });
    }
  }
  return zip;