LearnNewsExamplesServices
Frontmatter
id8750
titleRefactor Markdown SCSS for Theming
stateClosed
labels
designairefactoring
assigneestobiu
createdAtJan 17, 2026, 6:32 AM
updatedAtJan 17, 2026, 6:39 AM
githubUrlhttps://github.com/neomjs/neo/issues/8750
authortobiu
commentsCount1
parentIssue8727
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtJan 17, 2026, 6:39 AM

Refactor Markdown SCSS for Theming

Closed v11.23.0 designairefactoring
tobiu
tobiu commented on Jan 17, 2026, 6:32 AM

Refactor resources/scss/src/component/Markdown.scss to use CSS variables for theming.

Tasks:

  1. Create resources/scss/theme-neo-light/component/Markdown.scss and define CSS variables matching the current hardcoded values (ensuring zero visual regression for light theme).
  2. Create resources/scss/theme-neo-dark/component/Markdown.scss and define CSS variables mapped to dark theme semantic tokens.
  3. Update resources/scss/src/component/Markdown.scss to replace hardcoded values with these variables.

Hardcoded values to replace:

  • Backgrounds (white, #f8f8f8)
  • Text colors (#3E63DD, #555, #c4c4c4)
  • Borders (lightgray)
  • Shadows
tobiu added the design label on Jan 17, 2026, 6:32 AM
tobiu added the ai label on Jan 17, 2026, 6:32 AM
tobiu added the refactoring label on Jan 17, 2026, 6:32 AM
tobiu added parent issue #8727 on Jan 17, 2026, 6:33 AM
tobiu assigned to @tobiu on Jan 17, 2026, 6:33 AM
tobiu referenced in commit a339743 - "refactor: Enable theming for Markdown component (#8750)" on Jan 17, 2026, 6:38 AM
tobiu
tobiu Jan 17, 2026, 6:39 AM

Input from Gemini 3 Pro:

✦ I have refactored the Markdown component SCSS to enable theming.

Changes:

  1. Refactoring: resources/scss/src/component/Markdown.scss now uses CSS variables instead of hardcoded hex values.
  2. Light Theme: Created resources/scss/theme-neo-light/component/Markdown.scss with mappings that preserve the original look and feel (zero visual regression).
  3. Dark Theme: Created resources/scss/theme-neo-dark/component/Markdown.scss with mappings to dark semantic tokens.
    • Backgrounds use bg-neutral tokens.
    • Text and accents use text-primary (Purple/Blue) to align with the Neo identity.
    • Corrected an issue where bg-neutral-hover was resolving to a light color in dark theme by using bg-neutral-highlighted instead.
tobiu closed this issue on Jan 17, 2026, 6:39 AM