Giscus comments on quarto are initially rendered in light mode even when the dark mode switch is on

[cpcloud]

Bug description

On the first load to a blog post in dark mode on ibis-project.org such as https://ibis-project.org/posts/kedro-ibis/

I see

for the Giscus comment box.

If I then toggle to light mode the back to dark mode I see:

Refreshing the page resets whatever state creates the issue back to its initial state, making it reproducible upon refresh.

Steps to reproduce

Hopefully there's enough in the description!

Expected behavior

I would expect that if the page loads in dark mode I'll see the comment box styled accordingly

Actual behavior

See the screenshots.

Your environment

• OS: Linux
• Browser: Brave
• Quarto: 1.4.549

Quarto check output

❯ 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/y0vwdln9k741v3877q6kh2apdy0l37jg-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

[kv9898]

I've made a fix to this problem in PR #11047. My current solution only requires a replacement of the giscus.ejs file of Quarto (so no need to fork/configure the development version).

I've already applied this fix to my own website. You can see it's effect there: https://rubuky.com/papers/2023-11-30-FemaleOfficer/