denobyexample icon indicating copy to clipboard operation
denobyexample copied to clipboard

A simple dark theme support

Open kLiHz opened this issue 1 year ago • 0 comments

This PR is based on #129. If #129 should be merged, this branch is supposed to be rebased on it.

I add some dark theme support (automatically reads user's preference, and without a manual toggle switch), possibly solves #114.

I noticed that the CSS for highlighted code blocks was from gfm module. So I think I should continue to use gfm for code blocks under dark theme, and it does have dark theme support.

Syntax highlights were successful since colors applied to both .markdown-body .highlight .token.keyword and .gfm-highlight .token.keyword and our code block matches the later one.

However gfm's dark theme overrides for color variables fails unless we add

data-color-mode="auto"
data-light-theme="light"
data-dark-theme="dark"

to the element. And since syntax highlighting's default color only applies to .markdown-body .highlight pre and .markdown-body pre, which means if we'd like to reuse gfm's CSS rules without modifying gfm itself, the code block needs to be a child of .markdown-body.

However being a child of .markdown-body brings in some other CSS rules. I override its padding and background-color using inline style attribute, which fix things a little, but other rules the font-size, line-height and overflow set by text-sm and sm:overflow-hidden was also overridden by rules for .markdown-body in gfm.css. Luckily, these changes seems to be subtle.

kLiHz avatar May 02 '24 11:05 kLiHz