search

quarto-dev / quarto-cli

Open-source scientific and technical publishing system built on Pandoc.
https://quarto.org
Other
3.99k stars 328 forks source link

Dark mode fixed width font on 1.4.559 has difficult-to-read background color #8568

Open cpcloud opened 10 months ago

cpcloud commented 10 months ago

Bug description

When using quarto 1.4.549 to build the ibis docs, the background color for fixed width fonts seems to have changed and is now very difficult to read given the theme's foreground font color of light green:

image

That is coming from https://pr-8201-5e936835c5e37b050988a413c3330d9a96d2d324--ibis-quarto.netlify.app/backends/bigquery which is in a PR: https://github.com/ibis-project/ibis/pull/8201

With the current website, built with quarto 1.4.339: https://ibis-project.org/backends/bigquery

image

Steps to reproduce

Hopefully the PR and links are enough to reproduce, but let me know if they aren't!

Expected behavior

I would not have expected these colors to change between versions.

Actual behavior

See above.

Your environment

Quarto check output

Quarto check for the PR (1.4.549)

``` ❯ quarto check ⚠️ The `--unstable` flag is deprecated and will be removed in Deno 2.0. Use granular `--unstable-*` flags instead. Learn more at: https://docs.deno.com/runtime/manual/tools/unstable_flags Quarto 1.4.549 [✓] Checking versions of quarto binary dependencies... warning: Use of deprecated "Deno.run()" API. This API will be removed in Deno 2. Run again with DENO_VERBOSE_WARNINGS=1 to get more details. Pandoc version 3.1.11: OK Dart Sass version 1.70.0: OK Deno version 1.40.2: OK [✓] Checking versions of quarto dependencies......OK [✓] Checking Quarto installation......OK Version: 1.4.549 Path: /nix/store/qawa1arraih4305qr8qi1j7hypb9616w-quarto-1.4.549/bin [✓] Checking tools....................OK TinyTeX: (not installed) Chromium: (not installed) [✓] Checking LaTeX....................OK Tex: (not detected) ⚠️ The `Deno.dlopen` API was used with `--unstable` flag. The `--unstable` flag is deprecated and will be removed in Deno 2.0. Use granular `--unstable-ffi` instead. Learn more at: https://docs.deno.com/runtime/manual/tools/unstable_flags [✓] Checking basic markdown render....OK [✓] Checking Python 3 installation....OK Version: 3.10.13 Path: /nix/store/2j3w11w6yldjnp28xc7pd6wp6ikan1hp-python3-3.10.13-env/bin/python3.10 Jupyter: 5.7.1 Kernels: python3 [✓] Checking Jupyter engine render....OK [✓] Checking R installation...........OK Version: 4.3.2 Path: /nix/store/cbgifhkfmfd65yx4zwxw8c9xi4g4pmz7-R-4.3.2/lib/R LibPaths: - /nix/store/5l6aw1y1iss8bdrvfc2hwy74h65grk7b-r-boot-1.3-28.1/library - /nix/store/vcr7r1v2k8kal5daprgm9ramwnk9j2q8-r-class-7.3-22/library - /nix/store/j8mp1xjlzn9bbp5jr1shdh1wd5al22yn-r-MASS-7.3-60/library - /nix/store/b7a9lx7p805zkkwsy4yzda12g0g28qjz-r-cluster-2.1.6/library - /nix/store/06dvx4kc1ba12gjqh6vqfcwl216ipqvx-r-codetools-0.2-19/library - /nix/store/6fsmv0gk3grl868v4vrnijp5wm9y8fnw-r-foreign-0.8-86/library - /nix/store/0r9mmql3l204rkgp7qggx8778qyn9c5x-r-KernSmooth-2.23-22/library - /nix/store/x6anaxb01li1dci2cf1chm906r8pqmir-r-lattice-0.22-5/library - /nix/store/ppr1d6lh84k60ky9hd8bcifa0cw0vrh0-r-Matrix-1.6-4/library - /nix/store/gbypcdkm56rhbjiajyx5pz6haafpr9c4-r-mgcv-1.9-1/library - /nix/store/97nyw12c0ikq8nm19rsy85nyfry3iv67-r-nlme-3.1-164/library - /nix/store/7gkf6ki6ldvsck1a1baysj21w1zrkzy8-r-nnet-7.3-19/library - /nix/store/rcigyi5lwwjrsxaw92ps7ygy4brlcm1d-r-rpart-4.1.23/library - /nix/store/iigxmb5lw7d06g5hbmfd922b5iwgwz7n-r-spatial-7.3-17/library - /nix/store/4w3lvyifykjyk37k3fffz85bv4ki3idj-r-survival-3.5-7/library - /nix/store/99sj77f77zpm79pvxnp97bba7b425xv6-r-dplyr-1.1.4/library - /nix/store/wapxmzvp13cj0jfv1974ds5ismfbfh95-r-cli-3.6.2/library - /nix/store/mplczdwaw7054gg9j3169d20lzaaxbvf-r-generics-0.1.3/library - /nix/store/3f9y4f3acdavya74vxklvyrfw47z6hjy-r-glue-1.6.2/library - /nix/store/4qzzymdma6kcp678k913d8z0sfwhfpk2-r-lifecycle-1.0.4/library - /nix/store/znvwx606fg2wcji6q79d3jjpzrbwgkyl-r-rlang-1.1.2/library - /nix/store/0y2jyxs37q7r04a1dk3idbrzscpzjpvc-r-magrittr-2.0.3/library - /nix/store/zjlfvhpphxs3wc76nanmhgs40r1kzhvw-r-pillar-1.9.0/library - /nix/store/ylbbs19363nsrv0gwrbgjxv5a3anvs3i-r-fansi-1.0.6/library - /nix/store/d8rzx6kry17mpjsxhwlbg6lfdsjaa76r-r-utf8-1.2.4/library - /nix/store/a6qcirgy661pab71ls1jd243fxk4amk8-r-vctrs-0.6.5/library - /nix/store/f8sf0ah7r3irpzhb2grg0wrkw0rab2dz-r-R6-2.5.1/library - /nix/store/lpmpxamrd1q7p632fqbshm82shd7vzrx-r-tibble-3.2.1/library - /nix/store/j4aa02ldbww2inm1q6qx4djs5c1ms1b5-r-pkgconfig-2.0.3/library - /nix/store/kkmc81i7bl8q90sallrmikds4shrbqx4-r-tidyselect-1.2.0/library - /nix/store/91qanr11fv2rjjcy1nk0x38s5mbs5lpb-r-withr-2.5.2/library - /nix/store/rpziq4hav8iw46vs7q1x7sdlghgibpxc-r-reticulate-1.34.0/library - /nix/store/fakfpq36fdgxslisjyflqvv6xpx8kpw8-r-here-1.0.1/library - /nix/store/rqayfwp0k7c2kmc077bclpwga1nsi4lk-r-rprojroot-2.0.4/library - /nix/store/qgx7y5sa311gp79ga71gzbv77q446j9d-r-jsonlite-1.8.8/library - /nix/store/wa3772gx0d2zaylihaylbi692970bq3l-r-png-0.1-8/library - /nix/store/xrly1x8pwnaaa715a9wqamdh999nakm1-r-rappdirs-0.3.3/library - /nix/store/rvwf0njm6wcsqp2b889vn6zd0ajn9xch-r-Rcpp-1.0.12/library - /nix/store/pmvidxsk1d2b0i59bgfxj3ih91g1gs06-r-RcppTOML-0.2.2/library - /nix/store/pwlwayayrgvghq0ws7p5sbig0xiwcnnh-r-rmarkdown-2.25/library - /nix/store/35lmmadr8a6kwhij0brl3467j9ixf6ms-r-bslib-0.6.1/library - /nix/store/mjr5amn0lvs7059csykrvc4106wsmnny-r-base64enc-0.1-3/library - /nix/store/xwp7yafzv1kssdgm8f0m2nij17p58p3m-r-cachem-1.0.8/library - /nix/store/rznsdgjf7w15p8nq1a1sbs3ncb7pqfmp-r-fastmap-1.1.1/library - /nix/store/mp0zf67yq9cklr11652lbhfjxi9nmv1d-r-htmltools-0.5.7/library - /nix/store/i85z0riasfpzx5s8rvxvnhlp187s3by4-r-digest-0.6.33/library - /nix/store/d8xwja29f69f9s6nl0fk7d97jjmm4fid-r-ellipsis-0.3.2/library - /nix/store/1nbn3yzc9fzdbglpg7n8a223pk3vidlr-r-jquerylib-0.1.4/library - /nix/store/cps9rxfjzwdvab7ibkndh58i924gfz7g-r-memoise-2.0.1/library - /nix/store/z8r19hcmihb25isk1vk0rwdjsgjg1mim-r-mime-0.12/library - /nix/store/q3f6jxc53bj54yyd2jhrb50cmq848095-r-sass-0.4.8/library - /nix/store/dq7n5l9xvbbmil692yg7ynk2qs3mk1dh-r-fs-1.6.3/library - /nix/store/bardv8vpgpx60g9a6vkkcwhqpif7qkzp-r-evaluate-0.23/library - /nix/store/3231h7n3bzbm489k33bwbm7vqdvdgv2g-r-fontawesome-0.5.2/library - /nix/store/l6q5m35d2ds8r5bf1hcng2lrqgrliy2q-r-knitr-1.45/library - /nix/store/6nhij617lwivlyh6h26s22jyv2n6j75m-r-highr-0.10/library - /nix/store/glhlcr99pf1ib251nry8v6c5swfs2ib2-r-xfun-0.41/library - /nix/store/887jzbnhz33rppkak2sx8q3fj2nqzqkj-r-yaml-2.3.8/library - /nix/store/f3qynvszpgpb0z04ssdkn8am838ssak9-r-stringr-1.5.1/library - /nix/store/a074q8gnvl0760aidzbsbyhx5wf94gdr-r-stringi-1.8.3/library - /nix/store/ck16jcb904fxxsnmm65zr914hkqq12v2-r-tinytex-0.49/library - /nix/store/vidcg9f5l1apzf8qy5gqi0giar4l4r3q-r-tidyr-1.3.0/library - /nix/store/8ffbl0y1bmpy97j08izj5xxj4b6fdfcd-r-cpp11-0.4.7/library - /nix/store/l8mvzrbx1vc6lyxlkzccc71rnsdkhrf9-r-purrr-1.0.2/library - /nix/store/cbgifhkfmfd65yx4zwxw8c9xi4g4pmz7-R-4.3.2/lib/R/library knitr: 1.45 rmarkdown: 2.25 [✓] Checking Knitr engine render......OK ```

Quarto check for ibis@main (1.4.339)

``` ❯ quarto check ⚠️ The `--unstable` flag is deprecated and will be removed in Deno 2.0. Use granular `--unstable-*` flags instead. Learn more at: https://docs.deno.com/runtime/manual/tools/unstable_flags Quarto 1.4.339 [✓] Checking versions of quarto binary dependencies... warning: Use of deprecated "Deno.run()" API. This API will be removed in Deno 2. Run again with DENO_VERBOSE_WARNINGS=1 to get more details. Pandoc version 3.1.6: OK Dart Sass version 1.70.0: OK Deno version 1.40.2: OK [✓] Checking versions of quarto dependencies......OK [✓] Checking Quarto installation......OK Version: 1.4.339 Path: /nix/store/p34i8d6ss92yxnyb78hdcc4cqlbrpx1x-quarto-1.4.339/bin [✓] Checking tools....................OK TinyTeX: (not installed) Chromium: (not installed) [✓] Checking LaTeX....................OK Tex: (not detected) ⚠️ The `Deno.dlopen` API was used with `--unstable` flag. The `--unstable` flag is deprecated and will be removed in Deno 2.0. Use granular `--unstable-ffi` instead. Learn more at: https://docs.deno.com/runtime/manual/tools/unstable_flags [✓] Checking basic markdown render....OK [✓] Checking Python 3 installation....OK Version: 3.10.13 Path: /nix/store/hn3n0dqyaww1i72dkaij2vy0ic66mz5v-python3-3.10.13-env/bin/python3.10 Jupyter: 5.7.1 Kernels: python3 [✓] Checking Jupyter engine render....OK [✓] Checking R installation...........OK Version: 4.3.2 Path: /nix/store/cbgifhkfmfd65yx4zwxw8c9xi4g4pmz7-R-4.3.2/lib/R LibPaths: - /nix/store/5l6aw1y1iss8bdrvfc2hwy74h65grk7b-r-boot-1.3-28.1/library - /nix/store/vcr7r1v2k8kal5daprgm9ramwnk9j2q8-r-class-7.3-22/library - /nix/store/j8mp1xjlzn9bbp5jr1shdh1wd5al22yn-r-MASS-7.3-60/library - /nix/store/b7a9lx7p805zkkwsy4yzda12g0g28qjz-r-cluster-2.1.6/library - /nix/store/06dvx4kc1ba12gjqh6vqfcwl216ipqvx-r-codetools-0.2-19/library - /nix/store/6fsmv0gk3grl868v4vrnijp5wm9y8fnw-r-foreign-0.8-86/library - /nix/store/0r9mmql3l204rkgp7qggx8778qyn9c5x-r-KernSmooth-2.23-22/library - /nix/store/x6anaxb01li1dci2cf1chm906r8pqmir-r-lattice-0.22-5/library - /nix/store/ppr1d6lh84k60ky9hd8bcifa0cw0vrh0-r-Matrix-1.6-4/library - /nix/store/gbypcdkm56rhbjiajyx5pz6haafpr9c4-r-mgcv-1.9-1/library - /nix/store/97nyw12c0ikq8nm19rsy85nyfry3iv67-r-nlme-3.1-164/library - /nix/store/7gkf6ki6ldvsck1a1baysj21w1zrkzy8-r-nnet-7.3-19/library - /nix/store/rcigyi5lwwjrsxaw92ps7ygy4brlcm1d-r-rpart-4.1.23/library - /nix/store/iigxmb5lw7d06g5hbmfd922b5iwgwz7n-r-spatial-7.3-17/library - /nix/store/4w3lvyifykjyk37k3fffz85bv4ki3idj-r-survival-3.5-7/library - /nix/store/99sj77f77zpm79pvxnp97bba7b425xv6-r-dplyr-1.1.4/library - /nix/store/wapxmzvp13cj0jfv1974ds5ismfbfh95-r-cli-3.6.2/library - /nix/store/mplczdwaw7054gg9j3169d20lzaaxbvf-r-generics-0.1.3/library - /nix/store/3f9y4f3acdavya74vxklvyrfw47z6hjy-r-glue-1.6.2/library - /nix/store/4qzzymdma6kcp678k913d8z0sfwhfpk2-r-lifecycle-1.0.4/library - /nix/store/znvwx606fg2wcji6q79d3jjpzrbwgkyl-r-rlang-1.1.2/library - /nix/store/0y2jyxs37q7r04a1dk3idbrzscpzjpvc-r-magrittr-2.0.3/library - /nix/store/zjlfvhpphxs3wc76nanmhgs40r1kzhvw-r-pillar-1.9.0/library - /nix/store/ylbbs19363nsrv0gwrbgjxv5a3anvs3i-r-fansi-1.0.6/library - /nix/store/d8rzx6kry17mpjsxhwlbg6lfdsjaa76r-r-utf8-1.2.4/library - /nix/store/a6qcirgy661pab71ls1jd243fxk4amk8-r-vctrs-0.6.5/library - /nix/store/f8sf0ah7r3irpzhb2grg0wrkw0rab2dz-r-R6-2.5.1/library - /nix/store/lpmpxamrd1q7p632fqbshm82shd7vzrx-r-tibble-3.2.1/library - /nix/store/j4aa02ldbww2inm1q6qx4djs5c1ms1b5-r-pkgconfig-2.0.3/library - /nix/store/kkmc81i7bl8q90sallrmikds4shrbqx4-r-tidyselect-1.2.0/library - /nix/store/91qanr11fv2rjjcy1nk0x38s5mbs5lpb-r-withr-2.5.2/library - /nix/store/rpziq4hav8iw46vs7q1x7sdlghgibpxc-r-reticulate-1.34.0/library - /nix/store/fakfpq36fdgxslisjyflqvv6xpx8kpw8-r-here-1.0.1/library - /nix/store/rqayfwp0k7c2kmc077bclpwga1nsi4lk-r-rprojroot-2.0.4/library - /nix/store/qgx7y5sa311gp79ga71gzbv77q446j9d-r-jsonlite-1.8.8/library - /nix/store/wa3772gx0d2zaylihaylbi692970bq3l-r-png-0.1-8/library - /nix/store/xrly1x8pwnaaa715a9wqamdh999nakm1-r-rappdirs-0.3.3/library - /nix/store/rvwf0njm6wcsqp2b889vn6zd0ajn9xch-r-Rcpp-1.0.12/library - /nix/store/pmvidxsk1d2b0i59bgfxj3ih91g1gs06-r-RcppTOML-0.2.2/library - /nix/store/pwlwayayrgvghq0ws7p5sbig0xiwcnnh-r-rmarkdown-2.25/library - /nix/store/35lmmadr8a6kwhij0brl3467j9ixf6ms-r-bslib-0.6.1/library - /nix/store/mjr5amn0lvs7059csykrvc4106wsmnny-r-base64enc-0.1-3/library - /nix/store/xwp7yafzv1kssdgm8f0m2nij17p58p3m-r-cachem-1.0.8/library - /nix/store/rznsdgjf7w15p8nq1a1sbs3ncb7pqfmp-r-fastmap-1.1.1/library - /nix/store/mp0zf67yq9cklr11652lbhfjxi9nmv1d-r-htmltools-0.5.7/library - /nix/store/i85z0riasfpzx5s8rvxvnhlp187s3by4-r-digest-0.6.33/library - /nix/store/d8xwja29f69f9s6nl0fk7d97jjmm4fid-r-ellipsis-0.3.2/library - /nix/store/1nbn3yzc9fzdbglpg7n8a223pk3vidlr-r-jquerylib-0.1.4/library - /nix/store/cps9rxfjzwdvab7ibkndh58i924gfz7g-r-memoise-2.0.1/library - /nix/store/z8r19hcmihb25isk1vk0rwdjsgjg1mim-r-mime-0.12/library - /nix/store/q3f6jxc53bj54yyd2jhrb50cmq848095-r-sass-0.4.8/library - /nix/store/dq7n5l9xvbbmil692yg7ynk2qs3mk1dh-r-fs-1.6.3/library - /nix/store/bardv8vpgpx60g9a6vkkcwhqpif7qkzp-r-evaluate-0.23/library - /nix/store/3231h7n3bzbm489k33bwbm7vqdvdgv2g-r-fontawesome-0.5.2/library - /nix/store/l6q5m35d2ds8r5bf1hcng2lrqgrliy2q-r-knitr-1.45/library - /nix/store/6nhij617lwivlyh6h26s22jyv2n6j75m-r-highr-0.10/library - /nix/store/glhlcr99pf1ib251nry8v6c5swfs2ib2-r-xfun-0.41/library - /nix/store/887jzbnhz33rppkak2sx8q3fj2nqzqkj-r-yaml-2.3.8/library - /nix/store/f3qynvszpgpb0z04ssdkn8am838ssak9-r-stringr-1.5.1/library - /nix/store/a074q8gnvl0760aidzbsbyhx5wf94gdr-r-stringi-1.8.3/library - /nix/store/ck16jcb904fxxsnmm65zr914hkqq12v2-r-tinytex-0.49/library - /nix/store/vidcg9f5l1apzf8qy5gqi0giar4l4r3q-r-tidyr-1.3.0/library - /nix/store/8ffbl0y1bmpy97j08izj5xxj4b6fdfcd-r-cpp11-0.4.7/library - /nix/store/l8mvzrbx1vc6lyxlkzccc71rnsdkhrf9-r-purrr-1.0.2/library - /nix/store/cbgifhkfmfd65yx4zwxw8c9xi4g4pmz7-R-4.3.2/lib/R/library knitr: 1.45 rmarkdown: 2.25 [✓] Checking Knitr engine render......OK ```
cpcloud commented 10 months ago

Was able to work around this with some SCSS in our theme-dark.scss stylesheet.

cscheid commented 10 months ago

Were you running a custom theme or one of our dark themes?

cpcloud commented 10 months ago

These are our current theme settings in _quarto.yml:

format:
  html:
    theme:
      light: [flatly, theme-light.scss]
      dark: [darkly, theme-dark.scss]

With the contents of those files as:

❯ git show upstream/main:docs/theme-light.scss
/*-- scss:rules --*/
.quarto-title-banner .quarto-title .title {
    color: #ccd1d5;
}

and

❯ git show upstream/main:docs/theme-dark.scss
/*-- scss:defaults --*/
$code-color: #c2d94c;
cscheid commented 10 months ago 
/*-- scss:defaults --*/
$code-color: #c2d94c;

That's the problem here, that's a light color. You shouldn't use light color there (because the background is still light)

cpcloud commented 10 months ago

But that's only set for light mode, or at least that is my mental model of how that works.

dragonstyle commented 10 months ago

From reading your comment above, it looks like that is only being set for dark mode (e.g. since it is included in the scss file customizing the dark theme). I could be misreading...

cscheid commented 10 months ago

But that's only set for light mode, or at least that is my mental model of how that works.

You have this: dark: [darkly, theme-dark.scss], right?

lostmygithubaccount commented 10 months ago

I believe so: https://github.com/ibis-project/ibis/blob/main/docs/_quarto.yml#L178-L180

format:
  html:
    theme:
      light: [flatly, theme-light.scss]
      dark: [darkly, theme-dark.scss]