Feature: Introducing Dark Mode for Improved User Experience

public/css/base.css

@@ -374,7 +374,7 @@ body.active {
 .frame {
   max-width: 730px;
   margin: auto;
-  overflow: hidden;
+  /* overflow: hidden; */
 }
 .horizontal_center {
   position: relative;
@@ -430,6 +430,40 @@ header a.twitter img {
   position: absolute;
 }
 
+/* 
+ Dark Mode Styles
+*/
+/* style for Dark Mode Button */
+.mode{
+  color: #fff;
+  height: 30px;
+  width: 133px;
+  border-radius: 6px;
+  margin-right: 20px;
+  background: #2c2e31;
+  border: solid #83ba43 2px;
+ }
+ /* dark class for body of page */
+ .dark{
+  background-color: #212121 !important;
+  color: #a6a6a6 !important;
+}
+/* color in dark mode */
+.dark-content{
+  color: #a6a6a6 !important;
+}
+/* color of heading in dark mode */
+.h-dark{
+  color: #ffffff !important;
+}
+/* color of card in dark node */
+.card-dark{
+  background-color: #2c2e31 !important;
+  z-index: auto !important;
+} 
+
+
+
 @media screen and (max-width: 320px) {
   header h1 {
     font-size: 32px;
@@ -734,8 +768,11 @@ html {
   width: 100%;
   background: #fff;
   border-radius: 3px;
-  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
-          box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: 0px 0px 9px 3px rgba(131,186,67,1);
+  -moz-box-shadow: 0px 0px 9px  3px rgba(131,186,67,1);
+  box-shadow: 0px 0px 9px 3px rgba(131,186,67,1);
+  /* -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
+          box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); */
   overflow: hidden;
   text-align: center;
   z-index: 5;

public/js/light-dark-mode.js

@@ -0,0 +1,72 @@
+(function(){
+body = document.querySelector('body')
+let p = document.querySelectorAll('p')
+let input = document.querySelectorAll('pre')
+let btn = document.querySelector('#modes')
+let h2 = document.querySelectorAll('h2');
+let card = document.querySelector('.card')
+let modeStauts = document.querySelector('#off-on');
+const darkmode = () =>{
+    switch (modeStauts.innerText) {
+        case 'OFF':
+            modeStauts.innerText = 'ON'
+            break;
+        case 'ON':
+            modeStauts.innerText = 'OFF'
+            break;
+
+        default:
+            break;
+    }
+    //  common of all pages
+    body.classList.toggle('dark');
+    p.forEach(element => {
+        element.classList.toggle('dark-content')
+    });
+    input.forEach(element => {
+        element.classList.toggle('dark-content')
+    })
+    h2.forEach(element =>{
+        element.classList.toggle('h-dark')
+    })
+    // For index page
+    if (window.location.href.match(/index$/)){
+
+        card.classList.toggle('card-dark');
+    }
+    // For Documentation Page and Changelog Page
+    if(window.location.href.match(/documentation$/) || window.location.href.match(/changelog$/)){
+        let li = document.querySelectorAll('.doc-ul > li')  
+        //  The .doc-ul class is also added to the 'ul's of changelog page 
+        li.forEach(element => {
+            element.classList.toggle('dark-content')  
+          });
+    }
+    // For stats page 
+    if(window.location.href.match(/stats$/)){
+        let span = document.querySelectorAll('span');
+        span.forEach(element => {
+            element.classList.toggle('dark')
+        })
+    }   
+}
+btn.addEventListener('click', ()=>{
+    // get value of 'dark' item form localstorage on every click
+    setDarkMode = localStorage.getItem('dark');
+    if(setDarkMode !== 'ON'){
+        darkmode();
+        // set vlaue to 'ON' of dark node is on
+        setDarkMode = localStorage.setItem('dark', 'ON')
+    }else{
+        darkmode();
+        // set vlaues to 'null' of dark mode is off
+        setDarkMode = localStorage.setItem('dark', null)
+    }
+})
+// get vlaue of 'dark' item form local storage;
+let setDarkMode = localStorage.getItem('dark')
+// cheak mode 'on-off' on page reload;
+if(setDarkMode === 'ON'){
+    darkmode()
+}
+})();

views/pages/changelog.ejs

@@ -11,7 +11,7 @@
     <section id="1.4">
       <h2>Version 1.4</h2>
       <span>7/4/2022</span>
-      <ul>
+      <ul class="doc-ul">
         <li>Fix US Social Security Number Generation</li>
         <li>Add India data</li>
         <li>Add Mexico data</li>
@@ -29,7 +29,7 @@
     <section id="1.3">
       <h2>Version 1.3</h2>
       <span>9/27/2019</span>
-      <ul>
+      <ul class="doc-ul">
         <li>Use native JS dates instead of moment for ~60% speed increase in date calculation</li>
         <li>Email addresses are now transliterated</li>
         <li>More street/city names for NL dataset</li>
@@ -46,7 +46,7 @@
     <section id="1.2">
       <h2>Version 1.2</h2>
       <span>6/17/2018</span>
-      <ul>
+      <ul class="doc-ul">
         <li>Fixed DOB and Registration dates to use ISO 8601 standard (yyyy-mm-ddThh:mm:ssZ)</li>
         <li>DOB and Registration dates are now objects that include age</li>
         <li>Street numbers range from 1-9999</li>
@@ -61,7 +61,7 @@
     <section id="1.1">
       <h2>Version 1.1</h2>
       <span>8/18/2016</span>
-      <ul>
+      <ul class="doc-ul">
         <li>Fixed HETU for FI</li>
         <li>Fixed salt not being used in calculation for hashes (also hotfixed 1.0)</li>
         <li>DOB and Registered use ISO 8601 time standards</li>
@@ -72,7 +72,7 @@
     <section id="1.0">
       <h2>Version 1.0</h2>
       <span>4/7/2016</span>
-      <ul>
+      <ul class="doc-ul">
         <li>The Randomuser.me website and API are now running on Node.js!</li>
         <li>Added <span id="color">inc</span> & <span id="color">exc</span> parameters to include/exclude specific fields</li>
         <li>Multiple nats can be requested at a time in a comma separated list</li>
@@ -86,23 +86,23 @@
     <section id="0.8">
       <h2>Version 0.8</h2>
       <span>2/4/2016</span>
-      <ul>
+      <ul class="doc-ul">
         <li>Random User Generator is <a href="https://github.com/RandomAPI">open source</a>!</li>
         <li>Added BR, CA, CH, DE, IR, and NZ</li>
       </ul>
     </section>
     <section id="0.7">
       <h2>Version 0.7</h2>
       <span>7/27/2015</span>
-      <ul>
+      <ul class="doc-ul">
         <li>Huge performance update</li>
         <li>You can now generate up to 2,000 users per request now</li>
       </ul>
     </section>
     <section id="0.6">
       <h2>Version 0.6</h2>
       <span>5/8/2015</span>
-      <ul>
+      <ul class="doc-ul">
         <li>Fixed seed bug that didn't respect nationalities</li>
         <li>Seed is returned on 1st result only and is meant to regenerate a request with multiple results</li>
         <li>Added AU, ES, FI, FR, IE, and NL</li>
@@ -113,14 +113,14 @@
     <section id="0.5">
       <h2>Version 0.5</h2>
       <span>3/3/2015</span>
-      <ul>
+      <ul class="doc-ul">
         <li>Added nationalities</li>
       </ul>
     </section>
     <section id="0.4.1">
       <h2>Version 0.4.1</h2>
       <span>9/12/2014</span>
-      <ul>
+      <ul class="doc-ul">
         <li>Added new picture options (medium and thumbnail)</li>
         <li><a href="documentation#format">New formats</a> added (sql, csv, and yaml)</li>
       </ul>
@@ -129,7 +129,7 @@
     <section id="0.4">
       <h2>Version 0.4</h2>
       <span>5/3/2014</span>
-      <ul>
+      <ul class="doc-ul">
         <li>Redesigned and rebranded the Random User API website and platform</li>
         <li>We doubled our profile photo database! We now return 100 male and 100 female portraits</li>
         <li>Salts now use strictly alphanumeric characters</li>
@@ -141,7 +141,7 @@
     <section id="0.3">
       <h2>Version 0.3</h2>
       <span>1/14/2014</span>
-      <ul>
+      <ul class="doc-ul">
         <li>Added Usernames, Salts, SHA-256 hash, registration date, and DoB fields</li>
         <li>md5_hash and sha1_hash have been changed to md5 and sha1 respectively</li>
       </ul>
@@ -150,23 +150,23 @@
     <section id="0.2.1">
       <h2>Version 0.2.1</h2>
       <span>9/10/2013</span>
-      <ul>
+      <ul class="doc-ul">
         <li>Fixed seed generation bug</li>
       </ul>
     </section>
 
     <section id="0.2">
       <h2>Version 0.2</h2>
       <span>9/5/2013</span>
-      <ul>
+      <ul class="doc-ul">
         <li>Request a specific gender using the `gender` parameter</li>
       </ul>
     </section>
 
     <section id="0.1">
       <h2>Version 0.1</h2>
       <span>8/6/2013</span>
-      <ul>
+      <ul class="doc-ul">
         <li>Initial public release</li>
       </ul>
     </section>
@@ -175,4 +175,5 @@
   <% include ../snippets/footer %>
   <% include ../snippets/analytics %>
 </body>
+<script type="text/javascript" src="js/light-dark-mode.js"></script>
 </html>

views/pages/copyright.ejs

@@ -21,4 +21,5 @@
   <% include ../snippets/footer %>
   <% include ../snippets/analytics %>
 </body>
+<script type="text/javascript" src="js/light-dark-mode.js"></script>
 </html>

views/pages/documentation.ejs

@@ -197,7 +197,7 @@ https://randomuser.me/api/<span>?seed=foobar</span>
     <section id="format">
       <h2>Formats</h2>
       <p>We currently offer the following data formats:
-      <ul>
+      <ul class="doc-ul">
         <li>JSON (default)</li>
         <li>PrettyJSON or pretty</li>
         <li>CSV</li>
@@ -224,7 +224,7 @@ https://randomuser.me/api/<span>?format=csv</span>
       <p>You can request a different nationality of a randomuser.</p>
       <p>Pictures won't be affected by this, but data such as location, cell/home phone, id, etc. will be more appropriate.</p>
       <p>Currently, randomuser offers these nationalities:</p>
-      <ul>
+      <ul class="doc-ul">
         <li>v1.0: AU, BR, CA, CH, DE, DK, ES, FI, FR, GB, IE, IR, NL, NZ, TR, US</li>
         <li>v1.1: AU, BR, CA, CH, DE, DK, ES, FI, FR, GB, IE, IR, NL, NZ, TR, US</li>
         <li>v1.2: AU, BR, CA, CH, DE, DK, ES, FI, FR, GB, IE, IR, NO, NL, NZ, TR, US</li>
@@ -256,7 +256,7 @@ https://randomuser.me/api/<span>?page=3&results=10&seed=abc</span>
       Using the <b>inc</b> and <b>exc</b> parameters, you can specify which fields to include or exclude respectively.</p>
       <p>By specifying only the fields you want, the generator can save time by skipping CPU intensive fields like "login" for example.</p>
       <p>These parameters accept the following values in a comma delimited list</p>
-      <ul>
+      <ul class="doc-ul">
         <li>gender</li>
         <li>name</li>
         <li>location</li>
@@ -283,7 +283,7 @@ https://randomuser.me/api/<span>?exc=login</span>
     <section id="misc">
       <h2>Miscellaneous</h2>
       <p>Some extra parameters that you can add to a request.</p>
-      <ul>
+      <ul class="doc-ul">
         <li><b>dl</b> - Download the results with the appropriate format extension.</li>
 <pre>
 https://randomuser.me/api/?results=25&nat=gb,us,es&format=csv&<span>dl</span>
@@ -303,4 +303,5 @@ https://randomuser.me/api/?results=5&<span>callback=randomuserdata</span>
   <% include ../snippets/footer %>
   <% include ../snippets/analytics %>
 </body>
+<script type="text/javascript" src="js/light-dark-mode.js"></script>
 </html>

views/pages/donate.ejs

@@ -116,4 +116,5 @@
   }
   </script>
 </body>
+<script type="text/javascript" src="js/light-dark-mode.js"></script>
 </html>

views/pages/index.ejs

@@ -155,4 +155,5 @@ $.ajax({
   <% include ../snippets/footer %>
   <% include ../snippets/analytics %>
 </body>
+<script type="text/javascript" src="js/light-dark-mode.js"></script>
 </html>

views/pages/photos.ejs

@@ -43,4 +43,5 @@
   <% include ../snippets/footer %>
   <% include ../snippets/analytics %>
 </body>
+<script type="text/javascript" src="js/light-dark-mode.js"></script>
 </html>

views/pages/photoshop.ejs

@@ -47,4 +47,5 @@
   <% include ../snippets/footer %>
   <% include ../snippets/analytics %>
 </body>
+<script type="text/javascript" src="js/light-dark-mode.js"></script>
 </html>

views/pages/sketch.ejs

@@ -29,4 +29,5 @@
   <% include ../snippets/footer %>
   <% include ../snippets/analytics %>
 </body>
+<script type="text/javascript" src="js/light-dark-mode.js"></script>
 </html>

views/pages/stats.ejs

@@ -53,4 +53,5 @@
   <script src="js/highcharts.js"></script>
   <script src="js/socket.io.min.js"></script>
 </body>
+<script type="text/javascript" src="js/light-dark-mode.js"></script>
 </html>

views/snippets/header.ejs

@@ -10,7 +10,7 @@
 
     <!-- CSS -->
     <link rel="stylesheet" type="text/css" href="dist/style.css">
-
+    <link rel="stylesheet" type="text/css" href="css/base.css">
     <!-- JS -->
     <script src="dist/all.js"></script>
 </head>

views/snippets/nav.ejs

@@ -5,6 +5,7 @@
     </div>
   </div>
   <ul>
+    <button id="modes" class="mode" >Dark Mode: <span id="off-on">OFF</span></button>
     <li><a href="index">Home</a></li>
     <li><a href="photos">User Photos</a></li>
     <li><a href="documentation">Documentation</a></li>