Skip to content

[201_105] Fix unclear keyboard shortcut keys in dark mode#3130

Open
1sh-repalto wants to merge 2 commits intoMoganLab:mainfrom
1sh-repalto:1sh-repalto/201_105/tmdoc-shortcut-key-display
Open

[201_105] Fix unclear keyboard shortcut keys in dark mode#3130
1sh-repalto wants to merge 2 commits intoMoganLab:mainfrom
1sh-repalto:1sh-repalto/201_105/tmdoc-shortcut-key-display

Conversation

@1sh-repalto
Copy link
Copy Markdown
Contributor

Fixes #3114

What

Made keyboard shortcut key caps (e.g. Ctrl+V, Ctrl+Shift+V) clearly visible in dark/night mode by introducing theme-overridable color variables for the render-key macro.

Developer Document: devel/201_105.md

Why

In night mode, the render-key macro used hardcoded light gray ornament colors (#e0e0e0, #f0f0f0, #c0c0c0) with no explicit text color. The dark theme sets the global text color to white, resulting in white text on a light gray background — making the shortcut keys nearly unreadable in the default startup document and all tmdoc documentation.

How

Introduced four theme-overridable variables for the render-key macro and added dark mode overrides.

Modified TeXmacs/packages/documentation/standard/tmdoc-gui.ts and TeXmacs/packages/miscellaneous/shortcut-editor.ts:

Replaced hardcoded colors in render-key with variable references:

  • render-key-color — text color inside key caps (default: black)
  • render-key-bg-color — ornament background (default: #e0e0e0)
  • render-key-sunny-color — ornament highlight (default: #f0f0f0)
  • render-key-shadow-color — ornament shadow (default: #c0c0c0)

Modified TeXmacs/packages/themes/dark/dark.ts:

Added dark mode overrides for the key rendering variables:

  • render-key-colorwhite
  • render-key-bg-color#606060
  • render-key-sunny-color#808080
  • render-key-shadow-color#404040

How to test

  1. Open Mogan Editor.
  2. Switch to night/dark mode via Document → Theme → Dark.
  3. Open the default startup document or any tmdoc document containing keyboard shortcuts (e.g. <key|Ctrl+v>).
  4. Verify:
    • Keyboard shortcut key caps display white text on a medium-gray background.
    • The key caps are clearly readable against the dark document background.
  5. Switch back to light mode.
  6. Verify:
    • Keyboard shortcut key caps display black text on a light gray background, same as before.

After the fix

Screenshot 2026-04-13 112226 Screenshot 2026-04-13 112235

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Apr 13, 2026

Greptile Summary

本 PR 修复了暗黑模式下快捷键图标(render-key 宏)可读性问题。通过将原先的硬编码颜色替换为可主题化变量,并在 dark.ts 中添加深色模式覆盖值,解决了深色主题下白色文字叠加浅灰背景导致的低对比度问题。

Confidence Score: 5/5

此 PR 可安全合并,修复逻辑正确,不引入任何运行时错误或数据问题。

所有改动均为样式包中的颜色变量替换,默认值与原硬编码值完全一致,不影响现有亮色主题的表现;深色主题覆盖值合理,唯一发现为 P2 级别的重复定义建议,不阻碍合并。

无需特别关注的文件。

Important Files Changed

Filename Overview
TeXmacs/packages/documentation/standard/tmdoc-gui.ts 新增 4 个 render-key 颜色变量(默认值与原硬编码值一致),并将 render-key 宏更新为引用这些变量;变量默认值与 shortcut-editor.ts 完全相同(存在重复定义)。
TeXmacs/packages/miscellaneous/shortcut-editor.ts 与 tmdoc-gui.ts 相同的 4 个颜色变量及 render-key 宏更新,变量默认值完全一致,存在重复定义。
TeXmacs/packages/themes/dark/dark.ts 新增深色模式的 render-key 颜色覆盖值(白色文字、中灰背景),位置合理,颜色层次清晰。
devel/201_105.md 新增开发者文档,清晰描述了问题原因、解决方案及测试步骤。

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["render-key 宏调用"] --> B{当前主题}
    B -->|"普通 / 亮色主题"| C["render-key-color = black\nrender-key-bg-color = #e0e0e0\nrender-key-sunny-color = #f0f0f0\nrender-key-shadow-color = #c0c0c0"]
    B -->|"dark 主题"| D["render-key-color = white\nrender-key-bg-color = #606060\nrender-key-sunny-color = #808080\nrender-key-shadow-color = #404040"]
    C --> E["ornament: 黑色文字 + 浅灰背景(可读)"]
    D --> F["ornament: 白色文字 + 中灰背景(可读)"]

    style E fill:#e0e0e0,color:#000
    style F fill:#606060,color:#fff
Loading

Reviews (1): Last reviewed commit: "add developer document" | Re-trigger Greptile

Comment on lines +33 to +39
<assign|render-key-color|black>

<assign|render-key-bg-color|#e0e0e0>

<assign|render-key-sunny-color|#f0f0f0>

<assign|render-key-shadow-color|#c0c0c0>
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.

P2 变量默认值与 tmdoc-gui.ts 完全重复

render-key-colorrender-key-bg-colorrender-key-sunny-colorrender-key-shadow-color 四个变量的默认值在 tmdoc-gui.ts(第 31–37 行)和本文件中完全相同。若将来需要调整默认值,必须同步修改两处,容易遗漏。建议将这四个默认值定义提取到公共位置(如 base-colors.ts),两个文件通过 use-package 引用,从而保证单点维护。

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.

黑夜模式下,tmdoc的快捷键有点看不清楚

1 participant