{{ message }}
Repository navigation
feat(muya): expose themeable CSS variables and diagram theming - #4382
Merged
Merged
Conversation
Introduce CSS custom properties so desktop's 32 themes can later drive muya's editor chrome (part of the muyajs -> @muyajs/core migration). Each new variable defaults to muya's current hardcoded / opacity-tier value via `var(--name, <fallback>)`, so the bundled light theme renders identically. Added in index.css `:root`: - --editor-area-width (800px) for `.mu-container` max-width - --link-color (rgb(20 86 240)) - --h1-color .. --h6-color (var(--editor-color-80)) - --blockquote-text-color (var(--editor-color-50)) - --blockquote-border-color (var(--editor-color-30)) - --hr-color (var(--editor-color-10)) - --strong-color / --em-color / --list-marker-color (inherit) - --button-bg-color-active / --button-border-active / --button-border-focus Usage sites updated in blockSyntax.css (container width, per-heading colors, blockquote text + border, thematic break, list markers) and inlineSyntax.css (link color, strong + em color). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Port marktext's legacy diagram-recoloring rules (packages/muyajs/themes/ default.css `figure[data-role] svg …`) into muya's blockSyntax.css, adapted to muya's live DOM (`figure.mu-diagram-block .mu-diagram-preview svg`) and kebab-cased vars (`--editor-bg-color`, `--editor-color`). Mermaid and vega-lite render an inline <svg> whose default black-on-white fills/strokes are rewritten to the editor's theme colors, so diagrams follow the active theme (including dark themes that override those vars). Additive and entirely theme-driven; the bundled light theme is unchanged because `--editor-bg-color` is white and `--editor-color` is the editor text color, matching the diagrams' original look. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR makes Muya’s editor CSS themeable by introducing CSS custom properties (with fallbacks preserving current light-theme rendering) and adds theme-driven recoloring rules for inline diagram SVGs so diagrams follow the active editor theme.
Changes:
- Introduces new
:rootCSS variables (e.g. editor width, link/heading/blockquote/list-marker colors, button active/focus hooks) intended for theme overrides. - Updates inline and block syntax styles to consume the new variables via
var(--name, <fallback>). - Adds diagram
<svg>fill/stroke overrides inblockSyntax.cssto recolor default black/white diagram output using--editor-bg-color/--editor-color.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/muya/src/assets/styles/index.css | Defines new themeable CSS custom properties (defaults) for editor layout and markdown element colors. |
| packages/muya/src/assets/styles/inlineSyntax.css | Switches link color to a CSS variable and adds theme hooks for strong/em emphasis colors. |
| packages/muya/src/assets/styles/blockSyntax.css | Makes container width and element colors themeable; adds list marker theming and diagram SVG recoloring rules. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+37
to
+39
Member
Author
There was a problem hiding this comment.
Good catch — corrected in a0dbcad. The comment no longer implies the desktop themes already use kebab-case; it now notes they currently use camelCase (--linkColor, --h1Color, …) and will be migrated to these kebab-case names as part of the muyajs → @muyajs/core move (the theme-migration stage). The variable defaults here are unchanged, so the bundled light theme still renders identically.
Address Copilot review on #4382. The comment implied the desktop themes already use kebab-case overrides, but they currently use camelCase (--linkColor, --h1Color, …). Clarify that consumers override per theme and that the desktop themes will be migrated to these kebab-case names as part of the muyajs -> @muyajs/core move. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
Part of the muyajs → @muyajs/core migration: makes
packages/muya's CSSthemeable so the desktop app's 32 themes can later drive it via CSS custom
properties (the same way the legacy
packages/muyajsengine is themed today).Scope is strictly CSS under
packages/muya/src/assets/styles/— no.tsfilestouched. The default light theme renders identically: every new variable is
applied as
var(--name, <fallback>)where the fallback is muya's exact currenthardcoded / opacity-tier value, so nothing changes visually until a theme
overrides a variable.
C1 — themeable CSS custom properties
New variables defined in
index.css:root(defaults in parentheses) and usedat their call sites:
--editor-area-width800px.mu-containermax-width--link-colorrgb(20 86 240)a.mu-inline-rule,span.mu-inline-rule.mu-link--h1-color…--h6-colorvar(--editor-color-80).mu-container h1…h6--blockquote-text-colorvar(--editor-color-50).mu-container blockquote--blockquote-border-colorvar(--editor-color-30).mu-container blockquote::before--hr-colorvar(--editor-color-10).mu-thematic-break::before--strong-colorinheritstrong.mu-inline-rule--em-colorinheritem.mu-inline-rule--list-marker-colorinherit::marker--button-bg-color-activevar(--button-bg-color):root(theme hook)--button-border-activevar(--button-border):root(theme hook)--button-border-focusvar(--button-border):root(theme hook)Notes:
strong/em/list markers previously had no explicit color (they inheritthe editor color). Defaulting the new vars to
inheritkeeps that behaviorexactly while giving themes a recolor hook.
:active/:focusbutton styles in these files, so thebutton active/focus vars are added as
:roothooks (defaulting to the restingbutton look) for desktop-theme parity rather than rewriting nonexistent rules.
(
--h1Color,--blockquoteTextColor,--linkColor,--editorAreaWidth, …),kebab-cased to match muya's convention, so the eventual wiring is 1:1.
C2 — diagram SVG per-theme recoloring
Ported marktext's legacy block (
packages/muyajs/themes/default.cssfigure[data-role] svg …, ~lines 689-720) intoblockSyntax.css, adapted tomuya's live DOM (
figure.mu-diagram-block .mu-diagram-preview svg) andkebab-cased vars (
--editor-bg-color,--editor-color). Mermaid and vega-literender an inline
<svg>whose default black-on-whitefill/strokevalues arerewritten to the editor's theme colors, so diagrams follow the active theme —
including dark themes that override those two vars. The rules are additive and
entirely theme-driven; on the bundled light theme
--editor-bg-coloris whiteand
--editor-coloris the editor text color, so diagrams look unchanged.Verification
pnpm -C packages/muya lint:types— passpnpm -C packages/muya build— passpnpm -C packages/muya test— 388 passedpnpm -C packages/muya test:spec— 1347 passedpnpm -C packages/muya lint(ESLint, CI-gated) — 0 errors🤖 Generated with Claude Code