diff --git a/src/core/darkify.test.ts b/src/core/darkify.test.ts
new file mode 100644
index 0000000..b4b8ffe
--- /dev/null
+++ b/src/core/darkify.test.ts
@@ -0,0 +1,96 @@
+import { Darkify } from '@/core/darkify';
+import { jest } from '@jest/globals';
+
+describe('Darkify', () => {
+  const setupMatchMedia = (isDark: boolean = false) => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(query => ({
+        matches: (query as string).includes('dark') ? isDark : false,
+        media: query,
+        onchange: null,
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+      })),
+    });
+  };
+
+  const createButton = (id: string = 'el'): HTMLButtonElement => {
+    const button = document.createElement('button');
+    button.id = id;
+    document.body.appendChild(button);
+    return button;
+  };
+
+  beforeAll(() => {
+    jest.spyOn(Storage.prototype, 'setItem').mockImplementation(() => undefined);
+    jest.spyOn(Storage.prototype, 'getItem').mockImplementation(() => null);
+    jest.spyOn(Storage.prototype, 'removeItem').mockImplementation(() => undefined);
+  });
+
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    jest.clearAllMocks();
+    setupMatchMedia(true);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('Initialization', () => {
+    test('should initialize with dark theme when OS prefers dark', () => {
+      createButton();
+      const darkify = new Darkify('#el', {});
+      expect(darkify.getCurrentTheme()).toBe('dark');
+    });
+
+    test('should respect autoMatchTheme "false" option', () => {
+      setupMatchMedia(false);
+      createButton();
+      const freshDarkify = new Darkify('#el', { autoMatchTheme: false });
+      expect(freshDarkify.getCurrentTheme()).toBe('light');
+    });
+  });
+
+  describe('Storage', () => {
+    test('should save theme to localStorage by default', () => {
+      createButton();
+      new Darkify('#el', {});
+      expect(localStorage.setItem).toHaveBeenCalledWith('theme', 'dark');
+    });
+
+    test('should use sessionStorage when specified', () => {
+      createButton('el2');
+      new Darkify('#el2', { useStorage: 'session' });
+
+      expect(sessionStorage.setItem).toHaveBeenCalledWith('theme', 'dark');
+      expect(localStorage.removeItem).toHaveBeenCalledWith('theme');
+    });
+
+    test('should not save theme when useStorage is "none"', () => {
+      createButton('el3');
+      new Darkify('#el3', { useStorage: 'none' });
+
+      expect(localStorage.setItem).not.toHaveBeenCalled();
+      expect(sessionStorage.setItem).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Theme toggle', () => {
+    test('should toggle theme from dark to light', () => {
+      createButton();
+      const darkify = new Darkify('#el', {});
+      darkify.toggleTheme();
+      expect(darkify.getCurrentTheme()).toBe('light');
+    });
+
+    test('should toggle theme from light to dark', () => {
+      setupMatchMedia(false);
+      createButton();
+      const freshDarkify = new Darkify('#el', {});
+      freshDarkify.toggleTheme();
+      expect(freshDarkify.getCurrentTheme()).toBe('dark');
+    });
+  });
+});
diff --git a/src/core/darkify.ts b/src/core/darkify.ts
new file mode 100644
index 0000000..93e57da
--- /dev/null
+++ b/src/core/darkify.ts
@@ -0,0 +1,218 @@
+import { EventListenerManager } from '@/core/eventListenerManager';
+import { defaultOptions } from '@/core/defaultOptions';
+import { isBrowser } from '@/utils';
+import type { DarkifyPlugin, Options } from '@/types';
+
+export class Darkify {
+  private static readonly storageKey: string = 'theme';
+  public readonly options: Options = defaultOptions;
+  private plugins: DarkifyPlugin[] = [];
+  public theme: string = 'light';
+  private _elm!: EventListenerManager;
+  private _meta!: HTMLMetaElement;
+  private _style!: HTMLStyleElement;
+
+  /**
+   * Creates a new Darkify instance with default options
+   * @param element - Button ID (recommended) or HTML element selector
+   */
+  constructor(element: string);
+
+  /**
+   * Creates a new Darkify instance with custom options only
+   * @param options - Options
+   */
+  constructor(options: Partial<Options>);
+
+  /**
+   * Creates a new Darkify instance for managing dark/light theme
+   * @param element - Button ID (recommended) or HTML element selector
+   * @param options - Options
+   * @see {@link https://github.com/emrocode/darkify-js/wiki|Documentation}
+   */
+  constructor(element: string, options: Partial<Options>);
+
+  constructor(element?: string | Partial<Options>, options?: Partial<Options>) {
+    if (!isBrowser) return;
+
+    this._elm = new EventListenerManager();
+
+    const el = typeof element === 'string' ? element : undefined;
+    const inputOpts =
+      element && typeof element === 'object' ? (element as Partial<Options>) : options;
+    const opts: Options = { ...defaultOptions, ...inputOpts };
+
+    this.options = opts;
+    this.theme = this.getOsPreference();
+    this._style = document.createElement('style');
+    this._meta = document.createElement('meta');
+
+    this.createAttribute();
+    this.init(el);
+    this.syncThemeBetweenTabs();
+  }
+
+  private init(element?: string): void {
+    this._elm.addListener(
+      window.matchMedia('(prefers-color-scheme: dark)'),
+      'change',
+      ({ matches: isDark }: MediaQueryListEvent) => {
+        this.theme = isDark ? 'dark' : 'light';
+        this.createAttribute();
+      }
+    );
+
+    const setup = () => {
+      this.initPlugins();
+      const hasWidget = this.plugins.some(p => p.el !== undefined);
+      if (element && !hasWidget) {
+        const htmlElement = document.querySelector<HTMLElement>(element);
+        if (htmlElement) {
+          this._elm.addListener(htmlElement, 'click', () => this.toggleTheme());
+        }
+      }
+    };
+
+    if (document.readyState !== 'loading') {
+      return setup();
+    }
+
+    this._elm.addListener(document, 'DOMContentLoaded', setup);
+  }
+
+  private initPlugins(): void {
+    this.options.usePlugins?.forEach(p => {
+      const [Plugin, pluginOptions] = Array.isArray(p) ? p : [p, undefined];
+      const plugin = new Plugin(this, pluginOptions);
+
+      const renderedNode = plugin.render();
+      if (renderedNode) {
+        plugin.el = renderedNode;
+      }
+
+      this.plugins.push(plugin);
+    });
+  }
+
+  private notifyPlugins(theme: string) {
+    this.plugins.forEach(plugin => {
+      plugin.onThemeChange?.(theme);
+    });
+  }
+
+  private getStorage(): Storage | undefined {
+    const { useStorage } = this.options;
+    if (useStorage === 'none') return;
+    return useStorage === 'local' ? window.localStorage : window.sessionStorage;
+  }
+
+  private getOsPreference(): string {
+    const storage = this.getStorage();
+
+    if (storage) {
+      const stored = storage.getItem(Darkify.storageKey);
+      if (stored) return stored;
+    }
+
+    if (this.options.autoMatchTheme) {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    return 'light';
+  }
+
+  private createAttribute(): void {
+    const dataTheme = document.documentElement;
+    const { useColorScheme } = this.options;
+
+    const css = `/**! Darkify / A simple dark mode toggle library **/\n:root:where([data-theme="${this.theme}"]),[data-theme="${this.theme}"]{color-scheme:${this.theme}}`;
+
+    dataTheme.dataset.theme = this.theme;
+
+    this.updateTags(css, useColorScheme);
+    this.savePreference();
+  }
+
+  private updateTags(css: string, useColorScheme: Options['useColorScheme']) {
+    const [lightColor, darkColor] = useColorScheme;
+
+    this._meta.name = 'theme-color';
+    this._meta.media = `(prefers-color-scheme: ${this.theme})`;
+    this._meta.content = this.theme === 'light' ? lightColor : (darkColor ?? lightColor);
+    this._style.innerHTML = css;
+
+    const head = document.head;
+
+    // avoid tags duplication
+    if (!this._meta.parentNode) head.appendChild(this._meta);
+    if (!this._style.parentNode) head.appendChild(this._style);
+  }
+
+  private savePreference(): void {
+    const { useStorage } = this.options;
+    if (useStorage === 'none') return;
+    const storage = useStorage === 'local';
+
+    const STO = storage ? window.localStorage : window.sessionStorage;
+    const OTS = storage ? window.sessionStorage : window.localStorage;
+
+    OTS.removeItem(Darkify.storageKey);
+    STO.setItem(Darkify.storageKey, this.theme);
+  }
+
+  private syncThemeBetweenTabs(): void {
+    this._elm.addListener(window, 'storage', (e: StorageEvent) => {
+      if (e.key === Darkify.storageKey && e.newValue) {
+        this.theme = e.newValue;
+        this.createAttribute();
+        this.notifyPlugins(e.newValue);
+      }
+    });
+  }
+
+  private setTheme(newTheme: 'light' | 'dark'): void {
+    this.theme = newTheme;
+    this.createAttribute();
+    this.notifyPlugins(newTheme);
+  }
+
+  /**
+   * Toggles the theme between light and dark modes
+   */
+  toggleTheme(): void {
+    this.setTheme(this.theme === 'light' ? 'dark' : 'light');
+  }
+
+  /**
+   * Retrieves the currently active theme
+   * @returns The current theme name ('light' or 'dark')
+   */
+  getCurrentTheme(): string {
+    return this.theme;
+  }
+
+  /**
+   * Destroys the Darkify instance and cleans up all resources
+   *
+   * Removes all event listeners (system theme changes, click handlers, storage events),
+   * destroys all active plugins, removes injected DOM elements (<style> and <meta> tags),
+   * and frees associated resources.
+   * Call this method when the instance is no longer needed to prevent memory leaks.
+   */
+  destroy(): void {
+    this._elm.clearListeners();
+
+    // remove injected DOM elements
+    this._style?.parentNode?.removeChild(this._style);
+    this._meta?.parentNode?.removeChild(this._meta);
+
+    // destroy plugins
+    if (this.plugins.length > 0) {
+      this.plugins.forEach(plugin => {
+        plugin.onDestroy?.();
+      });
+
+      this.plugins = [];
+    }
+  }
+}
diff --git a/src/defaultOptions.ts b/src/core/defaultOptions.ts
similarity index 100%
rename from src/defaultOptions.ts
rename to src/core/defaultOptions.ts
diff --git a/src/core/eventListenerManager.ts b/src/core/eventListenerManager.ts
new file mode 100644
index 0000000..504064d
--- /dev/null
+++ b/src/core/eventListenerManager.ts
@@ -0,0 +1,47 @@
+type ListenerTarget = Window | Document | HTMLElement | MediaQueryList;
+
+interface ListenerRecord {
+  target: ListenerTarget;
+  event: string;
+  handler: EventListenerOrEventListenerObject;
+  options?: boolean | AddEventListenerOptions;
+}
+
+export class EventListenerManager {
+  private listeners: ListenerRecord[] = [];
+
+  /**
+   * Adds an event listener and tracks it for cleanup
+   */
+  addListener<T extends Event>(
+    target: ListenerTarget,
+    event: string,
+    handler: (event: T) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  addListener(
+    target: ListenerTarget,
+    event: string,
+    handler: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  addListener(
+    target: ListenerTarget,
+    event: string,
+    handler: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions
+  ): void {
+    target.addEventListener(event, handler, options);
+    this.listeners.push({ target, event, handler, options });
+  }
+
+  /**
+   * Removes all tracked event listeners
+   */
+  clearListeners(): void {
+    this.listeners.forEach(({ target, event, handler, options }) => {
+      target.removeEventListener(event, handler, options);
+    });
+    this.listeners = [];
+  }
+}
diff --git a/src/plugins/keyboard/index.ts b/src/plugins/keyboard/index.ts
new file mode 100644
index 0000000..1312c21
--- /dev/null
+++ b/src/plugins/keyboard/index.ts
@@ -0,0 +1,66 @@
+import type { DarkifyPlugin } from '@/types';
+
+interface KeyboardShortcutOptions {
+  key?: string;
+  ctrl?: boolean;
+  shift?: boolean;
+  target?: 'body' | 'input' | 'all';
+  cooldown?: number;
+}
+
+export class KeyboardShortcut implements DarkifyPlugin {
+  public static readonly pluginId = 'd-keyboard-shortcut';
+  private _host: any;
+  private options: Required<KeyboardShortcutOptions>;
+  private _lastTriggered: number = 0;
+
+  constructor(host: any, options?: KeyboardShortcutOptions) {
+    this._host = host;
+    this.options = {
+      key: options?.key ?? 'd',
+      ctrl: options?.ctrl ?? false,
+      shift: options?.shift ?? false,
+      target: options?.target ?? 'body',
+      cooldown: options?.cooldown ?? 300,
+    };
+  }
+
+  private handleKeyDown = (e: KeyboardEvent) => {
+    if (this.options.target === 'body' && this.isTyping(e)) return;
+    if (this.options.target === 'input' && !this.isTyping(e)) return;
+
+    if (this.matches(e)) {
+      e.preventDefault();
+
+      const now = Date.now();
+      if (now - this._lastTriggered < this.options.cooldown) return;
+
+      this._lastTriggered = now;
+      this._host.toggleTheme();
+    }
+  };
+
+  render(): void {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  onDestroy(): void {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  private matches(e: KeyboardEvent): boolean {
+    return (
+      e.key.toLowerCase() === this.options.key.toLowerCase() &&
+      (!this.options.ctrl || e.ctrlKey || e.metaKey) &&
+      (!this.options.shift || e.shiftKey) &&
+      (this.options.ctrl || (!e.ctrlKey && !e.metaKey && !e.altKey))
+    );
+  }
+
+  private isTyping(e: KeyboardEvent): boolean {
+    const target = e.target as HTMLElement;
+    const tagName = target.tagName.toLowerCase();
+    const isEditable = target.isContentEditable || tagName === 'input' || tagName === 'textarea';
+    return isEditable;
+  }
+}
diff --git a/src/plugins/widget/components/index.ts b/src/plugins/widget/components/index.ts
new file mode 100644
index 0000000..fcbff5d
--- /dev/null
+++ b/src/plugins/widget/components/index.ts
@@ -0,0 +1 @@
+export { type ThemeWidgetOptions, ThemeWidgetElement, pluginId } from './themeWidgetElement';
diff --git a/src/plugins/widget/components/themeWidgetElement.ts b/src/plugins/widget/components/themeWidgetElement.ts
new file mode 100644
index 0000000..a7e487e
--- /dev/null
+++ b/src/plugins/widget/components/themeWidgetElement.ts
@@ -0,0 +1,211 @@
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+export const pluginId = 'd-widget';
+
+export interface ThemeWidgetOptions {
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  size?: 'small' | 'medium' | 'large';
+  shortcut?: string;
+}
+
+@customElement(pluginId)
+export class ThemeWidgetElement extends LitElement {
+  @property({ type: String, reflect: true })
+  position: ThemeWidgetOptions['position'] = 'bottom-right';
+
+  @property({ type: String, reflect: true })
+  size: ThemeWidgetOptions['size'] = 'medium';
+
+  @property({ type: String, reflect: true })
+  shortcut: ThemeWidgetOptions['shortcut'] = '';
+
+  @state()
+  private theme: string = 'light';
+
+  private _host?: any;
+
+  static override styles = css`
+    :host {
+      --widget-safe-top: env(safe-area-inset-top, 0px);
+      --widget-safe-right: env(safe-area-inset-right, 0px);
+      --widget-safe-bottom: env(safe-area-inset-bottom, 0px);
+      --widget-safe-left: env(safe-area-inset-left, 0px);
+
+      --margin: 24px;
+      --top: var(--margin);
+      --right: var(--margin);
+      --bottom: auto;
+      --left: auto;
+    }
+
+    :host([position='top-left']) {
+      --top: var(--margin);
+      --right: auto;
+      --bottom: auto;
+      --left: var(--margin);
+    }
+
+    :host([position='top-right']) {
+      --top: var(--margin);
+      --right: var(--margin);
+      --bottom: auto;
+      --left: auto;
+    }
+
+    :host([position='bottom-left']) {
+      --top: auto;
+      --right: auto;
+      --bottom: calc(var(--margin) * 2);
+      --left: var(--margin);
+    }
+
+    :host([position='bottom-right']) {
+      --top: auto;
+      --right: var(--margin);
+      --bottom: calc(var(--margin) * 2);
+      --left: auto;
+    }
+
+    :host([size='small']) {
+      --size: 36px;
+    }
+
+    :host([size='medium']) {
+      --size: 56px;
+    }
+
+    :host([size='large']) {
+      --size: 72px;
+    }
+
+    .d-wrapper {
+      position: fixed;
+      top: calc(var(--top) + var(--widget-safe-top));
+      right: calc(var(--right) + var(--widget-safe-right));
+      bottom: calc(var(--bottom) + var(--widget-safe-bottom));
+      left: calc(var(--left) + var(--widget-safe-left));
+      z-index: 9999;
+      max-width: fit-content;
+      display: flex;
+      align-items: center;
+      column-gap: 0.5rem;
+    }
+
+    .d-button {
+      --icon-size: calc(var(--size) * 0.4);
+
+      position: relative;
+      width: var(--size);
+      height: var(--size);
+      border: none;
+      border-bottom: 2px solid hsl(from canvastext h s l / calc(alpha * 0.5));
+      border-radius: 50%;
+      box-shadow:
+        0 1px 3px 0 hsla(210, 6%, 25%, 0.3),
+        0 4px 8px 3px hsla(210, 6%, 25%, 0.3);
+      background-color: transparent;
+      color: canvastext;
+      cursor: pointer;
+      font-size: var(--icon-size);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      user-select: none;
+      -webkit-user-select: none;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    .d-button::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      border: none;
+      background-color: canvas;
+      filter: invert(90%);
+    }
+
+    .d-button:focus-visible {
+      outline: 2px solid currentcolor;
+      outline-offset: 2px;
+    }
+
+    .d-button:active {
+      transform: scale(0.98);
+      transition: transform 0.4s ease-in-out;
+    }
+
+    .d-kbd {
+      position: relative;
+      padding: 0.25em 0.4em;
+      font-size: 11px;
+      font-family: ui-monospace, monospace;
+      line-height: 1;
+      letter-spacing: -0.025em;
+      background-color: canvas;
+      color: canvastext;
+      filter: invert(90%);
+      border: none;
+      border-bottom: 2px solid hsl(from canvastext h s l / calc(alpha * 0.5));
+      border-radius: 0.25rem;
+      box-shadow: 0 0 2px hsla(0, 0%, 0%, 0.1);
+      user-select: none;
+      -webkit-user-select: none;
+    }
+  `;
+
+  init(host: any, options: Required<ThemeWidgetOptions>): void {
+    this._host = host;
+    this.position = options.position;
+    this.size = options.size;
+    this.shortcut = options.shortcut;
+    this.theme = host.getCurrentTheme();
+  }
+
+  onThemeChange(theme: string): void {
+    this.theme = theme;
+  }
+
+  private _handleToggle(): void {
+    this._host?.toggleTheme();
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._host._elm.clearListeners();
+  }
+
+  override render() {
+    const isLeftPosition = this.position?.includes('left');
+    // TODO: add icon customization option
+    // accept custom labels/icons for light/dark themes via ThemeWidgetOptions
+    const iconContent = this.theme === 'light' ? '🌞' : '🌚';
+
+    const button = html`
+      <button
+        class="d-button"
+        aria-label="Toggle theme"
+        role="switch"
+        aria-checked=${this.theme === 'dark'}
+        @click=${this._handleToggle}
+        data-theme=${this.theme}>
+        <span class="d-icon">${iconContent}</span>
+      </button>
+    `;
+
+    const kbd = this.shortcut ? html`<kbd class="d-kbd">${this.shortcut}</kbd>` : nothing;
+
+    return html`
+      <div class="d-wrapper">${isLeftPosition ? html`${button}${kbd}` : html`${kbd}${button}`}</div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'd-widget': ThemeWidgetElement;
+  }
+}
diff --git a/src/plugins/widget/index.ts b/src/plugins/widget/index.ts
new file mode 100644
index 0000000..1d98f2d
--- /dev/null
+++ b/src/plugins/widget/index.ts
@@ -0,0 +1,31 @@
+import { type ThemeWidgetOptions, ThemeWidgetElement, pluginId } from './components';
+import type { DarkifyPlugin } from '@/types';
+
+export class ThemeWidget implements DarkifyPlugin<ThemeWidgetElement> {
+  public static readonly pluginId = pluginId;
+  public el!: ThemeWidgetElement;
+  private options: Required<ThemeWidgetOptions>;
+
+  constructor(host: any, options?: ThemeWidgetOptions) {
+    this.options = {
+      position: options?.position ?? 'bottom-right',
+      size: options?.size ?? 'medium',
+      shortcut: options?.shortcut ?? '',
+    };
+    this.el = document.createElement(pluginId);
+    this.el.init(host, this.options);
+  }
+
+  render(): ThemeWidgetElement {
+    document.body.appendChild(this.el);
+    return this.el;
+  }
+
+  onThemeChange(theme: string): void {
+    this.el.onThemeChange(theme);
+  }
+
+  onDestroy(): void {
+    this.el.remove();
+  }
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..a9e7fd8
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1 @@
+export { isBrowser } from './isBrowser';
diff --git a/src/isBrowser.ts b/src/utils/isBrowser.ts
similarity index 100%
rename from src/isBrowser.ts
rename to src/utils/isBrowser.ts
diff --git a/tsconfig.json b/tsconfig.json
index d1a3d0f..0be1226 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,8 +13,10 @@
     "noEmitOnError": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "lib": ["ES2022", "DOM"],
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "lib": ["ES2022", "DOM"]
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"],
+  "exclude": ["node_modules", "dist"]
 }