Plugins

Plugins

• keyboard-shortcut: this plugin adds keyboard shortcut handling
• view-transitions: this plugin adds view transitions support

Create custom plugins

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

🌱 Lifecycle

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

Accessing methods

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

class MyPlugin implements Plugin {
  public static readonly pluginId = 'u-<something>'; // Required
  private host: Host;

  constructor(host: Host) {
    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);
  }
}