Jocs · Jun 8, 2026 · Jun 8, 2026 · Jun 8, 2026 · Jun 8, 2026
diff --git a/packages/muya/src/assets/styles/blockSyntax.css b/packages/muya/src/assets/styles/blockSyntax.css
@@ -4,7 +4,7 @@
 
 .mu-container {
     box-sizing: border-box;
-    max-width: 800px;
+    max-width: var(--editor-area-width, 800px);
     min-height: 100%;
     margin: 0 auto;
     padding: 0 50px 100px;
@@ -43,26 +43,32 @@
 }
 
 .mu-container h1 {
+    color: var(--h1-color, var(--editor-color-80));
     font-size: 1.875em;
 }
 
 .mu-container h2 {
+    color: var(--h2-color, var(--editor-color-80));
     font-size: 1.5em;
 }
 
 .mu-container h3 {
+    color: var(--h3-color, var(--editor-color-80));
     font-size: 1.375em;
 }
 
 .mu-container h4 {
+    color: var(--h4-color, var(--editor-color-80));
     font-size: 1.25em;
 }
 
 .mu-container h5 {
+    color: var(--h5-color, var(--editor-color-80));
     font-size: 1.125em;
 }
 
 .mu-container h6 {
+    color: var(--h6-color, var(--editor-color-80));
     font-size: 1em;
 }
 
@@ -74,7 +80,7 @@
     margin-left: 0;
     padding: 0 1em;
 
-    color: var(--editor-color-50);
+    color: var(--blockquote-text-color, var(--editor-color-50));
 
     font-size: 1em;
 }
@@ -88,7 +94,7 @@
     width: 3px;
     height: calc(100% - 1em);
 
-    background: var(--editor-color-30);
+    background: var(--blockquote-border-color, var(--editor-color-30));
 
     content: '';
 }
@@ -111,7 +117,7 @@
     width: 100%;
     height: 1px;
 
-    background: var(--editor-color-10);
+    background: var(--hr-color, var(--editor-color-10));
 
     content: '';
 }
@@ -311,6 +317,13 @@ ul.mu-bullet-list {
     list-style: disc outside none;
 }
 
+/* list markers — default to `inherit` (current text color) so the bundled
+   light theme is unchanged; themes can recolor the bullets / numbers. */
+ol.mu-order-list > li::marker,
+ul.mu-bullet-list > li::marker {
+    color: var(--list-marker-color, inherit);
+}
+
 ul.mu-bullet-list:first-child,
 ol.mu-order-list:first-child {
     margin-top: 0;
@@ -580,6 +593,33 @@ figure.mu-math-block div.mu-math-preview > svg {
     width: 100%;
 }
 
+/* Diagram SVG recoloring — port of marktext's legacy theme block
+   (packages/muyajs/themes/default.css `figure[data-role] svg …`, ~lines
+   689-720) adapted to muya's DOM and kebab-cased vars. Mermaid and
+   vega-lite render an inline <svg> inside `.mu-diagram-preview`; these
+   rules rewrite the renderer's default black-on-white fills/strokes to the
+   editor's theme colors so diagrams follow the active theme (including
+   dark themes that override `--editor-bg-color` / `--editor-color`).
+   Additive and entirely theme-driven — on the bundled light theme
+   `--editor-bg-color` is white and `--editor-color` is the editor text
+   color, matching the diagrams' original look. */
+figure.mu-diagram-block .mu-diagram-preview svg rect[fill='#ffffff'],
+figure.mu-diagram-block .mu-diagram-preview svg path[fill='#ffffff'] {
+    fill: var(--editor-bg-color);
+}
+
+figure.mu-diagram-block .mu-diagram-preview svg text[fill='#000000'],
+figure.mu-diagram-block .mu-diagram-preview svg path[fill='#000000'],
+figure.mu-diagram-block .mu-diagram-preview svg use[fill='black'],
+figure.mu-diagram-block .mu-diagram-preview svg use[fill='#000000'] {
+    fill: var(--editor-color);
+}
+
+figure.mu-diagram-block .mu-diagram-preview svg rect[stroke='#000000'],
+figure.mu-diagram-block .mu-diagram-preview svg path[stroke='#000000'] {
+    stroke: var(--editor-color);
+}
+
 figure.mu-active.mu-math-block > div.mu-math-preview,
 figure.mu-active.mu-diagram-block > div.mu-diagram-preview {
     position: absolute;

diff --git a/packages/muya/src/assets/styles/index.css b/packages/muya/src/assets/styles/index.css
@@ -10,6 +10,9 @@
     --editor-color-10: rgb(0 0 0 / 10%);
     --editor-color-04: rgb(0 0 0 / 3%);
     --editor-bg-color: rgb(255 255 255 / 100%);
+
+    /* width of the centered editing column (`.mu-container` max-width) */
+    --editor-area-width: 800px;
     --delete-color: #ff6969;
     --icon-color: #6b737b;
     --code-block-bg-color: rgb(0 0 0 / 3%);
@@ -20,10 +23,35 @@
     --button-border: 1px solid #dcdfe6;
     --button-bg-color-hover: linear-gradient(#f9f9f9, #f2f2f2);
     --button-border-hover: var(--button-border);
+
+    /* active / focus button variants — default to the resting button look so
+       the bundled light theme is unchanged; desktop themes can override. */
+    --button-bg-color-active: var(--button-bg-color);
+    --button-border-active: var(--button-border);
+    --button-border-focus: var(--button-border);
     --float-bg-color: #fff;
     --float-hover-color: rgb(0 0 0 / 4%);
     --float-border-color: rgb(0 0 0 / 10%);
     --float-shadow: rgb(15 15 15 / 3%) 0 0 0 1px, rgb(15 15 15 / 4%) 0 3px 6px, rgb(15 15 15 / 5%) 0 9px 24px;
+
+    /* markdown element colors — defaults mirror the current hardcoded /
+       opacity-tier values so the bundled light theme renders identically.
+       Consumers override them per theme. The desktop themes currently use
+       camelCase names (e.g. --linkColor, --h1Color); they will be migrated
+       to these kebab-case names as part of the muyajs -> @muyajs/core move. */
+    --link-color: rgb(20 86 240);
+    --h1-color: var(--editor-color-80);
+    --h2-color: var(--editor-color-80);
+    --h3-color: var(--editor-color-80);
+    --h4-color: var(--editor-color-80);
+    --h5-color: var(--editor-color-80);
+    --h6-color: var(--editor-color-80);
+    --blockquote-text-color: var(--editor-color-50);
+    --blockquote-border-color: var(--editor-color-30);
+    --strong-color: inherit;
+    --em-color: inherit;
+    --list-marker-color: inherit;
+    --hr-color: var(--editor-color-10);
 }
 
 /*

diff --git a/packages/muya/src/assets/styles/inlineSyntax.css b/packages/muya/src/assets/styles/inlineSyntax.css
@@ -17,7 +17,7 @@
 /* link and auto-link and reference link */
 a.mu-inline-rule,
 span.mu-inline-rule.mu-link {
-    color: rgb(20 86 240);
+    color: var(--link-color, rgb(20 86 240));
 }
 
 /* Note: previously this rule also set `pointer-events: none` to suppress
@@ -31,6 +31,16 @@ span.mu-inline-rule.mu-link {
     color: var(--editor-color-50);
 }
 
+/* strong and emphasis — default to `inherit` (the surrounding editor color)
+   so the bundled light theme is unchanged; themes can recolor them. */
+strong.mu-inline-rule {
+    color: var(--strong-color, inherit);
+}
+
+em.mu-inline-rule {
+    color: var(--em-color, inherit);
+}
+
 /* inline code */
 code.mu-inline-rule {
     margin: 0;