From 1b6098fd3a8db2019fd9c256e05d4b444e7a8964 Mon Sep 17 00:00:00 2001
From: yogita_misal <yogitamisal12@gmail.com>
Date: Mon, 1 May 2023 20:43:57 +0530
Subject: [PATCH] Added dark mode button

---
 docs/docco.css |  2 +-
 index.html     | 49 ++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 47 insertions(+), 4 deletions(-)
diff --git a/docs/docco.css b/docs/docco.css
index b60f6fa3d..ed939aec8 100644
--- a/docs/docco.css
+++ b/docs/docco.css
@@ -252,7 +252,7 @@ ul.sections > li > div {
     position: relative;
   }
   body {
-    background-color: #F5F5FF;
+    background-color:#F5F5FF;
     font-size: 15px;
     line-height: 21px;
   }
diff --git a/index.html b/index.html
index 5b12f4352..ff37460b0 100644
--- a/index.html
+++ b/index.html
@@ -7,13 +7,32 @@
 
   <link rel="canonical" href="https://underscorejs.org/" />
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+  <script src=
+"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js">
+    </script>
   <title>Underscore.js</title>
   <style>
+    
+ .change {
+            cursor: pointer;
+            border: 1px solid #555;
+            border-radius: 40%;
+            width: 20px;
+            text-align: center;
+            padding: 5px;
+            margin-left: 8px;
+       
+        }
+        .dark{
+            background-color: #000000;
+            color: white;
+        }
     body {
+      background: #fff;  
+       /* color: #c6c6c6; */
       font-size: 14px;
       line-height: 22px;
-      background: #f4f4f4 url(docs/images/background.png);
-      color: #000;
+      color: black;
       font-family: Helvetica Neue, Helvetica, Arial;
     }
     .interface {
@@ -143,7 +162,7 @@
       }
         tt {
           padding: 0px 3px;
-          background: #fff;
+      
           border: 1px solid #ddd;
           zoom: 1;
         }
@@ -259,9 +278,33 @@
         width: 100%;
       }
     }
+    .mode {
+            float:right;
+        }
   </style>
 </head>
 <body>
+  <!-- <div class="mode">
+    Dark mode:             
+    <span class="change">OFF</span>
+</div> -->
+<div class="mode">        
+  <span class="change">OFF</span>
+</div>
+
+
+<script>
+  $( ".change" ).on("click", function() {
+      if( $( "body" ).hasClass( "dark" )) {
+          $( "body" ).removeClass( "dark" );
+          $( ".change" ).text( "OFF" );
+      } else {
+          $( "body" ).addClass( "dark" );
+          $( ".change" ).text( "ON" );
+      }
+  });
+</script>
+  <!-- <button onclick="myFunction()">Switch mode</button>  -->
 
   <input type="checkbox" id="menu" checked>
   <label for="menu" role="navigation" aria-label="Menu"></label>
