Feature/dark mode (#1625)

* first adjustments to dark mode

* more dark mode

* turn on os-preferred dark-or-light mode

* more dark mode tweaks (with @cwickham)

* more tweaks

* make guide+smart state work well with dark mode

* dark mode fixes

* freeze update

* more dark mode fixes.

* padding for announcement

* fix announcement banner color

* axe fixes

* announcement bar uniformity

Author: cscheid

_freeze/docs/gallery/index/execute-results/html.json

@@ -1,8 +1,8 @@
 {
-  "hash": "ae771c86aa2b44ae71e8d150036ac29b",
+  "hash": "8c897a991921ed17e476af65eacfbb87",
   "result": {
     "engine": "knitr",
-    "markdown": "---\npagetitle: \"Gallery\"\nformat:\n  html:\n    toc: false\nimage: articles/advanced-layout-pdf.png\nsearch: false\nexecute:\n  echo: false\nlisting:\n  - id: gallery\n    template: gallery.ejs\n    contents: gallery.yml\ndescription: |\n  A gallery of example documents, websites, books, and presentations created with Quarto.\naliases:\n  - /docs/dashboards/examples/index.html\n  - /docs/dashboards/examples/\n---\n\n\n\n::: {#hero-banner .column-screen}\n::: {.grid .column-page}\n::: {.headline .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: h1\nGallery\n:::\n\nQuarto can produce a wide variety of output formats. Here are some examples:\n\n-   [Articles & Reports](#articles-reports)\n-   [Presentations](#presentations)\n-   [Dashboards](#dashboards)\n-   [Websites](#websites)\n-   [Books](#books)\n-   [Interactive Docs](#interactive-docs)\n:::\n\n\n\n::: {.cell .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: {.cell-output-display}\n\n```{=html}\n<div id=\"gallery-carousel\" class=\"carousel carousel-dark slide\" data-bs-ride=\"carousel\">\n<div class=\"carousel-indicators\">\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"0\" aria-label=\"Slide 1\" class=\"active\" aria-current=\"true\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"3\" aria-label=\"Slide 4\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"4\" aria-label=\"Slide 5\"></button>\n</div>\n<div class=\"carousel-inner\">\n<div class=\"carousel-item active\" data-bs-interval=\"5000\">\n<a href=\"#articles-reports\">\n<img src=\"articles/advanced-layout-pdf.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Articles and reports with Python and R</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#presentations\">\n<img src=\"presentations/presentations.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Create data-driven presentations</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#interactive-docs\">\n<img src=\"interactive/interactive-jupyter.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Engage readers with interactivity</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#websites\">\n<img src=\"websites/websites-quarto.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Publish collections of articles as a website</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#books\">\n<img src=\"websites/websites-jupyter.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Create multi-format books</p>\n</div>\n</div>\n</div>\n<button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide=\"prev\">\n<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n<span class=\"visually-hidden\">Prevoius</span>\n</button>\n<button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide=\"next\">\n<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n<span class=\"visually-hidden\">Next</span>\n</button>\n</div>\n```\n\n:::\n:::\n\n\n:::\n:::\n\n::: {#gallery .column-page}\n:::\n\n\n\n```{=html}\n<style>\n\n#hero-banner {\n  padding-top: 35px;\n  background-color: rgb(237,243,249);\n}\n\n#quarto-content main { \n  margin-top: 0;\n  padding-top: 0;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\n\n.headline {\n  font-size: 1.25em;\n  font-weight: 300;\n  padding-bottom: 1em;\n}\n\n.headline p {\n  margin: 0;\n  padding-bottom: 0.2rem;\n}\n\n.headline a {\n  text-decoration: none;\n}\n\n.headline ul li {\n  margin-bottom: 0.3em;\n}\n\n.carousel.card {\n  padding-top: 2em;\n}\n\n.carousel img {\n  width: 70%;\n  margin-bottom: 110px;\n}\n\n.carousel-control-prev-icon, .carousel-control-next-icon {\n  margin-bottom: 110px;\n}\n\n.carousel-caption {\n  padding-top: 1em;\n}\n\n.touch {\n  \n}\n</style>\n```\n",
+    "markdown": "---\npagetitle: \"Gallery\"\nformat:\n  html:\n    toc: false\nimage: articles/advanced-layout-pdf.png\nsearch: false\nexecute:\n  echo: false\nlisting:\n  - id: gallery\n    template: gallery.ejs\n    contents: gallery.yml\ndescription: |\n  A gallery of example documents, websites, books, and presentations created with Quarto.\naliases:\n  - /docs/dashboards/examples/index.html\n  - /docs/dashboards/examples/\n---\n\n::: {#hero-banner .column-screen}\n::: {.grid .column-page}\n::: {.headline .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: h1\nGallery\n:::\n\nQuarto can produce a wide variety of output formats. Here are some examples:\n\n-   [Articles & Reports](#articles-reports)\n-   [Presentations](#presentations)\n-   [Dashboards](#dashboards)\n-   [Websites](#websites)\n-   [Books](#books)\n-   [Interactive Docs](#interactive-docs)\n:::\n\n\n::: {.cell .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: {.cell-output-display}\n\n```{=html}\n<div id=\"gallery-carousel\" class=\"carousel carousel-dark slide\" data-bs-ride=\"carousel\">\n<div class=\"carousel-indicators\">\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"0\" aria-label=\"Slide 1\" class=\"active\" aria-current=\"true\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"3\" aria-label=\"Slide 4\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"4\" aria-label=\"Slide 5\"></button>\n</div>\n<div class=\"carousel-inner\">\n<div class=\"carousel-item active\" data-bs-interval=\"5000\">\n<a href=\"#articles-reports\">\n<img src=\"articles/advanced-layout-pdf.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Articles and reports with Python and R</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#presentations\">\n<img src=\"presentations/presentations.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Create data-driven presentations</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#interactive-docs\">\n<img src=\"interactive/interactive-jupyter.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Engage readers with interactivity</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#websites\">\n<img src=\"websites/websites-quarto.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Publish collections of articles as a website</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#books\">\n<img src=\"websites/websites-jupyter.png\" class=\"d-block  mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Create multi-format books</p>\n</div>\n</div>\n</div>\n<button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide=\"prev\">\n<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n<span class=\"visually-hidden\">Prevoius</span>\n</button>\n<button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide=\"next\">\n<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n<span class=\"visually-hidden\">Next</span>\n</button>\n</div>\n```\n\n:::\n:::\n\n:::\n:::\n\n::: {#gallery .column-page}\n:::\n\n```{=html}\n<style>\n\n/* we need to hide this element */\n/* <header id=\"title-block-header\" class=\"quarto-title-block\"></header> */\n\nheader#title-block-header {\n  display: none;\n}\n\nbody.quarto-light #hero-banner {\n  background-color: rgb(240,245,249);\n}\n\nbody.quarto-dark #hero-banner {\n  background-color: rgb(60,64,82);\n}\n\ndiv.carousel {\n  margin-top: 2rem; \n}\n\nbody.quarto-dark .carousel-dark .carousel-indicators [data-bs-target] {\n  background-color: rgb(255,255,255);\n}\n\nbody.quarto-dark .carousel-dark .carousel-control-next-icon,\nbody.quarto-dark .carousel-dark .carousel-control-prev-icon {\n  filter: inherit;\n}\n\n#quarto-content main { \n  margin-top: 0;\n  padding-top: 0;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\n\n.headline {\n  font-size: 1.25em;\n  font-weight: 300;\n  padding-bottom: 1em;\n}\n\n.headline p {\n  margin: 0;\n  padding-bottom: 0.2rem;\n}\n\n.headline a {\n  text-decoration: none;\n}\n\n.headline ul li {\n  margin-bottom: 0.3em;\n}\n\n.carousel.card {\n  padding-top: 2em;\n}\n\n.carousel img {\n  width: 70%;\n  margin-bottom: 110px;\n}\n\n.carousel-control-prev-icon, .carousel-control-next-icon {\n  margin-bottom: 110px;\n}\n\n.carousel-caption {\n  padding-top: 1em;\n}\n\n.touch {\n  \n}\n</style>\n```\n",
     "supporting": [],
     "filters": [
       "rmarkdown/pagebreak.lua"

_quarto.yml

@@ -10,6 +10,8 @@ project:
     - "/docs/blog/posts/2024-07-02-beautiful-tables-in-typst/demo"
     - "/.well-known/atproto-did"
 
+highlight-style: a11y
+
 website:
   title: "Quarto"
   image: "quarto-dark-bg.jpeg"
@@ -663,9 +665,11 @@ bibliography: references.bib
 
 format:
   html:
+    respect-user-color-scheme: true
     toc: true
     theme:
       light: [cosmo, theme.scss]
+      dark: [cosmo, theme-dark.scss]
     code-copy: true
     code-overflow: wrap
     css: styles.css

docs/blog/index.qmd

@@ -10,8 +10,7 @@ listing:
   feed: true
 page-layout: full
 margin-header: signup.html
-title-block-banner: "#EDF3F9"
-title-block-banner-color: body
+title-block-banner: true
 search: false
 image: quarto-blog-v2.png
 ---

docs/blog/posts/_metadata.yml

@@ -2,8 +2,7 @@ comments:
   giscus:
     repo: quarto-dev/quarto-cli
     category: Blog
-title-block-banner: "#EDF3F9"
-title-block-banner-color: body
+title-block-banner: true
 toc-location: left
 format:
   html:

docs/gallery/index.qmd

@@ -51,9 +51,32 @@ carousel("gallery-carousel", 5000,
 ```{=html}
 <style>
 
-#hero-banner {
-  padding-top: 35px;
-  background-color: rgb(237,243,249);
+/* we need to hide this element */
+/* <header id="title-block-header" class="quarto-title-block"></header> */
+
+header#title-block-header {
+  display: none;
+}
+
+body.quarto-light #hero-banner {
+  background-color: rgb(240,245,249);
+}
+
+body.quarto-dark #hero-banner {
+  background-color: rgb(60,64,82);
+}
+
+div.carousel {
+  margin-top: 2rem; 
+}
+
+body.quarto-dark .carousel-dark .carousel-indicators [data-bs-target] {
+  background-color: rgb(255,255,255);
+}
+
+body.quarto-dark .carousel-dark .carousel-control-next-icon,
+body.quarto-dark .carousel-dark .carousel-control-prev-icon {
+  filter: inherit;
 }
 
 #quarto-content main { 

docs/get-started/_redirect.html

@@ -1,4 +1,9 @@
 <script type="text/javascript">
+  /* This code exists but is no longer used in the "happy path" for our webpage. If someone lands here it
+  will still work but redirect to the main guide, which itself will no longer use redirection.
+
+  The issue with redirection is it causes a FOUC
+
   const toolPage = window.localStorage.getItem("tutorialToolGetStarted") || "jupyter.html";
   window.location.replace(toolPage);
 </script>

docs/get-started/_tool-menu.html

@@ -0,0 +1,12 @@
+<script type="text/javascript">
+    // get file name
+    const toolPage = window.location.pathname.split("/").slice(-1)[0] || window.localStorage.getItem("tutorialToolGetStarted") || "jupyter.html";
+    // save in local storage
+    window.localStorage.setItem("tutorialToolGetStarted", toolPage);
+  
+    for (const node of document.querySelectorAll("li.sidebar-item a:has(span.menu-text)")) {
+        if (node.href.endsWith("/")) {
+            node.href = node.href + toolPage;
+        }
+    }
+  </script>

docs/get-started/authoring/_metadata.yml

@@ -0,0 +1,2 @@
+include-before-body:
+  - ../_tool-menu.html

docs/get-started/authoring/index.qmd

@@ -1,4 +1,6 @@
 ---
+# These pages exist but are no longer needed; they're there in case someone links to them
+# from the web
 title: "Tutorial: Authoring"
 include-in-header: ../_redirect.html
 ---

docs/get-started/computations/_metadata.yml

@@ -0,0 +1,2 @@
+include-before-body:
+  - ../_tool-menu.html