theme switcher

docs/css/styles.css

@@ -9,6 +9,7 @@
 *::before,
 *::after {
     font-family: inherit;
+    background-color: inherit;
     color: inherit;
     margin: 0;
     padding: 0;
@@ -19,6 +20,7 @@ html {
     font-family: PT Sans, sans-serif;
     line-height: 1.5;
     color: #111;
+    background-color: #fefefe;
 }
 * + * {
     margin-top: 2.25rem;
@@ -58,8 +60,9 @@ figure p img {
 }
 :focus:not([tabindex="-1"]),
 [data-expands]:focus svg,
-.patterns a:focus .text {
-    outline: 3px solid #ccc;
+.patterns a:focus .text,
+[for="themer"] :focus + [aria-hidden] {
+    outline: 3px solid #888;
     outline-offset: 2px;
 }
 /* fix for IE :( */
@@ -86,7 +89,6 @@ div:not([tabindex]):focus {
     outline: none;
 }
 /* text styles */
-
 h1,
 h2,
 h3,
@@ -160,6 +162,7 @@ main ul ul {
 
 button {
     font-size: 1.25rem;
+    border-radius: 0.125em;
     font-family: inherit;
     background: #111;
     color: #fff;
@@ -171,6 +174,28 @@ button {
   margin-top: 0.75rem;
   padding: 0.5rem;
 }
+
+/* Forms */
+label {
+  display: inline-block;
+  font-weight: bold;
+}
+
+[for="themer"] {
+  background: #111;
+  border-radius: 0.125em;
+  color: #fff;
+  padding: 0.25em 0.75em;
+  margin: 0.5rem;
+}
+
+[for="themer"] [aria-hidden]::before {
+  content: 'off';
+}
+
+[for="themer"] :checked + [aria-hidden]::before {
+  content: 'on';
+}
 /* Tables */
 
 table {
@@ -466,6 +491,7 @@ pre[class*=language-] {
 }
 code[class*="language-"], pre[class*="language-"] {
   text-shadow: none;
+  filter: grayscale(100%);
 }
 pre[class*=language-][data-line] {
     padding: 1em 0 0 2.25rem;
@@ -477,40 +503,6 @@ pre[class*=language-] code * {
     display: inline-block;
     margin-top: -1rem;
 }
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-    color: #888;
-}
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted,
-.token.important {
-    color: #111;
-}
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-    color: #333;
-    background: none;
-}
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-    color: #666;
-}
-.token.function {
-    color: #888;
-}
 .line-numbers code {
     padding-left: 3rem;
     margin-top: -1rem;
@@ -768,6 +760,15 @@ h1 svg {
 .pattern-section h1 {
     padding: 0 !important;
 }
+/* Utilities */
+.vh {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
 @media screen and (max-width: 45em) {
     [role="banner"] {
         position: static;

docs/index.html

@@ -25,6 +25,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
   Infusion
@@ -392,6 +397,12 @@
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/js/dom-scripts.js

@@ -122,3 +122,25 @@
     }
   });
 }());
+
+/* Switch and persist theme */
+(function () {
+  var checkbox = document.getElementById('themer');
+  var invertor = document.getElementById('inverter');
+
+  function darkTheme(media) {
+    invertor.setAttribute('media', media);
+    invertor.textContent = invertor.textContent.trim();
+    localStorage.setItem('darkTheme', media);
+  }
+
+  checkbox.addEventListener('change', function () {
+    darkTheme(this.checked ? 'screen' : 'none');
+  });
+
+  window.addEventListener('DOMContentLoaded', function () {
+    if (localStorage.getItem('darkTheme') === 'screen') {
+      checkbox.click();
+    }
+  });
+}());

docs/patterns/coding/code-blocks/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Code blocks | Infusion
@@ -441,6 +446,12 @@ toggle.addEventListener('click', (e) => {
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/coding/color-palettes/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Color palettes | Infusion
@@ -423,6 +428,12 @@
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/coding/command-line/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Command line | Infusion
@@ -409,6 +414,12 @@ npm run start
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/coding/demo-embedding/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Demo embedding | Infusion
@@ -479,6 +484,12 @@
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/coding/file-trees/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         File trees | Infusion
@@ -459,6 +464,12 @@
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/coding/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Coding | Infusion
@@ -460,6 +465,12 @@
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/coding/tested/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Tested using... | Infusion
@@ -467,6 +472,12 @@
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/coding/writing-inline-demos/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Writing inline demos | Infusion
@@ -539,6 +544,12 @@ toggle.addEventListener('click', (e) => {
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Patterns | Infusion
@@ -424,6 +429,12 @@
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/installation/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Installation | Infusion
@@ -474,6 +479,12 @@
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/library-setup/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Library setup | Infusion
@@ -504,6 +509,12 @@ theme = "infusion"
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/media/including-images/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Including images | Infusion
@@ -453,6 +458,12 @@
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/media/including-videos/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Including videos | Infusion
@@ -389,6 +394,12 @@
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/media/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Media | Infusion
@@ -400,6 +405,12 @@
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/printing/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Printing | Infusion
@@ -398,6 +403,12 @@
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/serving/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Serving | Infusion
@@ -439,6 +444,12 @@
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/writing/expandable-sections/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Expandable sections | Infusion
@@ -494,6 +499,12 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/writing/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Writing | Infusion
@@ -460,6 +465,12 @@
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/writing/library-structure/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Library structure | Infusion
@@ -463,6 +468,12 @@ title = &quot;Popups&quot;
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/writing/markdown-and-metadata/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Markdown &amp; metadata | Infusion
@@ -460,6 +465,12 @@ weight = 1
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/writing/notes-and-warnings/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Notes &amp; warnings | Infusion
@@ -453,6 +458,12 @@ This is a warning! It's about something the reader should be careful to do or to
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/writing/references/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         References | Infusion
@@ -838,6 +843,12 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/writing/snippets/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Snippets | Infusion
@@ -402,6 +407,12 @@
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/patterns/writing/tables-of-contents/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
         Tables of contents | Infusion
@@ -411,6 +416,12 @@ toc = false
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/print-version/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
   Infusion
@@ -2115,6 +2120,12 @@ npm run start
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/tags/markdown/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
   Patterns tagged Markdown | Infusion
@@ -391,6 +396,12 @@
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

docs/tags/metadata/index.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       
   Patterns tagged Metadata | Infusion
@@ -391,6 +396,12 @@
   </main>
 
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

themes/infusion/layouts/_default/baseof.html

@@ -24,6 +24,11 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="{{ "css/prism.css" | absURL }}">
     <link rel="stylesheet" type="text/css" href="{{ "css/styles.css" | absURL }}">
+    <style id="inverter" media="none">
+      html { filter: invert(100%) }
+      * { background-color: inherit }
+      img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
+    </style>
     <title>
       {{ block "title" . }}
         {{ .Title }} | {{ .Site.Title }}
@@ -108,6 +113,12 @@
           {{ block "main" . }}
           {{ end }}
           <footer role="contentinfo">
+            <div>
+              <label for="themer">
+                dark theme: <input type="checkbox" id="themer" class="vh">
+                <span aria-hidden="true"></span>
+              </label>
+            </div>
             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
             For general enquiries, contact us on info@paciellogroup.com.
           </footer>

themes/infusion/static/css/styles.css

@@ -9,6 +9,7 @@
 *::before,
 *::after {
     font-family: inherit;
+    background-color: inherit;
     color: inherit;
     margin: 0;
     padding: 0;
@@ -19,6 +20,7 @@ html {
     font-family: PT Sans, sans-serif;
     line-height: 1.5;
     color: #111;
+    background-color: #fefefe;
 }
 * + * {
     margin-top: 2.25rem;
@@ -58,8 +60,9 @@ figure p img {
 }
 :focus:not([tabindex="-1"]),
 [data-expands]:focus svg,
-.patterns a:focus .text {
-    outline: 3px solid #ccc;
+.patterns a:focus .text,
+[for="themer"] :focus + [aria-hidden] {
+    outline: 3px solid #888;
     outline-offset: 2px;
 }
 /* fix for IE :( */
@@ -86,7 +89,6 @@ div:not([tabindex]):focus {
     outline: none;
 }
 /* text styles */
-
 h1,
 h2,
 h3,
@@ -160,6 +162,7 @@ main ul ul {
 
 button {
     font-size: 1.25rem;
+    border-radius: 0.125em;
     font-family: inherit;
     background: #111;
     color: #fff;
@@ -171,6 +174,28 @@ button {
   margin-top: 0.75rem;
   padding: 0.5rem;
 }
+
+/* Forms */
+label {
+  display: inline-block;
+  font-weight: bold;
+}
+
+[for="themer"] {
+  background: #111;
+  border-radius: 0.125em;
+  color: #fff;
+  padding: 0.25em 0.75em;
+  margin: 0.5rem;
+}
+
+[for="themer"] [aria-hidden]::before {
+  content: 'off';
+}
+
+[for="themer"] :checked + [aria-hidden]::before {
+  content: 'on';
+}
 /* Tables */
 
 table {
@@ -466,6 +491,7 @@ pre[class*=language-] {
 }
 code[class*="language-"], pre[class*="language-"] {
   text-shadow: none;
+  filter: grayscale(100%);
 }
 pre[class*=language-][data-line] {
     padding: 1em 0 0 2.25rem;
@@ -477,40 +503,6 @@ pre[class*=language-] code * {
     display: inline-block;
     margin-top: -1rem;
 }
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-    color: #888;
-}
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted,
-.token.important {
-    color: #111;
-}
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-    color: #333;
-    background: none;
-}
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-    color: #666;
-}
-.token.function {
-    color: #888;
-}
 .line-numbers code {
     padding-left: 3rem;
     margin-top: -1rem;
@@ -768,6 +760,15 @@ h1 svg {
 .pattern-section h1 {
     padding: 0 !important;
 }
+/* Utilities */
+.vh {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
 @media screen and (max-width: 45em) {
     [role="banner"] {
         position: static;

themes/infusion/static/js/dom-scripts.js

@@ -122,3 +122,25 @@
     }
   });
 }());
+
+/* Switch and persist theme */
+(function () {
+  var checkbox = document.getElementById('themer');
+  var invertor = document.getElementById('inverter');
+
+  function darkTheme(media) {
+    invertor.setAttribute('media', media);
+    invertor.textContent = invertor.textContent.trim();
+    localStorage.setItem('darkTheme', media);
+  }
+
+  checkbox.addEventListener('change', function () {
+    darkTheme(this.checked ? 'screen' : 'none');
+  });
+
+  window.addEventListener('DOMContentLoaded', function () {
+    if (localStorage.getItem('darkTheme') === 'screen') {
+      checkbox.click();
+    }
+  });
+}());