Repository navigation
feat(desktop): add kebab-case editor CSS vars to themes for @muyajs/core - #4404
Merged
Merged
Conversation
Additive prep for the muyajs -> @muyajs/core editor engine swap. The new @muyajs/core engine reads kebab-case CSS custom properties (e.g. --editor-color, --theme-color, --h1-color), whereas legacy muyajs reads the themes' existing camelCase vars (--editorColor, --themeColor, --h1Color). This change is ADDITIVE and NON-BREAKING: each of the 32 *.theme.css files keeps all existing camelCase vars and gains a kebab-case block in its :root that mirrors the muya target set. The current editor ignores the kebab vars; once editor.vue switches engines they take effect. Authoritative target var set was taken from packages/muya/src/assets/styles/index.css. Mapping: each kebab var is set to var(--camelCaseSource) so it tracks the theme's value with no drift (--editorColor80 -> --editor-color-80, --floatBgColor -> --float-bg-color, --h1Color -> --h1-color, etc.). Two vars use muya's own defaults instead of a theme source: --button-border-focus (var(--button-border), matching muya) and --float-shadow (muya's literal multi-layer box-shadow, since the desktop --floatShadow is a single color wrapped at call sites and not a valid standalone box-shadow value). Verified: postcss parses all 32 files cleanly, all 41 muya kebab vars are declared in every theme with no dangling var() sources, build:unpack and desktop typecheck pass, and the diff is purely additive (0 deletions). Visual verification follows the separate editor.vue engine swap. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR prepares MarkText’s desktop themes for the ongoing migration from the legacy muyajs editor engine to @muyajs/core by adding the kebab-case CSS custom properties that @muyajs/core consumes, while preserving the existing camelCase variables used by the current editor.
Changes:
- Added a consistent kebab-case
@muyajs/coreeditor-variable block to each desktop theme’s:root. - Implemented kebab vars as
var(--camelCaseVar)aliases to avoid drift and keep current theme values authoritative. - Kept legacy camelCase variables intact (purely additive changes).
Reviewed changes
Copilot reviewed 32 out of 32 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/desktop/src/renderer/src/assets/themes/ulysses.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/tokyo-night.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/tokyo-night-storm.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/tokyo-night-light.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/synthwave-84.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/solarized-light.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/solarized-dark.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/rose-pine.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/rose-pine-moon.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/rose-pine-dawn.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/palenight.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/oxocarbon-dark.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/one-dark.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/nord.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/nightfox.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/monokai-pro.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/material-dark.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/kanagawa.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/horizon-dark.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/gruvbox-light.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/gruvbox-dark.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/graphite.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/everforest-light.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/everforest-dark.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/dracula.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/dark.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/cyberdream.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/catppuccin-mocha.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/catppuccin-latte.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/ayu-mirage.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/ayu-light.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
| packages/desktop/src/renderer/src/assets/themes/ayu-dark.theme.css | Add kebab-case editor CSS var aliases for @muyajs/core. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Build artifacts for PR #4404: Run: https://github.com/marktext/marktext/actions/runs/27130701889
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
Additive preparation for the muyajs → @muyajs/core editor engine swap (currently in progress in
editor.vue).The new
@muyajs/coreengine reads kebab-case CSS custom properties (--editor-color,--theme-color,--h1-color, …), while the legacymuyajsengine still in use reads the themes' existing camelCase vars (--editorColor,--themeColor,--h1Color, …).This PR makes every desktop theme expose both, so the variable layer is ready before the engine swap lands.
Additive & non-breaking
packages/desktop/src/renderer/src/assets/themes/*.theme.cssfiles gains a kebab-case block in its:rootthat mirrors the muya target set.util/theme.ts/themeColor.tsinjection logic,editor.vue, muya, or thethemes/export/*files (those target.markdown-body, not editor vars).Target variable set
The authoritative kebab var set (41 vars) is taken directly from
packages/muya/src/assets/styles/index.css:root(the themeable-CSS work):--theme-color,--highlight-color,--selection-color,--editor-color+-80/-50/-30/-10/-04,--editor-bg-color,--editor-area-width,--delete-color,--icon-color,--code-block-bg-color,--table-border-color,--input-bg-color, the--button-*family, the--float-*family,--link-color,--h1-color…--h6-color,--blockquote-text-color,--blockquote-border-color,--strong-color,--em-color,--list-marker-color,--hr-color.Mapping
Each kebab var is set to
var(--camelCaseSource)so it tracks the theme's value with no drift:--editorColor/--editorColor80/50/30/10/04--editor-color/--editor-color-80/50/30/10/04--themeColor,--highlightColor,--selectionColor--theme-color,--highlight-color,--selection-color--editorBgColor,--editorAreaWidth--editor-bg-color,--editor-area-width--codeBlockBgColor,--tableBorderColor,--inputBgColor--code-block-bg-color,--table-border-color,--input-bg-color--button{FontColor,BgColor,Border,BgColorHover,BorderHover,BgColorActive,BorderActive}--button-{font-color,bg-color,border,bg-color-hover,border-hover,bg-color-active,border-active}--float{BgColor,HoverColor,BorderColor}--float-{bg-color,hover-color,border-color}--linkColor,--h1Color…--h6Color--link-color,--h1-color…--h6-color--blockquoteTextColor,--blockquoteBorderColor,--hrColor--blockquote-text-color,--blockquote-border-color,--hr-color--strongColor,--emColor,--listMarkerColor,--deleteColor,--iconColor--strong-color,--em-color,--list-marker-color,--delete-color,--icon-colorTwo vars use muya's own defaults rather than a theme source (no clean single source var exists):
--button-border-focus: var(--button-border)— matches muya's default.--float-shadow:muya's literal multi-layer box-shadow. The desktop--floatShadowis a single color wrapped at call sites (0 4px 8px 0 var(--floatShadow)), so it is not a valid standalonebox-shadowvalue; using muya's default literal keeps muya's intended look and a valid value in every theme.Verification
postcss.parse— all 32 files parse cleanly.var()sources.pnpm run build:unpack— passes (themes still bundle).pnpm -C packages/desktop run typecheck— clean (unaffected, CSS-only).🤖 Generated with Claude Code