Plugins

Create custom plugins for darkify-js

Note

Plugins are available starting from version 1.1.13 and above.

Plugins allow you to extend Darkify with custom UI components or behavior.

Interface

export interface DarkifyPlugin<T extends HTMLElement = HTMLElement> {
  /** Optional: Element rendered by the plugin */
  el?: T;
  /** Required: Render the plugin UI */
  render(): void | T;
  /** Optional: Called when theme changes */
  onThemeChange?: (theme: string) => void;
  /** Optional: Called when Darkify is destroyed */
  onDestroy?: () => void;
}

Lifecycle

1. Constructor - Plugin is instantiated with the Darkify instance as host
2. render() - Called during Darkify initialization
3. onThemeChange() - Called whenever the theme changes (including sync from other tabs)
4. onDestroy() - Called when darkify.destroy() is invoked

Accessing methods

The host parameter is your Darkify instance. You can call:

class MyPlugin implements DarkifyPlugin {
  public static readonly pluginId = 'd-<something>'; // Required
  private host: any;

  constructor(host: any) {
    this.host = host;
    // Access: host.theme, host.toggleTheme(), host.getCurrentTheme()
  }

  render(): void | HTMLElement {
    throw new Error("Method not implemented.");
  }
  
  onThemeChange(theme: string): void {
    console.log('Theme changed to:', theme);
  }
}