Skip to content

feat: add auto theme functionality to OverType editor#100

Open
dido739 wants to merge 9 commits intopanphora:mainfrom
dido739:main
Open

feat: add auto theme functionality to OverType editor#100
dido739 wants to merge 9 commits intopanphora:mainfrom
dido739:main

Conversation

@dido739
Copy link

@dido739 dido739 commented Feb 13, 2026

Hi guys. Yesterday I stumbled upon #84 and decided to do something.
This is what I did:

  • Implemented auto theme switching based on system color scheme preference.
  • Added auto theme to themes registry, defaulting to solar colors.
  • Enhanced setTheme method to handle auto theme and resolved theme application.
  • Introduced media query listeners for real-time theme updates.
  • Updated example pages to demonstrate auto theme functionality.
  • Created tests for auto theme behavior at both instance and global levels.
    Screenshots form the auto theme:
  • dark system:
image
  • white system:
image Feel free to use this or not.

P.S. Unfortunately the size increased from ~95KB to ~98KB. It could probably be optimized. I'm open to suggestions.


Summary by cubic

Adds an auto theme that matches the system light/dark setting and switches in real time. Works per-instance and globally via OverType.setTheme('auto'), with optimized listeners, DOM updates, and web component refreshes.

  • New Features
    • 'auto' resolves to 'solar' or 'cave' via prefers-color-scheme; real-time switching with a shared matchMedia listener and cleanup on destroy
    • setTheme supports 'auto' at instance and global levels; applies data-theme='auto' and data-resolved-theme; web components refresh correctly
    • Helpers: resolveAutoTheme(), getSystemColorScheme(); internal _updateThemeAttrs syncs DOM
    • New example page and Playwright tests; README/CHANGELOG updated
    • Bundle: min build reduced by ~10KB; final size ~97KB after optimizations

Written for commit f8d77e3. Summary will update on new commits.

- Implemented auto theme switching based on system color scheme preference.
- Added `auto` theme to themes registry, defaulting to solar colors.
- Enhanced `setTheme` method to handle auto theme and resolved theme application.
- Introduced media query listeners for real-time theme updates.
- Updated example pages to demonstrate auto theme functionality.
- Created tests for auto theme behavior at both instance and global levels.
Copilot AI and others added 6 commits February 13, 2026 15:23
Co-authored-by: dido739 <152557154+dido739@users.noreply.github.com>
Co-authored-by: dido739 <152557154+dido739@users.noreply.github.com>
Co-authored-by: dido739 <152557154+dido739@users.noreply.github.com>
Co-authored-by: dido739 <152557154+dido739@users.noreply.github.com>
Co-authored-by: dido739 <152557154+dido739@users.noreply.github.com>
…-size

Optimize auto theme bundle size by 0.90 KB
@dido739
Copy link
Author

dido739 commented Feb 13, 2026

Update: After some work with Copilot I've managed to save ~0.9KB, using some optimizations.
List here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants