Support for dark mode (#48)

* Turn all colors into variables

This turns each color into a $elem(-$pseudo)-$attribute named variable
on the :root element and replaces their usage by calling the var()
function instead.

* Add dark mode colors

This overrides the colors when prefers-color-scheme is set to dark,
indicating the user has configured their OS or user-agent to prefer
a light text on dark background instead. It includes a way to manually
toggle dark mode by using a data attribute on the html element.

The syntax highlight colors are also updated to support dark mode.

* feat: improve dark mode implementation and docs

- Dark mode based on classes, with three options
  - light mode (default, no changes needed)
  - auto dark mode (based on prefers-color-scheme; latex-dark-auto class on body)
  - dark mode (latex-dark class on body)
- Removed the mention of dark mode from the lead and moved it to the getting started section
- Moved the dark mode section up, since it is a pretty important feature imo.
- Added a dark mode toggle button for demo
- Added a CSS filter to the proof symbol so that it shows up as dark grey instead of white
- Built the project to generate the minified css file

Co-authored-by: Vincent Dörig <[email protected]>

Author: daenney

index.html

@@ -80,6 +80,7 @@ <h2>Contents</h2>
         <ol>
           <li><a href="#scroll-overflow">Scroll Overflow</a></li>
           <li><a href="#syntax-highlighting">Syntax Highlighting</a></li>
+          <li><a href="#dark-mode">Dark Mode</a></li>
         </ol>
       </li>
     </ol>
@@ -100,6 +101,11 @@ <h2 id="getting-started">Getting Started</h2>
           (optional) Add any classes to elements described in the
           <a href="#class-based-elements">next section</a>.
         </li>
+        <li>
+          (optional) Add dark mode by adding the <code>latex-dark-auto</code> class to the <code
+            class="language-html">&lt;body&gt;</code>.
+          More infos <a href="#dark-mode">here</a>.
+        </li>
         <li>
           (optional) If you need support for
           <span class="latex">L<span>a</span>T<span>e</span>X</span> math, add
@@ -231,6 +237,24 @@ <h2 id="sidenotes">Sidenotes</h2>
       <!-- <blockquote>You could also have sidenotes inside blockquotes just like this one <label for="sn-quote"
           class="sidenote-toggle">🔖</label><input type="checkbox" id="sn-quote" class="sidenote-toggle" /><span
           class="sidenote">Hello there!</span>.</blockquote> -->
+      
+      <h2 id="dark-mode">Dark Mode</h2>
+      <p>There is built-in support for dark mode. By default, the document is in light mode. To enable dark mode, add
+        the
+        <code>latex-dark</code> class to the <code class="language-html">&lt;body&gt;</code> element. This will force
+        the document to be in dark mode.
+      </p>
+      <p>If you want enable dark mode based on the
+        <code>prefers-color-scheme</code> CSS media query, then use the <code>latex-dark-auto</code> class instead.
+      </p>
+      <p>You can also add a dark mode toggle to your site by adding a button and a tiny bit of JavaScript:</p>
+      <pre><code class="language-html">&lt;button id="dark-mode-toggle"&gt;Toggle dark mode&lt;/button&gt;</code></pre>
+      <pre><code class="language-javascript">document
+  .querySelector("#dark-mode-toggle")
+  .addEventListener('click', () => {
+     document.body.classList.toggle("latex-dark");
+  });</code></pre>
+      <p>Like this: <button id="dark-mode-toggle">Toggle dark mode</button></p>
 
       <h2 id="alternative-typeface">Alternative Typeface</h2>
       <p><span class="latex">L<span>a</span>T<span>e</span>X</span>.css uses Latin Modern by default. If you don't like this typeface (hard to read, too thin, etc.), you can switch to the <a href="https://github.com/alerque/libertinus"><code>Libertinus</code></a> font family by adding a class of <code>libertinus</code> to the <code class="language-html">&lt;body&gt;</code> tag. Click the button below to switch between Latin Modern and Libertinus.</p>
@@ -451,12 +475,17 @@ <h3 id="syntax-highlighting">Syntax Highlighting</h3>
         inlineMath: [['$', '$'],],
       },
     }
-    const toggle = document.getElementById('typeface-toggle')
+    const typeFaceToggle = document.getElementById('typeface-toggle')
     const typeface = document.getElementById('typeface')
-    toggle.addEventListener('click', () => {
+    typeFaceToggle.addEventListener('click', () => {
       document.body.classList.toggle('libertinus')
       typeface.textContent = document.body.classList.contains('libertinus') ? 'Libertinus' : 'Latin Modern'
     })
+
+    const darkModeToggle = document.getElementById('dark-mode-toggle')
+    darkModeToggle.addEventListener('click', () => {
+      document.body.classList.toggle('latex-dark')
+    })
   </script>
   <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
   <script async src="prism/prism.js"></script>

prism/prism.css

@@ -6,9 +6,56 @@
  * Licensed under MIT (https://github.com/vincentdoerig/latex-css/blob/master/LICENSE)
 */
 
+:root {
+  --bg-color: #F0F0F0;
+  --color: black;
+  --token-teal: #407f80;
+  --token-black: #000000;
+  --token-grey: #666666;
+  --token-green: #007f00;
+  --token-lime: #7d8f29;
+  --token-brown: #9a6e3a;
+  --token-red: #ba2121;
+  --token-fuchsia: #dd4a68;
+  --token-orange: #e90;
+  --token-pink: #BA6687;
+}
+
+.latex-dark {
+  --bg-color: #2d2d2d;
+  --color: #ccc;
+  --token-teal: #90D0D0;
+  --token-black: #ccc;
+  --token-grey: #999;
+  --token-green: #51B53F;
+  --token-lime: #B4C55D;
+  --token-brown: #D3A26B;
+  --token-red: #FA5E4F;
+  --token-fuchsia: #FF839B;
+  --token-orange: #FFCF4C;
+  --token-pink: #F49BBC;
+}
+
+@media (prefers-color-scheme: dark) {
+  .latex-dark-auto {
+    --bg-color: #2d2d2d;
+    --color: #ccc;
+    --token-teal: #90D0D0;
+    --token-black: #ccc;
+    --token-grey: #999;
+    --token-green: #51B53F;
+    --token-lime: #B4C55D;
+    --token-brown: #D3A26B;
+    --token-red: #FA5E4F;
+    --token-fuchsia: #FF839B;
+    --token-orange: #FFCF4C;
+    --token-pink: #F49BBC;
+  }
+}
+
 code[class*='language-'],
 pre[class*='language-'] {
-  color: black;
+  color: var(--color);
   background: none;
   text-align: left;
   white-space: pre;
@@ -35,7 +82,7 @@ pre[class*='language-'] {
 }
 
 pre[class*='language-'] {
-  background: #F0F0F0;
+  background: var(--bg-color);
 }
 
 /* Inline code */
@@ -49,18 +96,18 @@ pre[class*='language-'] {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: #407f80;
+  color: var(--token-teal);
 }
 
 .token.punctuation,
 .token.constant {
-  color: #000000;
+  color: var(--token-black);
 }
 
 .token.punctuation.attr-equals,
 .token.number,
 .token.operator {
-  color: #666666;
+  color: var(--token-grey);
 }
 
 .token.namespace {
@@ -73,42 +120,42 @@ pre[class*='language-'] {
 .token.symbol,
 .token.deleted,
 .token.keyword {
-  color: #007f00;
+  color: var(--token-green);
 }
 
 .token.selector,
 .token.attr-name,
 .token.char,
 .token.builtin,
 .token.inserted {
-  color: #7d8f29;
+  color: var(--token-lime);
 }
 
 .token.entity,
 .token.url,
 .language-css .token.string,
 .style .token.string {
-  color: #9a6e3a;
+  color: var(--token-brown);
 }
 
 .token.atrule,
 .token.attr-value,
 .token.string,
 .token.attr-value .punctuation:not(.attr-equals) {
-  color: #ba2121;
+  color: var(--token-red);
 }
 
 .token.class-name {
-  color: #dd4a68;
+  color: var(--token-fuchsia);
 }
 
 .token.important,
 .token.variable {
-  color: #e90;
+  color: var(--token-orange);
 }
 
 .token.regex {
-  color: #BA6687;
+  color: var(--token-pink);
 }
 
 .token.important,

style.css

@@ -100,6 +100,49 @@
   box-sizing: border-box;
 }
 
+:root {
+  --body-color: hsl(0, 5%, 10%);
+  --body-bg-color: hsl(210, 20%, 98%);
+  --link-visited: hsl(0, 100%, 33%);
+  --link-focus-outline: hsl(220, 90%, 52%);
+  --pre-bg-color: hsl(210, 28%, 93%);
+  --kbd-bg-color: hsl(210, 5%, 100%);
+  --kbd-border-color: hsl(210, 5%, 70%);
+  --table-border-color: black;
+  --sidenote-target-border-color: hsl(55, 55%, 70%);
+  --footnotes-border-color: hsl(0, 0%, 39%);
+}
+
+.latex-dark {
+  --body-color: hsl(0, 0%, 86%);
+  --body-bg-color: hsl(0, 0%, 16%);
+  --link-visited: hsl(196 80% 77%);
+  --link-focus-outline: hsl(215, 63%, 73%);
+  --pre-bg-color: hsl(0, 1%, 25%);
+  --kbd-bg-color: hsl(0, 0%, 16%);
+  --kbd-border-color: hsl(210, 5%, 70%);
+  --table-border-color: white;
+  --sidenote-target-border-color: hsl(0, 0%, 59%);
+  --footnotes-border-color: hsl(0, 0%, 59%);
+  --proof-symbol-filter: invert(80%);
+}
+
+@media (prefers-color-scheme: dark) {
+   .latex-dark-auto {
+    --body-color: hsl(0, 0%, 86%);
+    --body-bg-color: hsl(0, 0%, 16%);
+    --link-visited: hsl(196 80% 77%);
+    --link-focus-outline: hsl(215, 63%, 73%);
+    --pre-bg-color: hsl(0, 1%, 25%);
+    --kbd-bg-color: hsl(0, 0%, 16%);
+    --kbd-border-color: hsl(210, 5%, 70%);
+    --table-border-color: white;
+    --sidenote-target-border-color: hsl(0, 0%, 59%);
+    --footnotes-border-color: hsl(0, 0%, 59%);
+    --proof-symbol-filter: invert(80%);
+  }
+}
+
 /* Remove default margin */
 body,
 h1,
@@ -143,8 +186,8 @@ body {
 
   counter-reset: theorem definition sidenote-counter;
 
-  color: hsl(0, 5%, 10%);
-  background-color: hsl(210, 20%, 98%);
+  color: var(--body-color);
+  background-color: var(--body-bg-color);
 
   text-rendering: optimizeLegibility;
 }
@@ -166,12 +209,12 @@ a:not([class]) {
 /* Make links red */
 a,
 a:visited {
-  color: #a00;
+  color: var(--link-visited);
 }
 
 a:focus {
   outline-offset: 2px;
-  outline: 2px solid hsl(220, 90%, 52%);
+  outline: 2px solid var(--link-focus-outline);
 }
 
 /* Make images easier to work with */
@@ -212,15 +255,15 @@ pre {
   max-width: 100%;
   overflow: auto;
   border-radius: 4px;
-  background: hsl(210, 28%, 93%);
+  background: var(--pre-bg-color);
 }
 pre code {
   font-size: 95%;
   position: relative;
 }
 kbd {
-  background: hsl(210, 5%, 100%);
-  border: 1px solid hsl(210, 5%, 70%);
+  background: var(--kbd-bg-color);
+  border: 1px solid var(--kbd-border-color);
   border-radius: 2px;
   padding: 2px 4px;
   font-size: 75%;
@@ -232,28 +275,28 @@ table {
   border-spacing: 0;
   width: auto;
   max-width: 100%;
-  border-top: 2.27px solid black;
-  border-bottom: 2.27px solid black;
+  border-top: 2.27px solid var(--table-border-color);
+  border-bottom: 2.27px solid var(--table-border-color);
   /* display: block; */
   overflow-x: auto; /* does not work because element is not block */
   /* white-space: nowrap; */
   counter-increment: caption;
 }
 /* add bottom border on column table headings  */
 table tr > th[scope='col'] {
-  border-bottom: 1.36px solid black;
+  border-bottom: 1.36px solid var(--table-border-color);
 }
 /* add right border on row table headings  */
 table tr > th[scope='row'] {
-  border-right: 1.36px solid black;
+  border-right: 1.36px solid var(--table-border-color);
 }
 table > tbody > tr:first-child > td,
 table > tbody > tr:first-child > th {
-  border-top: 1.36px solid black;
+  border-top: 1.36px solid var(--table-border-color);
 }
 table > tbody > tr:last-child > td,
 table > tbody > tr:last-child > th {
-  border-bottom: 1.36px solid black;
+  border-bottom: 1.36px solid var(--table-border-color);
 }
 
 th,
@@ -351,6 +394,7 @@ dl dd {
 }
 .proof:after {
   content: '◾️';
+  filter: var(--proof-symbol-filter);
   position: absolute;
   right: -12px;
   bottom: -2px;
@@ -395,7 +439,7 @@ dl dd {
 
 /* (WIP) add border when a sidenote is clicked on */
 .sidenote:target {
-  border: hsl(55, 55%, 70%) 1.5px solid;
+  border: var(--sidenote-target-border-color) 1.5px solid;
   padding: 0 .5rem;
   scroll-margin-block-start: 10rem;
 }
@@ -476,7 +520,7 @@ input.sidenote-toggle {
   margin-bottom: 0.4rem;
 }
 .footnotes {
-  border-top: 1px solid hsl(0, 0%, 39%);
+  border-top: 1px solid var(--footnotes-border-color);
 }
 
 /* Center title and paragraph */