automatic theme detection from the system

[fab2713]

Hey,

When all our project is already detecting the system theme using CSS media queries, it might be useful for Overtype to do the same.
So, it would therefore be interesting to add a new theme named auto for example which could automatically switch between solar and cave themes depending on the system configuration.
On my side, i use something like this to do it manually:

const isDarkThemeQuery = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
const defaultTheme = isDarkThemeQuery && isDarkThemeQuery.matches ? "cave" : "solar";

const [editor] = new OverType(".overtype-editor", {
  theme: defaultTheme,
});

if (isDarkThemeQuery) {
    isDarkThemeQuery.addEventListener("change", event => {
        editor.setTheme(event.matches ? "cave" : "solar");
    });
}

Feel free to adapt and include this or not.

Thank you for this project.

[oooo-ps]

Thanks for solution, is there no plans to make this feature out of the box?

[dido739]

Hey guys i've done something for your case.
If you want check out #100.

[panphora]

Implemented in v2.2.0. Pass theme: 'auto' to follow the OS color scheme — the editor listens for prefers-color-scheme changes and swaps between solar/cave in real-time.