Skip to content

fix(desktop): theme the table of contents text and arrows (#5094) - #5486

Merged
Jocs merged 1 commit into
developfrom
fix/5094-toc-text-theming
Sep 21, 2026
Merged

Jocs merged 1 commit into
developfrom
fix/5094-toc-text-theming

Conversation

@Jocs

@Jocs Jocs commented Sep 21, 2026

Copy link
Copy Markdown
Member

Closes #5094.

Reproduced

The outline panel renders the same gray on every theme. On material-dark the
label color computes to rgb(96, 98, 102) while the panel's themed color is
rgba(255, 255, 255, 0.6) — dark gray text on a dark background.

Sampling the reporter's screenshots confirms the same values: the TOC text is
#606266 in both their light and dark captures, while the sidebar file tree
text tracks the theme (#a9abae on material-dark, i.e. --sideBarColor
composited over --sideBarBgColor).

Root cause

Element Plus renders each tree node label as
<span class="el-text is-truncated el-tree-node__label">, and .el-text
declares a color of its own:

.el-text {
  --el-text-color: var(--el-text-color-regular); /* #606266 */
  color: var(--el-text-color);
}

toc.vue only sets color: var(--sideBarColor) on .side-bar-toc .el-tree, so
the label inherited the themed color — and an own color declaration always
beats an inherited one, whatever the specificity of the ancestor rule. The
expand arrow has the same problem through --el-tree-expand-icon-color
(--el-text-color-placeholder), while the sidebar file tree — a hand-rolled
component rather than an el-tree — colors its arrows with --sideBarIconColor.
That is exactly why the file tree looked right and the outline did not.

Fix

Two rules in toc.vue: let the label inherit the panel color again, and point
the expand arrow at --sideBarIconColor. Leaf arrows stay invisible — Element
hides them with visibility: hidden, not only with a transparent color.

Verification

New e2e spec test/e2e/issue-5094-toc-theming.spec.ts asserts, on both a dark
and a light theme, that the label color equals the panel's themed color, that
the arrow equals --sideBarIconColor, that neither is Element's
rgb(96, 98, 102), and that the color actually changes between the two themes.
It fails on develop with Expected: "rgba(255, 255, 255, 0.6)" / Received: "rgb(96, 98, 102)" and passes with the fix.

pnpm run lint (0 errors), pnpm run typecheck, and the TOC / theme /
layout e2e specs (17 tests) all pass.

🤖 Generated with Claude Code

Element Plus renders every `el-tree` node label inside an `<el-text>`, which
declares `color: var(--el-text-color)` (#606266) on the label itself. That beats
the themed color the label only *inherits* from `.side-bar-toc .el-tree`, so the
outline stayed the same gray on every theme — unreadable on dark ones. The
expand arrow had the same problem via --el-tree-expand-icon-color, while the
sidebar file tree (a hand-rolled component, not el-tree) colors its arrows with
--sideBarIconColor.

Let the label inherit the panel color again and point the arrow at the sidebar
icon color, so the outline matches the file tree the report compares it to.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown
Contributor

Build artifacts for PR #5486:

Run: https://github.com/marktext/marktext/actions/runs/35591552997

Artifact Size Link
marktext-macos-arm64 287.5 MB Download
marktext-macos-x64 297.9 MB Download
marktext-windows-arm64 279.5 MB Download
marktext-linux 638.5 MB Download
marktext-windows-x64 287.7 MB Download

@Jocs
Jocs merged commit 0cd8b5f into develop Sep 21, 2026
11 checks passed
@Jocs
Jocs deleted the fix/5094-toc-text-theming branch September 21, 2026 13:25
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.

[Bug] Table of Contents needs text theming

1 participant