Adding dark mode support

assets/prism-solarized.css

@@ -30,8 +30,8 @@ cyan      #2aa198
 green     #859900
 */
 
-code[class*="language-"],
+.light-mode code[class*="language-"],
-pre[class*="language-"] {
+.light-mode pre[class*="language-"] {
 	color: #657b83; /* base00 */
 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 	font-size: 1em;
@@ -53,101 +53,105 @@ pre[class*="language-"] {
 	hyphens: none;
 }
 
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+.light-mode pre[class*="language-"]::-moz-selection,
-code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+.light-mode pre[class*="language-"] ::-moz-selection,
+.light-mode code[class*="language-"]::-moz-selection,
+.light-mode code[class*="language-"] ::-moz-selection {
 	background: #073642; /* base02 */
 }
 
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+.light-mode pre[class*="language-"]::selection,
-code[class*="language-"]::selection, code[class*="language-"] ::selection {
+.light-mode pre[class*="language-"] ::selection,
+.light-mode code[class*="language-"]::selection,
+.light-mode code[class*="language-"] ::selection {
 	background: #073642; /* base02 */
 }
 
 /* Code blocks */
-pre[class*="language-"] {
+.light-mode pre[class*="language-"] {
 	padding: 1em;
 	margin: .5em 0;
 	overflow: auto;
 	border-radius: 0.3em;
 }
 
-:not(pre) > code[class*="language-"],
+.light-mode :not(pre) > code[class*="language-"],
-pre[class*="language-"] {
+.light-mode pre[class*="language-"] {
 	background-color: #fdf6e3; /* base3 */
 }
 
 /* Inline code */
-:not(pre) > code[class*="language-"] {
+.light-mode :not(pre) > code[class*="language-"] {
 	padding: .1em;
 	border-radius: .3em;
 }
 
-.token.comment,
+.light-mode .token.comment,
-.token.prolog,
+.light-mode .token.prolog,
-.token.doctype,
+.light-mode .token.doctype,
-.token.cdata {
+.light-mode .token.cdata {
 	color: #93a1a1; /* base1 */
 }
 
-.token.punctuation {
+.light-mode .token.punctuation {
 	color: #586e75; /* base01 */
 }
 
-.namespace {
+.light-mode .namespace {
 	opacity: .7;
 }
 
-.token.property,
+.light-mode .token.property,
-.token.tag,
+.light-mode .token.tag,
-.token.boolean,
+.light-mode .token.boolean,
-.token.number,
+.light-mode .token.number,
-.token.constant,
+.light-mode .token.constant,
-.token.symbol,
+.light-mode .token.symbol,
-.token.deleted {
+.light-mode .token.deleted {
 	color: #268bd2; /* blue */
 }
 
-.token.selector,
+.light-mode .token.selector,
-.token.attr-name,
+.light-mode .token.attr-name,
-.token.string,
+.light-mode .token.string,
-.token.char,
+.light-mode .token.char,
-.token.builtin,
+.light-mode .token.builtin,
-.token.url,
+.light-mode .token.url,
-.token.inserted {
+.light-mode .token.inserted {
 	color: #2aa198; /* cyan */
 }
 
-.token.entity {
+.light-mode .token.entity {
 	color: #657b83; /* base00 */
 	background: #eee8d5; /* base2 */
 }
 
-.token.atrule,
+.light-mode .token.atrule,
-.token.attr-value,
+.light-mode .token.attr-value,
-.token.keyword {
+.light-mode .token.keyword {
 	color: #859900; /* green */
 }
 
-.token.function,
+.light-mode .token.function,
-.token.class-name {
+.light-mode .token.class-name {
 	color: #b58900; /* yellow */
 }
 
-.token.regex,
+.light-mode .token.regex,
-.token.important,
+.light-mode .token.important,
-.token.variable {
+.light-mode .token.variable {
 	color: #cb4b16; /* orange */
 }
 
-.token.important,
+.light-mode .token.important,
-.token.bold {
+.light-mode .token.bold {
 	font-weight: bold;
 }
-.token.italic {
+.light-mode .token.italic {
 	font-style: italic;
 }
 
-.token.entity {
+.light-mode .token.entity {
 	cursor: help;
 }
 

assets/prism-tomorrow-night.css

@@ -0,0 +1,125 @@
+/* PrismJS 1.19.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript */
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+.dark-mode code[class*="language-"],
+.dark-mode pre[class*="language-"] {
+	color: #ccc;
+	background: none;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+
+}
+
+/* Code blocks */
+.dark-mode pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+.dark-mode :not(pre) > code[class*="language-"],
+.dark-mode pre[class*="language-"] {
+	background: #2d2d2d;
+}
+
+/* Inline code */
+.dark-mode :not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.dark-mode .token.comment,
+.dark-mode .token.block-comment,
+.dark-mode .token.prolog,
+.dark-mode .token.doctype,
+.dark-mode .token.cdata {
+	color: #999;
+}
+
+.dark-mod .token.punctuation {
+	color: #ccc;
+}
+
+.dark-mode .token.tag,
+.dark-mode .token.attr-name,
+.dark-mode .token.namespace,
+.dark-mode .token.deleted {
+	color: #e2777a;
+}
+
+.dark-mode .token.function-name {
+	color: #6196cc;
+}
+
+.dark-mode .token.boolean,
+.dark-mode .token.number,
+.dark-mode .token.function {
+	color: #f08d49;
+}
+
+.dark-mode .token.property,
+.dark-mode .token.class-name,
+.dark-mode .token.constant,
+.dark-mode .token.symbol {
+	color: #f8c555;
+}
+
+.dark-mode .token.selector,
+.dark-mode .token.important,
+.dark-mode .token.atrule,
+.dark-mode .token.keyword,
+.dark-mode .token.builtin {
+	color: #cc99cd;
+}
+
+.dark-mode .token.string,
+.dark-mode .token.char,
+.dark-mode .token.attr-value,
+.dark-mode .token.regex,
+.dark-mode .token.variable {
+	color: #7ec699;
+}
+
+.dark-mode .token.operator,
+.dark-mode .token.entity,
+.dark-mode .token.url {
+	color: #67cdcc;
+}
+
+.dark-mode .token.important,
+.dark-mode .token.bold {
+	font-weight: bold;
+}
+.dark-mode .token.italic {
+	font-style: italic;
+}
+
+.dark-mode .token.entity {
+	cursor: help;
+}
+
+.dark-mode .token.inserted {
+	color: green;
+}
+

assets/site.js

@@ -1,39 +1,27 @@
-var onLoad = function () {
+// Dark mode
-    var menuButton = document.querySelector('.menu-button');
+var bodyTag = document.querySelector('body');
+if (localStorage.getItem('dark_mode') === 'true') {
+    bodyTag.className = 'dark-mode';
+}
 
-    // stop execution if menu button does not exist on page
+var darkMode = document.getElementById('dark_mode');
-    if (!menuButton) {
+if (localStorage.getItem('dark_mode') === 'true') {
-        return;
+    darkMode.checked = true;
+} else {
+    darkMode.checked = false;
+}
+
+darkMode.addEventListener('change', function (e) {
+    if (this.checked) {
+        localStorage.setItem('dark_mode', true);
+        bodyTag.className = 'dark-mode';
+    } else {
+        localStorage.setItem('dark_mode', false);
+        bodyTag.className = 'light-mode';
     }
+});
 
-    var modalButton = document.querySelector('.modal-button');
+// Arrow key bindings
-    var modal = document.querySelector('.modal');
-    var modalContent = document.querySelector('.modal-content');
-    var clickEvent = function (e) {
-        var modal = document.querySelector('.modal');
-
-        if (modal.classList.contains('closed')) {
-            modal.classList.remove('closed')
-        } else {
-            modal.classList.add('closed')
-        }
-    };
-
-    menuButton.addEventListener('click', clickEvent);
-    modalButton.addEventListener('click', clickEvent);
-    modal.addEventListener('click', function (e) {
-        var target = e.target
-        do {
-            if (target == modalContent) {
-                return;
-            }
-            target = target.parentNode;
-        } while (target);
-
-        modal.classList.add('closed')
-    });
-};
-
 document.onkeydown = function (e) {
     e = e || window.event;
 
@@ -60,8 +48,38 @@ document.onkeydown = function (e) {
     }
 };
 
-if (document.readyState !== 'loading') {
+// Table of contents
-    onLoad();
+var menuButton = document.querySelector('.menu-button');
-} else {
+if (!menuButton) {
-    document.addEventListener('DOMContentLoaded', onLoad);
+    throw new Error('No menu button');
 }
+
+var modalButton = document.querySelector('.modal-button');
+var modal = document.querySelector('.modal');
+var modalContent = document.querySelector('.modal-content');
+
+var clickEvent = function (e) {
+    var modal = document.querySelector('.modal');
+
+    if (modal.classList.contains('closed')) {
+        modal.classList.remove('closed')
+    } else {
+        modal.classList.add('closed')
+    }
+};
+menuButton.addEventListener('click', clickEvent);
+modalButton.addEventListener('click', clickEvent);
+
+modal.addEventListener('click', function (e) {
+    var target = e.target
+    do {
+        if (target == modalContent) {
+            return;
+        }
+        target = target.parentNode;
+    } while (target);
+
+    modal.classList.add('closed')
+});
+
+

assets/styles.css

@@ -1,10 +1,23 @@
-@import "assets/prism.css";
+@import "assets/prism-solarized.css";
+@import "assets/prism-tomorrow-night.css";
 
 $primary-color: #2AA198;
 $primary-color-dark: #1D6E68;
-$white: #FFF;
 $drop-shadow: rgba(0, 0, 0, 0.4);
-$code-background: #FDF6E3;
+$code-highlight: #EDEDED;
+$modal-background: #FFF;
+$button-text: #FFF;
+$hr-color: #EEE;
+
+$dark-background: #222;
+$dark-text-color: #CCC;
+$dark-primary-color: #cc99cd; /*#7ec699;*/
+$dark-primary-color-dark: #8C698C; /*#568769;*/
+$dark-button-text: #222;
+$dark-code-highlight: #111;
+$dark-modal-background: #222;
+$dark-drop-shadow: rgba(0, 0, 0, 0.6);
+$dark-hr-color: #CCC;
 
 body {
     font-family: Cambria, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
@@ -12,16 +25,23 @@ body {
     padding-top: 1em;
     padding-bottom: 1em;
 }
+body.dark-mode {
+    background-color: $dark-background;
+    color: $dark-text-color;
+}
 button {
     font-family: Cambria, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
 }
 code {
-    background-color: #F0F0F0;
+    background-color: $code-highlight;
     font-family: Menlo, Monaco, Consolas, "Noto Mono", "Liberation Mono", "Courier New", monospace !important;
     font-variant-ligatures: none;
     font-size: 14px !important;
     padding: 0.10em 0.25em;
 }
+.dark-mode code {
+    background-color: $dark-code-highlight;
+}
 pre, pre code {
     background-color: transparent;
     font-family: Menlo, Monaco, Consolas, "Noto Mono", "Liberation Mono", "Courier New", monospace !important;
@@ -32,19 +52,28 @@ pre, pre code {
     padding: 0.5em 0 0.5em 0;
 }
 a {
-    color: $primary-color; /* #4078f2 */
+    color: $primary-color;
     text-decoration: none;
 }
+.dark-mode a {
+    color: $dark-primary-color;
+}
 a:hover {
     text-decoration: underline;
     color: $primary-color-dark;
 }
+.dark-mode a:hover {
+    color: $dark-primary-color-dark;
+}
 hr {
     border: 0;
     height: 1px;
-    background-color: #EEE;
+    background-color: $hr-color;
     margin: 0.5em 0;
 }
+.dark-mode hr {
+    background-color: $dark-hr-color;
+}
 p {
     line-height: 1.5;
     margin-top: 1.5em;
@@ -74,9 +103,15 @@ button {
     padding: 0;
     color: $primary-color;
 }
+.dark-mode button {
+    color: $dark-primary-color;
+}
 button:hover {
     color: $primary-color-dark;
 }
+.dark-mode button:hover {
+    color: $dark-primary-color-dark;
+}
 button:focus {
     outline: 0;
 }
@@ -86,26 +121,43 @@ button .icon {
 button .icon svg {
     fill: $primary-color;
 }
+.dark-mode button .icon svg {
+    fill: $dark-primary-color;
+}
 button:hover .icon svg {
     fill: $primary-color-dark;
 }
+.dark-mode button:hover .icon svg {
+    fill: $dark-primary-color-dark;
+}
 .button {
     background-color: $primary-color;
-    color: $white;
+    color: $button-text;
     padding: 0.5em 0.75em;
     border-radius: 2em;
     display: inline-block;
 }
+.dark-mode .button {
+    color: $dark-button-text;
+    background-color: $dark-primary-color;
+}
 .button:hover {
-    color: $white;
+    color: $button-text;
     background-color: $primary-color-dark;
     text-decoration: none;
 }
+.dark-mode .button:hover {
+    color: $dark-button-text;
+    background-color: $dark-primary-color-dark;
+}
 .button .icon {
     vertical-align: middle;
 }
 .button .icon svg {
-    fill: $white;
+    fill: $button-text;
+}
+.dark-mode .button .icon svg {
+    fill: $dark-button-text;
 }
 .clearfix:after {
     content: "";
@@ -142,19 +194,6 @@ button:hover .icon svg {
 .body-ol li {
     padding: 0.5em 0;
 }
-.grid-code {
-    display: grid;
-    grid-template-columns: 400px 1fr;
-    grid-column-gap: 3em;
-}
-.grid-code .code {
-    background-color: $code-background;
-}
-.grid-toc {
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    grid-column-gap: 1em;
-}
 .navigate-links {
     margin: 1em 0;
     float: right;
@@ -165,9 +204,17 @@ button:hover .icon svg {
 .navigate-links .icon svg {
     fill: $primary-color;
 }
-.navigate-links:hover .icon svg {
+.dark-mode .navigate-links .icon svg {
+    fill: $dark-primary-color;
+}
+.prev-link:hover .icon svg,
+.next-link:hover .icon svg {
     fill: $primary-color-dark;
 }
+.dark-mode .prev-link:hover .icon svg,
+.dark-mode .next-link:hover .icon svg {
+    fill: $dark-primary-color-dark;
+}
 .navigate-links a {
     margin-left: 1em;
 }
@@ -244,13 +291,16 @@ button:hover .icon svg {
     left: 0;
     z-index: 50;
     overflow: auto;
-    background-color: rgba(0, 0, 0, .4);
+    background-color: $drop-shadow;
+}
+.dark-mode .modal {
+    background-color: $dark-drop-shadow;
 }
 .modal-content {
     display: block;
     position: relative;
     padding: 1em;
-    background-color: $white;
+    background-color: $modal-background;
     max-width: 20em;
     height: 100%;
     animation-name: animateleft;
@@ -259,6 +309,10 @@ button:hover .icon svg {
     box-shadow: 0 0 10px 0 $drop-shadow;
     box-sizing: border-box;
 }
+.dark-mode .modal-content {
+    background-color: $dark-modal-background;
+    box-shadow: 0 0 10px 0 $dark-drop-shadow;
+}
 .modal-content .table-of-contents {
     padding: 2em;
 }

layouts/_default/baseof.html

@@ -8,19 +8,19 @@
     <meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}An online book for learning PHP{{ end }}" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    {{ $css := resources.Get "site.css" }}
+    {{ $css := resources.Get "styles.css" }}
     {{ $style := $css | resources.PostCSS }}
     {{ $secureCss := $style | resources.Fingerprint "sha512" }}
     <link rel="stylesheet" type="text/css" href="{{ $secureCss.Permalink }}" integrity="{{ $secureCss.Data.Integrity }}">
     <link rel="icon" href="/favicon-32.png">
-
-    {{ $prism := resources.Get "prism.js" }}
-    {{ $site := resources.Get "site.js"}}
-    {{ $js := slice $prism $site | resources.Concat "bundle.js" }}
-    {{ $secureJS := $js | resources.Fingerprint "sha512" }}
-    <script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
 </head>
-<body>
+<body class="light-mode">
   {{ block "main" . }}{{ end }}
+
+  {{ $prism := resources.Get "prism.js" }}
+  {{ $site := resources.Get "site.js"}}
+  {{ $js := slice $prism $site | resources.Concat "bundle.js" }}
+  {{ $secureJS := $js | resources.Fingerprint "sha512" }}
+  <script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
 </body>
 </html>

layouts/_default/single.html

@@ -9,13 +9,13 @@
         <div class="clearfix"></div>
         <div class="navigate-links">
             {{ if .Params.previous }}
-                <a href="/{{ .Params.previous }}" title="Previous" id="prev-link">
+                <a href="/{{ .Params.previous }}" title="Previous" id="prev-link" class="prev-link">
                     <div class="icon">{{ readFile "static/cheveron-outline-left.svg" | safeHTML }}</div>
                     Previous
                 </a>
             {{ end }}
             {{ if .Params.next }}
-                <a href="/{{ .Params.next }}" title="Next" id="next-link">
+                <a href="/{{ .Params.next }}" title="Next" id="next-link" class="next-link">
                     Next
                     <div class="icon">{{ readFile "static/cheveron-outline-right.svg" | safeHTML }}</div>
                 </a>

layouts/partials/menu_button.html

@@ -3,4 +3,8 @@
         <div class="icon">{{ readFile "static/show-sidebar.svg" | safeHTML }}</div>
         Table of Contents
     </button>
+    <form style="float: right; padding-left: 1rem;">
+        <label for="dark_mode">Dark Mode?</label>
+        <input type="checkbox" id="dark_mode" name="dark_mode" />
+    </form>
 </div>