feat: dark mode support

juananpe · Jul 25, 2024 · 14b2e3a · 14b2e3a
1 parent 42f183d
commit 14b2e3a
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 10 deletions.
diff --git a/docs/intro/index.html b/docs/intro/index.html
@@ -53,7 +53,12 @@ <h1>Introduction</h1>
       <p class="terms">Terms defined: 
 <a class="gl-ref" href="../glossary/#gl:ssg" markdown="1">static site generator</a>
 </p>
-      <ul>
+      <figure id="intro_concept_map">
+<img src="./concept_map.svg" alt="alt text"/>
+<figcaption>Figure&nbsp;1.1: figure for testing dark mode</figcaption>
+</figure>
+
+<ul>
 <li>Glossary reference: <a class="gl-ref" href="../glossary/#gl:ssg" markdown="1">static site generator text</a></li>
 <li>Bibliography reference <span class="bib-ref">[<a class="bib-ref" href="../bib/#Wilson2019">Wilson2019</a>]</span></li>
 <li>Reference to conclusion <a href="../finale/">Chapter&nbsp;2</a></li>
@@ -142,12 +147,7 @@ <h2>Data</h2>
   - 7
 </code></pre></div>
 </div>
-<h2>Image and Thanks</h2>
-<figure id="intro_concept_map">
-<img src="./concept_map.svg" alt="alt text"/>
-<figcaption>Figure&nbsp;1.1: caption text</figcaption>
-</figure>
-
+<h2>Thanks</h2>
 <p>Thanks to:</p>
 <ul class="thanks"><li>First Person</li>
 <li>Second Person</li>

diff --git a/docs/mccole.css b/docs/mccole.css
@@ -48,6 +48,21 @@
     --splash-width: 80%;
 }
 
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    body {
+	color: white;
+	background-color: black;
+    }
+    code {
+	filter: invert();
+    }
+    img[src$=".svg"] {
+	background: white;
+	filter: invert();
+  }
+}
+
 /* Small screen: display rows with one column */
 @media screen {
     .row {

diff --git a/lib/mccole/resources/mccole.css b/lib/mccole/resources/mccole.css
@@ -48,6 +48,21 @@
     --splash-width: 80%;
 }
 
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    body {
+	color: white;
+	background-color: black;
+    }
+    code {
+	filter: invert();
+    }
+    img[src$=".svg"] {
+	background: white;
+	filter: invert();
+  }
+}
+
 /* Small screen: display rows with one column */
 @media screen {
     .row {

diff --git a/src/intro/index.md b/src/intro/index.md
@@ -6,6 +6,8 @@ syllabus:
 -   "All material is available under open licenses, and all royalties go to charity."
 ---
 
+[% figure slug="intro_concept_map" img="concept_map.svg" alt="alt text" caption="figure for testing dark mode" %]
+
 -   Glossary reference: [%g ssg "static site generator text" %]
 -   Bibliography reference [%b Wilson2019 %]
 -   Reference to conclusion [%x finale %]
@@ -42,9 +44,7 @@ syllabus:
 [%inc toml.toml %]
 [%inc yaml.yml %]
 
-## Image and Thanks
-
-[% figure slug="intro_concept_map" img="concept_map.svg" alt="alt text" caption="caption text" %]
+## Thanks
 
 Thanks to: