Skip to content

Add "themeName": "auto" to follow the app theme - #168

Open
akurach wants to merge 1 commit into
MarkEdit-app:mainfrom
akurach:auto-theme
Open

akurach wants to merge 1 commit into
MarkEdit-app:mainfrom
akurach:auto-theme

Conversation

@akurach

@akurach akurach commented Aug 18, 2026

Copy link
Copy Markdown

Implements #167.

With "themeName": "auto", the preview resolves its theme from the app's current theme (MarkEdit.editorConfig.theme) instead of a fixed name:

  • The -light/-dark/-dawn suffix is stripped to get the preview theme name — every built-in app theme maps onto an existing preview theme, so no new CSS is needed.
  • The suffix also pins the color scheme (applied in coreCss/previewThemeCss/alertsCss/hljsCss), so xcode-dark keeps the preview dark under a light system appearance. Suffix-less app themes (dracula, cobalt, night-owl, synthwave84, rose-pine) are treated as dark. rose-pine-dawn maps to rose-pine light.
  • Since the app theme can change at runtime and there is no change notification for extensions, the theme/hljs style sheets are refreshed on each preview render and (with a small delay, matching the app's own switch) on prefers-color-scheme changes. Explicitly configured theme names behave exactly as before.
  • Search-match highlight colors follow the resolved theme as well.

Default behavior is unchanged: themeName still defaults to github, "none" still renders raw HTML.

Tests: added tests/theme.auto.test.ts covering the mapping (suffixed, suffix-less, rose-pine-dawn, missing config). yarn lint passes; the full test suite shows the same 15 pre-existing failures as main in my environment (Node 26, localStorage-related), with no new ones.

Comment thread src/view.ts
* With `"themeName": "auto"`, the css depends on the app's current theme,
* which can change at runtime; refresh it whenever the preview updates.
*/
function refreshThemeStyles() {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The way we refresh doesn't seem to be optimal, I can add a new onEditorThemeChange event to markedit-api so we safely refresh the theme.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed — an official onEditorThemeChange in markedit-api would be much cleaner than refreshing on render. If you add it, I'll switch this PR to subscribe to the event (keeping the render-time refresh only as a fallback for older app versions, or dropping it entirely if you prefer a minimum-version requirement).

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@akurach I've added onEditorConfigChange: MarkEdit-app/MarkEdit-api@501a167 The main branch of this repo integrated the new types. MarkEdit.editorConfig is also strictly typed.

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