Add darkmode styles, toggle scripts, and toggle icons

_includes/layout/base/dark-mode-toggle.html

@@ -0,0 +1,3 @@
+<div class="dark-theme-toggle">
+    <input type="checkbox" />
+</div>

_includes/layout/base/footer-js.html

@@ -7,6 +7,7 @@ http://opensource.org/licenses/MIT.
   fallbackSVG();
   addAnchorLinks();
   trackOutgoingLinks();
+  toggleDarkMode();
 </script>
 
 {% comment %}

_includes/layout/base/footer-license.html

@@ -22,6 +22,9 @@ http://opensource.org/licenses/MIT.
           </label>
         </div>
       </div>
+      <div class="row">
+        {% include layout/base/dark-mode-toggle.html %}
+      </div>
     </div>
   </div>
 </div>

_sass/_dark-mode.scss

@@ -0,0 +1,185 @@
+/*** 
+Dark style guide
+***/
+
+$background: #090c14;
+$touch-bg: #121212;
+$text: #fff;
+$primary: #53a7ea;
+$primary-variant: #cc6500;
+$secondary: #ff9833;
+$error: #cf6679;
+$high-emphasis-opacity: 87%;
+$med-emphasis-opactiy: 60%;
+$disabled-emphasis-opacity: 38%;
+
+/* styles */
+
+body {
+    background-color: $background;
+    color: $text;
+    opacity: $high-emphasis-opacity;
+}
+h3,h4,h5 {
+    color: $text;
+    opacity: $high-emphasis-opacity;
+}
+table {
+    border-color: $text;
+    opacity: $med-emphasis-opactiy;
+}
+.btn-light {
+    background-color: $secondary;
+    border-color: $secondary;
+}
+.btn-bright,
+.btn,
+.btn-light {
+    color: $text;
+    opacity: $high-emphasis-opacity;
+}
+
+
+/* Specific blocks */
+.mainhero,
+.mainoverview,
+.maindesc,
+.head {
+    background-color: $background;
+}
+.maindesc-text,
+.mainlist-item p,
+.mainsummary {
+    color: $text;
+    opacity: $high-emphasis-opacity;
+}
+.maincard-link {
+    color: $text;
+    opacity: $med-emphasis-opactiy;
+}
+/* Top main menu */
+.menusimple {
+    border-color: $text;
+    opacity: $high-emphasis-opacity;
+}
+.menusimple>li a,
+.menusimple>li a:active,
+.menusimple>li a:visited,
+.menusimple>li a:link {
+    color: $text;
+    /*opacity: $high-emphasis-opacity;*/
+}
+.menusimple > li a:hover,
+.menusimple>li>ul li:hover,
+.menusimple li:hover>a,
+.menusimple li.active>a {
+    color: #fff;
+    opacity: $high-emphasis-opacity;
+}
+.menusimple>li>ul li:hover {
+    background-color: $touch-bg;
+}
+.menusimple > li ul {
+    background-color: $touch-bg;
+    border-color: #fff;
+} 
+
+/* Language drop down menu */
+.lang li a,
+.lang li a:link,
+.lang li a:visited,
+.lang li a:active {
+    color: $text;
+    opacity: $high-emphasis-opacity;
+}
+.lang li ul {
+   background-color: $touch-bg;
+   border-color: $text;
+}
+.lang li ul li a:hover,
+.lang:hover li a {
+    color: $text;
+    background: inherit;
+    opacity: $med-emphasis-opactiy;
+}
+
+/* Inner pages */
+.content {
+    background-color: $background;
+}
+.toccontent li,
+.post-name,
+.start h2,
+.glossary_term,
+.bitcoin-paper div > p,
+.footer {
+    color: $text;
+    opacity: $high-emphasis-opacity;
+}
+.start p,
+.summary {
+    color: $text;
+    opacity: $med-emphasis-opactiy;
+}
+.column-text p,
+.toccontent p,
+.introlink,
+.toc div > ul > li > a,
+.toc div > ul > li > ul a {
+    color: $text;
+    opacity: $high-emphasis-opacity;
+} 
+.toc + .toccontent,
+.toccontent-block {
+    border-left-color: $text;
+    opacity: $high-emphasis-opacity;
+}
+.boxexpand.expanded>h1:first-child,
+.boxexpand.expanded>h2:first-child,
+.boxexpand.expanded>h3:first-child {
+    background-color: $touch-bg;
+}
+.card h2 {
+    color: $primary-variant;
+}
+.card,                  
+.organization-img {
+    border-color: $touch-bg;
+}
+.organization-country {
+    color: $primary-variant;
+}
+.community-row,
+.card p {
+    border-bottom-color:$text;
+    opacity: $high-emphasis-opacity;
+}
+.develdocdisclaimer {
+    background-color: $error;
+}
+.develdocdisclaimer a {
+    color: $text;
+    text-decoration: underline;
+    opacity: $high-emphasis-opacity;
+}
+/* Browser elements / BOM */
+
+::-webkit-scrollbar {
+    background-color: #1c1e1f;
+    color: #c5c1b9;
+}
+::-webkit-scrollbar-thumb {
+    background-color: #2a2c2e;
+}
+::-webkit-scrollbar-thumb:hover {
+    background-color: #323537;
+}
+::-webkit-scrollbar-thumb:active {
+    background-color: #3d4043;
+}
+::-webkit-scrollbar-corner {
+    background-color: #181a1b;
+}
+* {
+    scrollbar-color: #2a2c2e #1c1e1f;
+}

_sass/screen.scss

@@ -3362,6 +3362,45 @@ br.big {
     color: #FF7E00;
     text-align: left;
 }
+/* Styles for dark mode toggle button */
+.dark-theme-toggle input {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    cursor: pointer;
+}
+.dark-theme-toggle {
+    position: relative;
+}
+.dark-theme-toggle::before {
+    background-image: url(../img/icons/moon-regular.svg);
+    height: 30px;
+    width: 30px;
+    content: "";
+    background-repeat: no-repeat;
+    cursor: pointer;
+    display: block;
+}
+html[data-theme="dark"] .dark-theme-toggle::before {
+    background-image: url(../img/icons/moon-solid.svg);
+    -moz-transform: scaleX(-1);
+    /* Gecko */
+    -o-transform: scaleX(-1);
+    /* Opera */
+    -webkit-transform: scaleX(-1);
+    /* Webkit */
+    transform: scaleX(-1);
+    /* Standard */
+    filter: FlipH;
+    /* IE 6/7/8 */
+}
+/* End of styles for dark mode toggle button */
+
 /*Styles specific to printing*/
 
 @media print{
@@ -5034,3 +5073,10 @@ br.big {
 @import 'wallet-selector';
 @import 'helper';
 @import 'donation-banner';
+
+@media screen and (prefers-color-scheme: dark) {
+    @import 'dark-mode';
+}
+html[data-theme="dark"] {
+    @import 'dark-mode'; 
+} 

js/base.js

@@ -204,6 +204,37 @@ function addAnchorLinks() {
   }
 }
 
+/* Start dark mode toggler */
+function toggleDarkMode() { 
+
+  const toggleSwitch = document.querySelector('.dark-theme-toggle input[type="checkbox"]');
+  const currentTheme = localStorage.getItem('theme');
+
+  if (currentTheme) {
+    document.documentElement.setAttribute('data-theme', currentTheme);
+
+    if (currentTheme === 'dark') {
+      toggleSwitch.checked = true;
+    }
+
+  }
+
+  function switchTheme(e) {
+    if (e.target.checked) {
+      document.documentElement.setAttribute('data-theme', 'dark');
+      localStorage.setItem('theme', 'dark');
+    }
+    else {
+      document.documentElement.setAttribute('data-theme', 'default');
+      localStorage.setItem('theme', 'default');
+    }
+  }
+
+  toggleSwitch.addEventListener('change', switchTheme, false);
+
+}
+/* End dark mode toggler */
+
 /* jshint ignore:start */
 
  function _gaLt(event) {