rstudio / distill

Distill for R Markdown
https://rstudio.github.io/distill/
Apache License 2.0
423 stars 57 forks source link

dark code syntax themes are not "dark" #327

Open rmflight opened 3 years ago

rmflight commented 3 years ago

I went to the trouble of figuring out a dark theme for my distill blog, and I selected "breezedark" as the code theme, which according to this page should have a dark background.

However, in this screenshot you can see that the dark background seems to get overwritten, and it's a white background. It seems to me if the user specifies a dark syntax highlighting, that it should "just work".

Screenshot from 2021-03-01 11-09-39

My blog source is: https://github.com/rmflight/researchBlog_distill

That post source is: https://github.com/rmflight/researchBlog_distill/tree/main/_posts/2021-02-28-things-i-learned-about-distill The rendered post: https://rmflight.github.io/posts/2021-02-28-things-i-learned-about-distill/

output of sessionInfo:

R version 4.0.0 (2020-04-24) Platform: x86_64-pc-linux-gnu (64-bit) Running under: Pop!_OS 20.04 LTS

Matrix products: default BLAS: /software/R-4.0.0/lib/R/lib/libRblas.so LAPACK: /software/R-4.0.0/lib/R/lib/libRlapack.so

locale: [1] LC_CTYPE=en_US.UTF-8 LC_NUMERIC=C LC_TIME=en_US.UTF-8
[4] LC_COLLATE=en_US.UTF-8 LC_MONETARY=en_US.UTF-8 LC_MESSAGES=en_US.UTF-8
[7] LC_PAPER=en_US.UTF-8 LC_NAME=C LC_ADDRESS=C
[10] LC_TELEPHONE=C LC_MEASUREMENT=en_US.UTF-8 LC_IDENTIFICATION=C

attached base packages: [1] stats graphics grDevices utils datasets methods base

other attached packages: [1] distill_1.2

loaded via a namespace (and not attached): [1] compiler_4.0.0 htmltools_0.5.1.1 tools_4.0.0 yaml_2.2.1 rmarkdown_2.6
[6] downlit_0.2.1 knitr_1.31 xfun_0.21 digest_0.6.27 rlang_0.4.10
[11] evaluate_0.14

cderv commented 3 years ago

This happens because distill is setting this CSS rule https://github.com/rstudio/distill/blob/570dcdbd406b87c507a63bf04f06f1808d1c28e9/inst/rmarkdown/templates/distill_article/resources/distill.html#L147-L149 which will overwrite the one set by the syntax highlighter

div.sourceCode {
    color: #cfcfc2;
    background-color: #232629;
}

This background white rule is hardcoded and does not depend on syntax highlight theme for now.

I believe this issue is related to https://github.com/rstudio/distill/issues/272

Also, it could be improve if theming would allow to modify this backgound color: https://rstudio.github.io/distill/website.html#theming which I don't think works today.

rmflight commented 3 years ago

It is probably related to the other, in that setting the background color on posts seems to require at least a re-render of the site for the new CSS rules to be included.

Well, I've added those colors into my theme.css file, but it does make switching syntax highlighting themes a pain.