Skip to content

fix(code): make markdown preview readable in light mode#2507

Open
kohanyirobert wants to merge 1 commit intonoctalia-dev:mainfrom
kohanyirobert:fix/markdown-preview-readability
Open

fix(code): make markdown preview readable in light mode#2507
kohanyirobert wants to merge 1 commit intonoctalia-dev:mainfrom
kohanyirobert:fix/markdown-preview-readability

Conversation

@kohanyirobert
Copy link
Copy Markdown

@kohanyirobert kohanyirobert commented Apr 20, 2026

Motivation

Markdown preview in VSCode/VSCodium is hard to read when the Noctalia palette is in light mode: the theme template hardcodes "type": "dark", so VSCode uses dark-theme fallbacks for UI elements the theme doesn't explicitly color (including blockquotes and inline code backgrounds). The result is dark-on-dark or low-contrast text inside blockquote / code-block regions even when the rest of the editor is on a light surface.

This PR makes the VSCode template honor the current Noctalia mode and explicitly colors the markdown-preview surfaces from the palette.

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Refactoring

Related Issue

  • Closes # (none)

Changes

Assets/Templates/code.json:

  • "type": "dark""type": "{{mode}}" — the template renderer already supports {{mode}} (resolved to "dark" / "light" via default_mode, see Scripts/python/src/theming/lib/renderer.py), so VSCode now picks the correct light/dark defaults.
  • Added four palette-aware keys so blockquote / inline-code / preformatted blocks match the rest of the theme instead of falling back to VSCode defaults:
    • textBlockQuote.backgroundsurface_container_low
    • textBlockQuote.borderoutline
    • textCodeBlock.backgroundsurface_container
    • textPreformat.foregroundon_surface

Testing

  • Tested on niri
  • Tested on Hyprland
  • Tested on sway
  • Tested with different bar positions and density settings
  • Tested at different interface scaling values
  • Tested with multiple monitors (if applicable)

Verified locally by applying the equivalent patch via a user template post-hook against both a wallpaper-derived light palette and the default Noctalia light scheme, then reloading the VSCode window and opening a markdown preview.

Screenshots / Videos

Annotated Markdown Kitchen Sink preview — green highlights inline blockquote, red highlights a long blockquote. All screenshots are light mode; dark mode is unchanged.

Before — wallpaper-derived light palette:
before-wallpaper-light

Before — default Noctalia light scheme:
before-default-light

After — wallpaper-derived light palette:
after-wallpaper-light

After — default Noctalia light scheme:
after-default-light

Checklist

  • Code follows project style guidelines
  • Self-reviewed my code
  • No new warnings or errors
  • Documentation or comments updated (if relevant) — N/A

Additional Notes

Dark mode is unchanged (since {{mode}} resolves to "dark" there). Only the four new color keys and the type field differ; no token colors or other UI surfaces are touched.

- Resolve theme type from {{mode}} instead of hardcoded "dark" so
  VSCode picks the correct light/dark defaults for unspecified keys.
- Add palette-aware textBlockQuote / textCodeBlock / textPreformat
  colors so markdown preview blocks track the active colorscheme
  instead of falling back to VSCode defaults.
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.

1 participant