search

pulsar-edit / pulsar

A Community-led Hyper-Hackable Text Editor
https://pulsar-edit.dev
Other
3.33k stars 140 forks source link

[markdown-preview] Add dark mode for GitHub-style preview #973

Closed savetheclocktower closed 7 months ago

savetheclocktower commented 7 months ago

This PR can wait until after 1.116. I’m opening it right now because I’ll forget about it otherwise.

Description of the Change

I got annoyed the other night when I previewed a Markdown file and got a bright-mode preview even though my OS was in dark mode. I’m using GitHub’s CSS in markdown-preview, but we don’t support dark mode here even though the GitHub website does.

The github-markdown-css package does a good job of providing up-to-date styles for showing Markdown the way GitHub does, so I pulled it in and wrote a script to handle transforming it into the CSS we need for all the permutations of dark and light modes — explicitly dark, explicitly light, and system default (using the prefers-reduced-motion media query).

The data-use-github-style attribute on the root element was already being used to toggle between GitHub styles and default styles; I just made it so that the attribute value determines which theme mode we’re in — light, dark, or auto. Changing the setting updates the preview immediately.

Alternate Designs

Previously we were using a stylesheet derived from GitHub’s own primer package. I don't know how it was delivered in the past, but recent versions of primer deliver those same styles as SCSS files. The process of adapting those styles for our own use would be more elaborate and prone to breakage.

The github-markdown-css package, despite being third-party, is quite popular on NPM and has a prolific maintainer with a good reputation. If GitHub’s CSS changes in the future, there’ll be a new version of github-markdown-css, and we’ll be able to update our own styles by re-running the generate-github-markdown-css task.

Possible Drawbacks

Not sure there are any. Sound off in the comments!

Verification Process

Check out the PR.

Since the default is still the non-GitHub styles, the first time you check the Use GitHub.com Styles option, you’ll be put into GitHub mode and your preview should adopt whatever styles are appropriate for your OS’s mode — either light or dark. That’s because “System Default” is the default value for GitHub.com Style Mode.

Changing the value for GitHub.com Style Mode should update your preview immediately.

I also tweaked some typographical errors in the config schema and rewrote some parts of the README.

Release Notes

savetheclocktower commented 7 months ago

Thanks! If there are any regressions, we'll have plenty of time to fix them before 1.117.