Add button to toggle dark mode

locales/en.json

@@ -35,5 +35,6 @@
   "Among with no break line": "Among with ",
   "Type to search": "Type to search",
   "No results for your search, try something different.": "No results for your search, try something different.",
-  "JavaScript license information": "JavaScript license information"
+  "JavaScript license information": "JavaScript license information",
+  "Toggle dark mode": "Toggle dark mode"
 }

locales/es.json

@@ -35,5 +35,6 @@
   "Among with no break line": "Junto con ",
   "Type to search": "Escribe para buscar",
   "No results for your search, try something different.": "No hay resultados para tu búsqueda, prueba algo diferente.",
-  "JavaScript license information": "Información de licencia JavaScript"
+  "JavaScript license information": "Información de licencia JavaScript",
+  "Toggle dark mode": "Cambiar modo oscuro"
 }

package.json

@@ -54,5 +54,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "0.5.8"
+  "version": "0.5.9"
 }

partials/header.hbs

@@ -99,9 +99,15 @@ This header template is shared across all the pages.
               </li>
             </ul>
           </nav>
-          <button class="m-icon-button in-menu-main js-open-search" aria-label="Open search">
-            <span class="icon-search"></span>
-          </button>
+          <div class="m-nav__right">
+            <button class="m-icon-button in-menu-main js-open-search" aria-label="Open search">
+              <span class="icon-search"></span>
+            </button>
+            <div class="m-toggle-darkmode js-tooltip" data-tippy-content="{{t "Toggle dark mode"}}">
+              <input type="checkbox" class="js-toggle-darkmode">
+              <div></div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/js/app.js

@@ -33,6 +33,8 @@ $(document).ready(() => {
   const $inputSearch = $('.js-input-search')
   const $searchResults = $('.js-search-results')
   const $searchNoResults = $('.js-no-results')
+  const $toggleDarkMode = $('.js-toggle-darkmode')
+  const currentTheme = localStorage.getItem('theme')
 
   let fuse = null
   let submenuIsOpen = false
@@ -163,6 +165,16 @@ $(document).ready(() => {
     }
   })
 
+  $toggleDarkMode.change(() => {
+    if ($toggleDarkMode.is(':checked')) {
+      $('html').attr('data-theme', 'dark')
+      localStorage.setItem('theme', 'dark')
+    } else {
+      $('html').attr('data-theme', 'light')
+      localStorage.setItem('theme', 'light')
+    }
+  })
+
   $(window).click((e) => {
     if (submenuIsOpen) {
       if ($submenuOption && !$submenuOption.contains(e.target)) {
@@ -172,6 +184,14 @@ $(document).ready(() => {
     }
   })
 
+  if (currentTheme) {
+    $('html').attr('data-theme', currentTheme)
+
+    if (currentTheme === 'dark') {
+      $toggleDarkMode.attr('checked', true)
+    }
+  }
+
   var headerElement = document.querySelector('.js-header')
 
   if (headerElement) {
@@ -192,7 +212,7 @@ $(document).ready(() => {
       infinite: false,
       mobileFirst: true,
       variableWidth: true,
-      rtl: isRTL
+      rtl: isRTL()
     })
   }
 

src/sass/app.scss

@@ -33,6 +33,7 @@
 @import "components/header/recent-articles";
 @import "components/header/recent-article";
 @import "components/header/tags";
+@import "components/header/toggle-darkmode";
 @import "components/hero/hero";
 @import "components/hero/avatar";
 @import "components/hero/title";

src/sass/common/_themes.scss

@@ -1,4 +1,5 @@
-:root {
+:root,
+[data-theme="light"] {
   --background-color: #fff;
   --primary-foreground-color: #4a4a4a;
   --secondary-foreground-color: #000;
@@ -15,10 +16,31 @@
   --submenu-shadow-color-opacity: 0.25;
   --button-shadow-color-normal: rgba(108, 108, 108, 0.2);
   --button-shadow-color-hover: rgba(108, 108, 108, 0.3);
+  --toggle-darkmode-button-color: #fff;
+}
+
+[data-theme="dark"] {
+  --background-color: #111;
+  --primary-foreground-color: #ccc;
+  --secondary-foreground-color: #fff;
+  --primary-subtle-color: #2c2fe6;
+  --secondary-subtle-color: #141920;
+  --titles-color: #b4b4b4;
+  --link-color: #2c2fe6;
+  --primary-border-color: #1d1d1d;
+  --secondary-border-color: #0f0f0f;
+  --article-shadow-normal: 0 4px 5px 5px rgba(0,0,0,0.1);
+  --article-shadow-hover: 0 4px 5px 10px rgba(0,0,0,0.1);
+  --transparent-background-color: rgba(0,0,0,0.99);
+  --footer-background-color: #080808;
+  --submenu-shadow-color-opacity: 0.55;
+  --button-shadow-color-normal: rgba(10, 10, 10, 0.5);
+  --button-shadow-color-hover: rgba(10, 10, 10, 0.5);
+  --toggle-darkmode-button-color: #efd114;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not([data-theme="light"]) {
     --background-color: #111;
     --primary-foreground-color: #ccc;
     --secondary-foreground-color: #fff;
@@ -35,5 +57,6 @@
     --submenu-shadow-color-opacity: 0.55;
     --button-shadow-color-normal: rgba(10, 10, 10, 0.5);
     --button-shadow-color-hover: rgba(10, 10, 10, 0.5);
+    --toggle-darkmode-button-color: #efd114;
   }
 }

src/sass/components/header/_menu.scss

@@ -35,9 +35,11 @@
 
 .m-menu__main {
   padding: 50px 0 5px;
+  min-height: 100%;
 
   @include respond-to('medium') {
     padding: 0;
+    min-height: 0;
   }
 }
 

src/sass/components/header/_nav.scss

@@ -53,6 +53,12 @@
   }
 }
 
+.m-nav__right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
 .rtl {
   .m-nav__left ul li {
     @include respond-to('medium') {

src/sass/components/header/_toggle-darkmode.scss

@@ -0,0 +1,58 @@
+.m-toggle-darkmode {
+  position: fixed;
+  right: $mobile-space;
+  bottom: $mobile-space;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  overflow: hidden;
+
+  @include respond-to('medium') {
+    position: relative;
+    right: auto;
+    bottom: auto;
+    margin-left: 20px;
+  }
+
+  input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    outline: 0;
+    border: 0;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 2;
+    @extend .no-appearance;
+  }
+
+  input::-moz-focus-inner { 
+    border: 0; 
+  }
+
+  div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    overflow: hidden;
+    background-color: $titles;
+    z-index: 1;
+
+    &:after {
+      content: '';
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: var(--toggle-darkmode-button-color);
+      @include transition(background-color linear 0.2s);
+    }
+  }
+}