Skip to content

Fix markdown preview styling for dark theme

Himanshu Kapoor requested to merge 214239-dark-theme-markdown into master

What does this MR do?

Issue: #214239 (closed)

Markdown preview needed a couple of adjustments in the Web IDE dark theme, especially around borders and some styling that looked quite contrasting to the main text color.

Test out on sample project here: https://gitlab.com/-/ide/project/himkp/sample-files/blob/master/-/files/sample.md

This feature is behind a feature flag. To test:

In the rails console (rails c), enter the following command to enable your feature flag

Feature.enable(:webide_dark_theme)

Screenshots

Area Before After Change
h1, h2, blockquote Screenshot_2020-04-27_at_5.28.56_PM Screenshot_2020-04-27_at_5.26.22_PM border-color: $background
code Screenshot_2020-04-27_at_5.29.01_PM Screenshot_2020-04-27_at_5.26.30_PM background-color: $background; color: $text-color
pre Screenshot_2020-04-27_at_5.29.08_PM Screenshot_2020-04-27_at_5.26.42_PM border-color: $background
diff text Screenshot_2020-04-27_at_5.29.15_PM Screenshot_2020-04-27_at_5.26.47_PM Matched dark theme Monaco colors
Table Screenshot_2020-04-27_at_5.29.22_PM Screenshot_2020-04-27_at_5.27.06_PM color: $text-color; border-color: $background, th -> background-color: $border-color
Mermaid charts Screenshot_2020-04-30_at_3.37.48_PM Screenshot_2020-04-30_at_3.36.52_PM Switched to dark theme for mermaid charts

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team
Edited by Yorick Peterse

Merge request reports