Night Mode + CSS Additions (#7929)

* Night Mode and More Hotkeys

* Nightmode CSS adjustments

* Removed Redundant Line

* Wrapped JSON.parse statements in a try catch block

client/less/challenge.less

@@ -29,7 +29,7 @@
     white-space: pre;
     padding: 5px 10px;
     margin-bottom: 10px;
-    margin-top: -10px;
+    margin-top: -5px;
     overflow: auto;
   }
   dfn {
@@ -111,3 +111,28 @@ iframe.iphone {
     right: -207px;
   }
 }
+
+.night {
+  .challenge-instructions blockquote {
+    background-color: #242424;
+    border-color: #515151;
+    color: #ABABAB
+  }
+  div.CodeMirror {
+    background-color:#242424;
+    color:#ABABAB;
+    &-gutters {
+      background-color:#242424;
+      color:#ABABAB;
+    }
+    .cm-bracket, .cm-tag {
+      color:#5CAFD6;
+    }
+    .cm-property, .cm-string {
+      color:#B5753A;
+    }
+    .cm-keyword, .cm-attribute {
+      color:#9BBBDC;
+    }
+  }
+}

client/less/main.less

@@ -54,6 +54,10 @@ html {
   border-color: @brand-primary;
 }
 
+body {
+  display: none;
+}
+
 body.full-screen-body-background {
   background-color: @body-bg;
 }
@@ -678,7 +682,7 @@ thead {
 
 
 /**
- * Bonfire styling
+ * Challenge styling
  */
 
 form.code span {
@@ -986,7 +990,7 @@ hr {
 }
 
 code {
-  padding: 0;
+  padding: 1px 5px;
 }
 
 @media only screen and (min-width: 993px) {
@@ -1133,6 +1137,49 @@ code {
   }
 }
 
+.night {
+  background-color: #333;
+  color: #999;
+  .btn-group,
+  .text-success,
+  .challenge-list-header,
+  .fcc-footer {
+    background-color: #333;
+  }
+  .navbar-default .navbar-nav > li > a {
+    color: #CCC;
+    &:hover {
+      background-color: #666;
+    }
+  }
+  a, .input-group-addon {
+    color: #CCC;
+  }
+  .black-text {
+    color:#111;
+  }
+  code {
+    background-color: #2A2A2A;
+    color: #006400;
+  }
+  .fcc-footer {
+    a {
+      &hover {
+        background-color: #333;
+      }
+    }
+  }
+  .btn-primary {
+    background-color: #006400;
+    color:#CCC;
+    transition: color 0.2s, background-color 0.2s;
+    &:hover {
+      background-color: #ABABAB!important;
+      color: #333!important;
+    }
+  }
+}
+
 @import "chat.less";
 @import "jobs.less";
 @import "challenge.less";

client/less/map.less

@@ -2,6 +2,7 @@
  * based off of https://github.com/gitterHQ/sidecar
  * license: MIT
  */
+ 
 .map-aside {
     width:500px;
 
@@ -314,3 +315,33 @@
 .map-aside-action-collapse {
     background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzEuNDI5IDE3MS40MjkiIGZpbGw9IiMzYTMxMzMiPjxwYXRoIGQ9Ik0xMjIuNDMzLDEwNi4xMzhsLTE2LjI5NSwxNi4yOTVjLTAuNzQ0LDAuNzQ0LTEuNiwxLjExNi0yLjU2NiwxLjExNmMtMC45NjgsMC0xLjgyMy0wLjM3Mi0yLjU2Ny0xLjExNmwtMTUuMjktMTUuMjkgbC0xNS4yOSwxNS4yOWMtMC43NDQsMC43NDQtMS42LDEuMTE2LTIuNTY3LDEuMTE2cy0xLjgyMy0wLjM3Mi0yLjU2Ny0xLjExNmwtMTYuMjk0LTE2LjI5NWMtMC43NDQtMC43NDQtMS4xMTYtMS42LTEuMTE2LTIuNTY2IGMwLTAuOTY4LDAuMzcyLTEuODIzLDEuMTE2LTIuNTY3bDE1LjI5LTE1LjI5bC0xNS4yOS0xNS4yOWMtMC43NDQtMC43NDQtMS4xMTYtMS42LTEuMTE2LTIuNTY3czAuMzcyLTEuODIzLDEuMTE2LTIuNTY3IEw2NS4yOSw0OC45OTZjMC43NDQtMC43NDQsMS42LTEuMTE2LDIuNTY3LTEuMTE2czEuODIzLDAuMzcyLDIuNTY3LDEuMTE2bDE1LjI5LDE1LjI5bDE1LjI5LTE1LjI5IGMwLjc0NC0wLjc0NCwxLjYtMS4xMTYsMi41NjctMS4xMTZjMC45NjcsMCwxLjgyMiwwLjM3MiwyLjU2NiwxLjExNmwxNi4yOTUsMTYuMjk0YzAuNzQ0LDAuNzQ0LDEuMTE2LDEuNiwxLjExNiwyLjU2NyBzLTAuMzcyLDEuODIzLTEuMTE2LDIuNTY3bC0xNS4yOSwxNS4yOWwxNS4yOSwxNS4yOWMwLjc0NCwwLjc0NCwxLjExNiwxLjYsMS4xMTYsMi41NjcgQzEyMy41NDksMTA0LjUzOSwxMjMuMTc3LDEwNS4zOTQsMTIyLjQzMywxMDYuMTM4eiBNMTQ2LjQyOSw4NS43MTRjMC0xMS4wMTItMi43MTctMjEuMTY4LTguMTQ4LTMwLjQ2OSBzLTEyLjc5Ny0xNi42NjctMjIuMDk4LTIyLjA5OFM5Ni43MjYsMjUsODUuNzE0LDI1cy0yMS4xNjgsMi43MTYtMzAuNDY5LDguMTQ3UzM4LjU3OSw0NS45NDUsMzMuMTQ3LDU1LjI0NlMyNSw3NC43MDMsMjUsODUuNzE0IHMyLjcxNiwyMS4xNjgsOC4xNDcsMzAuNDY5czEyLjc5NywxNi42NjYsMjIuMDk4LDIyLjA5OHMxOS40NTcsOC4xNDgsMzAuNDY5LDguMTQ4czIxLjE2OC0yLjcxNywzMC40NjktOC4xNDggczE2LjY2Ni0xMi43OTcsMjIuMDk4LTIyLjA5OFMxNDYuNDI5LDk2LjcyNiwxNDYuNDI5LDg1LjcxNHogTTE3MS40MjksODUuNzE0YzAsMTUuNTUxLTMuODMyLDI5Ljg5My0xMS40OTYsNDMuMDI0IGMtNy42NjQsMTMuMTMzLTE4LjA2MiwyMy41My0zMS4xOTQsMzEuMTk0Yy0xMy4xMzIsNy42NjQtMjcuNDc0LDExLjQ5Ni00My4wMjQsMTEuNDk2cy0yOS44OTItMy44MzItNDMuMDI0LTExLjQ5NiBjLTEzLjEzMy03LjY2NC0yMy41MzEtMTguMDYyLTMxLjE5NC0zMS4xOTRDMy44MzIsMTE1LjYwNywwLDEwMS4yNjUsMCw4NS43MTRTMy44MzIsNTUuODIyLDExLjQ5Niw0Mi42OSBjNy42NjQtMTMuMTMzLDE4LjA2Mi0yMy41MzEsMzEuMTk0LTMxLjE5NEM1NS44MjIsMy44MzIsNzAuMTY0LDAsODUuNzE0LDBzMjkuODkzLDMuODMyLDQzLjAyNCwxMS40OTYgYzEzLjEzMyw3LjY2NCwyMy41MywxOC4wNjIsMzEuMTk0LDMxLjE5NEMxNjcuNTk3LDU1LjgyMiwxNzEuNDI5LDcwLjE2NCwxNzEuNDI5LDg1LjcxNHoiLz48L3N2Zz4=)
 }
+
+.night {
+  .map-fixed-header {
+    background-color: #333;
+  }
+  .map-aside {
+    border-left-color:#222; 
+  }
+  #map-filter, .input-group-addon {
+    border-color: #222;
+    background-color: #666;
+    color:#ABABAB;
+  }
+  .map-accordion h2 > a {
+    background:#666;
+  }
+  .map-accordion a:focus, #noneFound {
+    color: #ABABAB;
+  }
+  .input-group-addon {
+    &.filled{
+      background: #555;
+      border-color: #000d00;
+      color: white;
+    }
+  }
+  .challenge-title {
+    color: #999;
+  }
+}

client/main.js

@@ -356,7 +356,7 @@ $(document).ready(function() {
 
   function showMap() {
     if (!main.isMapAsideLoad) {
-      var mapAside = $('<iframe>');
+      var mapAside = $('<iframe id = "map-aside-frame" >');
       mapAside.attr({
         src: '/map-aside',
         frameBorder: '0'
@@ -534,4 +534,82 @@ $(document).ready(function() {
 
   // keyboard shortcuts: open map
   window.Mousetrap.bind('g m', toggleMap);
+
+  // Night Mode
+  function changeMode() {
+    var newValue = false;
+    try {
+      newValue = !JSON.parse(localStorage.getItem('nightMode'));
+    } catch (e) {
+      console.error('Error parsing value form local storage:', 'nightMode', e);
+    }
+    localStorage.setItem('nightMode', String(newValue));
+    toggleNightMode(newValue);
+  }
+
+  function toggleNightMode(nightModeEnabled) {
+    var iframe = document.getElementById('map-aside-frame');
+    if (iframe) {
+      iframe.src = iframe.src;
+    }
+    var body = $('body');
+    body.hide();
+    if (nightModeEnabled) {
+      body.addClass('night');
+    } else {
+      body.removeClass('night');
+    }
+    body.fadeIn('100');
+  }
+
+  if (typeof localStorage.getItem('nightMode') !== 'undefined') {
+    var oldVal = false;
+    try {
+      oldVal = JSON.parse(localStorage.getItem('nightMode'));
+    } catch (e) {
+      console.error('Error parsing value form local storage:', 'nightMode', e);
+    }
+    toggleNightMode(oldVal);
+    $('.nightMode-btn').on('click', function() {
+      changeMode();
+    });
+  } else {
+    localStorage.setItem('nightMode', 'false');
+    toggleNightMode('false');
+  }
+
+  // Hot Keys
+  window.Mousetrap.bind('g t n', changeMode);
+  window.Mousetrap.bind('g n n', () => {
+    // Next Challenge
+    window.location = '/challenges/next-challenge';
+  });
+  window.Mousetrap.bind('g n a', () => {
+    // Account
+    window.location = '/account';
+  });
+  window.Mousetrap.bind('g n m', () => {
+    // Map
+    window.location = '/map';
+  });
+  window.Mousetrap.bind('g n w', () => {
+    // Wiki
+    window.location = '/wiki';
+  });
+  window.Mousetrap.bind('g n a', () => {
+    // About
+    window.location = '/about';
+  });
+  window.Mousetrap.bind('g n s', () => {
+    // Shop
+    window.location = '/shop';
+  });
+  window.Mousetrap.bind('g n o', () => {
+    // Settings
+    window.location = '/settings';
+  });
+  window.Mousetrap.bind('g n r', () => {
+    // Repo
+    window.location = 'https://github.com/freecodecamp/freecodecamp/';
+  });
 });

server/views/account/settings.jade

@@ -3,6 +3,9 @@ block content
         h1.text-center Settings for your Account
         hr
         h2.text-center Actions
+        .row
+          .col-xs-12
+            a.btn.btn-lg.btn-block.btn-primary.btn-link-social(class = "nightMode-btn") Night Mode
         .row
           .col-xs-12
               if (!user.isGithubCool)

server/views/layout-wide.jade

@@ -8,7 +8,7 @@ html(lang='en')
           include partials/scripts
           block content
   else
-      body.no-top-and-bottom-margins.full-screen-body-background
+      body.no-top-and-bottom-margins
         include partials/scripts
         include partials/navbar
         include partials/flash