Using css custom properties and moving dark mode js to top of page

assets/dark-mode.js

@@ -0,0 +1,4 @@
+var bodyTag = document.querySelector('body');
+if (localStorage.getItem('dark_mode') === 'true') {
+    bodyTag.className = 'dark-mode';
+}

assets/site.js

@@ -1,9 +1,5 @@
 // Dark mode
 var bodyTag = document.querySelector('body');
-if (localStorage.getItem('dark_mode') === 'true') {
-    bodyTag.className = 'dark-mode';
-}
-
 var darkMode = document.getElementById('dark_mode');
 if (localStorage.getItem('dark_mode') === 'true') {
     darkMode.checked = true;

assets/styles.css

@@ -1,23 +1,21 @@
-@import "assets/prism-solarized.css";
+:root {
-@import "assets/prism-tomorrow-night.css";
+    --primary-color: #2AA198;
-
+    --primary-color-dark: #1D6E68;
-$primary-color: #2AA198;
+    --drop-shadow: rgba(0, 0, 0, 0.4);
-$primary-color-dark: #1D6E68;
+    --code-highlight: #EDEDED;
-$drop-shadow: rgba(0, 0, 0, 0.4);
+    --modal-background: #FFF;
-$code-highlight: #EDEDED;
+    --button-text: #FFF;
-$modal-background: #FFF;
+    --hr-color: #EEE;
-$button-text: #FFF;
+    --dark-background: #222;
-$hr-color: #EEE;
+    --dark-text-color: #CCC;
-
+    --dark-primary-color: #cc99cd; /*#7ec699;*/
-$dark-background: #222;
+    --dark-primary-color-dark: #8C698C; /*#568769;*/
-$dark-text-color: #CCC;
+    --dark-button-text: #222;
-$dark-primary-color: #cc99cd; /*#7ec699;*/
+    --dark-code-highlight: #111;
-$dark-primary-color-dark: #8C698C; /*#568769;*/
+    --dark-modal-background: #222;
-$dark-button-text: #222;
+    --dark-drop-shadow: rgba(0, 0, 0, 0.6);
-$dark-code-highlight: #111;
+    --dark-hr-color: #444;
-$dark-modal-background: #222;
+}
-$dark-drop-shadow: rgba(0, 0, 0, 0.6);
-$dark-hr-color: #444;
 
 body {
     font-family: Cambria, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
@@ -26,21 +24,21 @@ body {
     padding-bottom: 1em;
 }
 body.dark-mode {
-    background-color: $dark-background;
+    background-color: var(--dark-background);
-    color: $dark-text-color;
+    color: var(--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: $code-highlight;
+    background-color: var(--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;
+    background-color: var(--dark-code-highlight);
 }
 pre, pre code {
     background-color: transparent;
@@ -52,27 +50,27 @@ pre, pre code {
     padding: 0.5em 0 0.5em 0;
 }
 a {
-    color: $primary-color;
+    color: var(--primary-color);
     text-decoration: none;
 }
 .dark-mode a {
-    color: $dark-primary-color;
+    color: var(--dark-primary-color);
 }
 a:hover {
     text-decoration: underline;
-    color: $primary-color-dark;
+    color: var(--primary-color-dark);
 }
 .dark-mode a:hover {
-    color: $dark-primary-color-dark;
+    color: var(--dark-primary-color-dark);
 }
 hr {
     border: 0;
     height: 1px;
-    background-color: $hr-color;
+    background-color: var(--hr-color);
     margin: 0.5em 0;
 }
 .dark-mode hr {
-    background-color: $dark-hr-color;
+    background-color: var(--dark-hr-color);
 }
 p {
     line-height: 1.5;
@@ -101,16 +99,16 @@ button {
     border: 0;
     cursor: pointer;
     padding: 0;
-    color: $primary-color;
+    color: var(--primary-color);
 }
 .dark-mode button {
-    color: $dark-primary-color;
+    color: var(--dark-primary-color);
 }
 button:hover {
-    color: $primary-color-dark;
+    color: var(--primary-color-dark);
 }
 .dark-mode button:hover {
-    color: $dark-primary-color-dark;
+    color: var(--dark-primary-color-dark);
 }
 button:focus {
     outline: 0;
@@ -119,45 +117,45 @@ button .icon {
     vertical-align: middle;
 }
 button .icon svg {
-    fill: $primary-color;
+    fill: var(--primary-color);
 }
 .dark-mode button .icon svg {
-    fill: $dark-primary-color;
+    fill: var(--dark-primary-color);
 }
 button:hover .icon svg {
-    fill: $primary-color-dark;
+    fill: var(--primary-color-dark);
 }
 .dark-mode button:hover .icon svg {
-    fill: $dark-primary-color-dark;
+    fill: var(--dark-primary-color-dark);
 }
 .button {
-    background-color: $primary-color;
+    background-color: var(--primary-color);
-    color: $button-text;
+    color: var(--button-text);
     padding: 0.5em 0.75em;
     border-radius: 2em;
     display: inline-block;
 }
 .dark-mode .button {
-    color: $dark-button-text;
+    color: var(--dark-button-text);
-    background-color: $dark-primary-color;
+    background-color: var(--dark-primary-color);
 }
 .button:hover {
-    color: $button-text;
+    color: var(--button-text);
-    background-color: $primary-color-dark;
+    background-color: var(--primary-color-dark);
     text-decoration: none;
 }
 .dark-mode .button:hover {
-    color: $dark-button-text;
+    color: var(--dark-button-text);
-    background-color: $dark-primary-color-dark;
+    background-color: var(--dark-primary-color-dark);
 }
 .button .icon {
     vertical-align: middle;
 }
 .button .icon svg {
-    fill: $button-text;
+    fill: var(--button-text);
 }
 .dark-mode .button .icon svg {
-    fill: $dark-button-text;
+    fill: var(--dark-button-text);
 }
 .clearfix:after {
     content: "";
@@ -202,18 +200,18 @@ button:hover .icon svg {
     vertical-align: middle;
 }
 .navigate-links .icon svg {
-    fill: $primary-color;
+    fill: var(--primary-color);
 }
 .dark-mode .navigate-links .icon svg {
-    fill: $dark-primary-color;
+    fill: var(--dark-primary-color);
 }
 .prev-link:hover .icon svg,
 .next-link:hover .icon svg {
-    fill: $primary-color-dark;
+    fill: var(--primary-color-dark);
 }
 .dark-mode .prev-link:hover .icon svg,
 .dark-mode .next-link:hover .icon svg {
-    fill: $dark-primary-color-dark;
+    fill: var(--dark-primary-color-dark);
 }
 .navigate-links a {
     margin-left: 1em;
@@ -299,27 +297,27 @@ button:hover .icon svg {
     left: 0;
     z-index: 50;
     overflow: auto;
-    background-color: $drop-shadow;
+    background-color: var(--drop-shadow);
 }
 .dark-mode .modal {
-    background-color: $dark-drop-shadow;
+    background-color: var(--dark-drop-shadow);
 }
 .modal-content {
     display: block;
     position: relative;
     padding: 1em;
-    background-color: $modal-background;
+    background-color: var(--modal-background);
     max-width: 20em;
     height: 100%;
     animation-name: animateleft;
     animation-duration: .4s;
     overflow: auto;
-    box-shadow: 0 0 10px 0 $drop-shadow;
+    box-shadow: 0 0 10px 0 var(--drop-shadow);
     box-sizing: border-box;
 }
 .dark-mode .modal-content {
-    background-color: $dark-modal-background;
+    background-color: var(--dark-modal-background);
-    box-shadow: 0 0 10px 0 $dark-drop-shadow;
+    box-shadow: 0 0 10px 0 var(--dark-drop-shadow);
 }
 .modal-content .table-of-contents {
     padding: 2em;

layouts/_default/baseof.html

@@ -8,19 +8,32 @@
     <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">
 
+    
+    {{ $prismSolarized := resources.Get "prism-solarized.css" }}
+    {{ $prismTomorrowNight := resources.Get "prism-tomorrow-night.css" }}
+    {{ $securePrismSolarized := $prismSolarized | resources.Fingerprint "sha512" }}
+    {{ $securePrismTomorrowNight := $prismTomorrowNight | resources.Fingerprint "sha512" }}
+
     {{ $css := resources.Get "styles.css" }}
     {{ $style := $css | resources.PostCSS }}
     {{ $secureCss := $style | resources.Fingerprint "sha512" }}
+    <link rel="stylesheet" type="text/css" href="{{ $securePrismSolarized.Permalink }}" integrity="{{ $securePrismSolarized.Data.Integrity }}">
+    <link rel="stylesheet" type="text/css" href="{{ $securePrismTomorrowNight.Permalink }}" integrity="{{ $securePrismTomorrowNight.Data.Integrity }}">
     <link rel="stylesheet" type="text/css" href="{{ $secureCss.Permalink }}" integrity="{{ $secureCss.Data.Integrity }}">
     <link rel="icon" href="/favicon-32.png">
 </head>
 <body class="light-mode">
-  {{ block "main" . }}{{ end }}
+    {{ $darkMode := resources.Get "dark-mode.js" }}
+    {{ $darkModeSecure := $darkMode | resources.Fingerprint "sha512" }}
+    <script type="text/javascript" src="{{ $darkModeSecure.Permalink }}" integrity="{{ $darkModeSecure.Data.Integrity }}"></script>
 
-  {{ $prism := resources.Get "prism.js" }}
+    {{ block "main" . }}{{ end }}
-  {{ $site := resources.Get "site.js"}}
+
-  {{ $js := slice $prism $site | resources.Concat "bundle.js" }}
+    {{ $prism := resources.Get "prism.js" }}
-  {{ $secureJS := $js | resources.Fingerprint "sha512" }}
+    {{ $site := resources.Get "site.js"}}
-  <script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
+    {{ $prismSecure := $prism | resources.Fingerprint "sha512" }}
+    {{ $siteSecure := $site | resources.Fingerprint "sha512" }}
+    <script type="text/javascript" src="{{ $prismSecure.Permalink }}" integrity="{{ $prismSecure.Data.Integrity }}"></script>
+    <script type="text/javascript" src="{{ $siteSecure.Permalink }}" integrity="{{ $siteSecure.Data.Integrity }}"></script>
 </body>
 </html>

package-lock.json

@@ -1546,6 +1546,12 @@
       "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
       "dev": true
     },
+    "ip-regex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.1.0.tgz",
+      "integrity": "sha512-pKnZpbgCTfH/1NLIlOduP/V+WRXzC2MOz3Qo8xmxk8C5GudJLgK5QyLVXOSWy3ParAH7Eemurl3xjv/WXYFvMA==",
+      "dev": true
+    },
     "is-accessor-descriptor": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
@@ -1694,6 +1700,15 @@
       "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
       "dev": true
     },
+    "is-url-superb": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-url-superb/-/is-url-superb-3.0.0.tgz",
+      "integrity": "sha512-3faQP+wHCGDQT1qReM5zCPx2mxoal6DzbzquFlCYJLWyy4WPTved33ea2xFbX37z4NoriEwZGIYhFtx8RUB5wQ==",
+      "dev": true,
+      "requires": {
+        "url-regex": "^5.0.0"
+      }
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -2112,12 +2127,6 @@
       "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
       "dev": true
     },
-    "path-parse": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
-      "dev": true
-    },
     "path-type": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
@@ -2189,24 +2198,14 @@
         "yargs": "^12.0.1"
       }
     },
-    "postcss-import": {
+    "postcss-custom-properties": {
-      "version": "12.0.1",
+      "version": "9.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-9.0.2.tgz",
-      "integrity": "sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==",
+      "integrity": "sha512-WHaQrEp3gJ6mgxBA4mGJKW6DSVfy2IFnKPFAb2IEulgxGUW8nWp1NkOD/rWR6e2uIuAdnTa0LXSupST7daniAw==",
       "dev": true,
       "requires": {
-        "postcss": "^7.0.1",
+        "postcss": "^7.0.17",
-        "postcss-value-parser": "^3.2.3",
+        "postcss-values-parser": "^3.0.5"
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "dependencies": {
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
       }
     },
     "postcss-load-config": {
@@ -2231,21 +2230,39 @@
         "postcss": "^7.0.7"
       }
     },
-    "postcss-simple-vars": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-5.0.2.tgz",
-      "integrity": "sha512-xWIufxBoINJv6JiLb7jl5oElgp+6puJwvT5zZHliUSydoLz4DADRB3NDDsYgfKVwojn4TDLiseoC65MuS8oGGg==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.14"
-      }
-    },
     "postcss-value-parser": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.0.tgz",
       "integrity": "sha512-ESPktioptiSUchCKgggAkzdmkgzKfmp0EU8jXH+5kbIUB+unr0Y4CY9SRMvibuvYUBjNh1ACLbxqYNpdTQOteQ==",
       "dev": true
     },
+    "postcss-values-parser": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-3.0.5.tgz",
+      "integrity": "sha512-0N6EUBx2Vzl0c9LQipuus90EkVh7saBQFRhgAYpHHcDCIvxRt+K/q0zwcIYtDQVNs5Y9NGqei4AuCEvAOsePfQ==",
+      "dev": true,
+      "requires": {
+        "color-name": "^1.1.4",
+        "is-number": "^7.0.0",
+        "is-url-superb": "^3.0.0",
+        "postcss": "^7.0.5",
+        "url-regex": "^5.0.0"
+      },
+      "dependencies": {
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+          "dev": true
+        }
+      }
+    },
     "pretty-hrtime": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
@@ -2351,15 +2368,6 @@
       "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
       "dev": true
     },
-    "resolve": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz",
-      "integrity": "sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==",
-      "dev": true,
-      "requires": {
-        "path-parse": "^1.0.6"
-      }
-    },
     "resolve-from": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
@@ -2672,6 +2680,12 @@
         "has-flag": "^3.0.0"
       }
     },
+    "tlds": {
+      "version": "1.207.0",
+      "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.207.0.tgz",
+      "integrity": "sha512-k7d7Q1LqjtAvhtEOs3yN14EabsNO8ZCoY6RESSJDB9lst3bTx3as/m1UuAeCKzYxiyhR1qq72ZPhpSf+qlqiwg==",
+      "dev": true
+    },
     "to-object-path": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
@@ -2784,6 +2798,16 @@
       "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=",
       "dev": true
     },
+    "url-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/url-regex/-/url-regex-5.0.0.tgz",
+      "integrity": "sha512-O08GjTiAFNsSlrUWfqF1jH0H1W3m35ZyadHrGv5krdnmPPoxP27oDTqux/579PtaroiSGm5yma6KT1mHFH6Y/g==",
+      "dev": true,
+      "requires": {
+        "ip-regex": "^4.1.0",
+        "tlds": "^1.203.0"
+      }
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",

package.json

@@ -18,8 +18,7 @@
   "devDependencies": {
     "autoprefixer": "^9.6.1",
     "postcss-cli": "^6.1.3",
-    "postcss-import": "^12.0.1",
+    "postcss-custom-properties": "^9.0.2"
-    "postcss-simple-vars": "^5.0.2"
   },
   "dependencies": {}
 }

postcss.config.js

@@ -1,7 +1,6 @@
 module.exports = {
     plugins: [
-        require('postcss-import'),
+        require('postcss-custom-properties'),
-        require('postcss-simple-vars'),
         require('autoprefixer'),
     ]
 }