From 992c129e75b9c8ce30b477a404c901b0b2ed0bb5 Mon Sep 17 00:00:00 2001
From: KaushalLavate <kaushallavate@gmail.com>
Date: Thu, 1 Oct 2020 00:21:01 +0530
Subject: [PATCH] Added Dark Mode

---
 index.html |  9 ++++++++-
 styles.css | 44 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 08ca0d4..d3e7cd8 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
   </head>
 
   <body>
-    <div id="header">
+    <div id="header" class="head">
       <div id="logo">CodeRunner</div>
 
       <button id="runBtn">Run</button>
@@ -20,6 +20,7 @@
         <div class="toggle-btn" id="js">JS</div>
         <div class="toggle-btn" id="output">Output</div>
       </div>
+      <button id="toggleDarkMode" onclick="toggleDarkMode()" class="toggleModeButton">Dark Mode</button>
     </div>
     <div id="bodyContainer">
       <textarea class="panelH" id="htmlTA" placeholder="Enter HTML"></textarea>
@@ -37,5 +38,11 @@
         <iframe id="outputDiv" class="panel"></iframe>
       </div>
     </div>
+    <script>
+      function toggleDarkMode() {
+         var element = document.body;
+         element.classList.toggle("dark-mode");
+      }
+      </script>
   </body>
 </html>
diff --git a/styles.css b/styles.css
index 6c16803..6132080 100644
--- a/styles.css
+++ b/styles.css
@@ -98,4 +98,48 @@ iframe {
 
 hr {
     background-color: #227C7B;
+}
+.toggleModeButton{
+    border:1px solid #227C7B;
+    margin: 10px;
+    background-color: whitesmoke;
+    position: relative;
+    right: 70px;
+}
+.dark-mode #bodyContainer,
+.dark-mode textarea,
+.dark-mode .panel{
+    color: cornsilk!important;
+    background-color: #1b262c;
+}
+.dark-mode textarea::placeholder {
+    color: white;
+    opacity: 1;
+  }
+  .dark-mode #logo{
+      color: #bbe1fa!important;
+  }
+.dark-mode .head{
+    background-color: #0f4c75!important;
+}
+.dark-mode #runBtn{
+    background-color: #bbe1fa!important;
+}
+.dark-mode #btnContainer{
+    color: white!important;
+    background-color: #0f4c75!important;
+    border-color: #227C7B!important;
+}
+.dark-mode #btnContainer .toggle-btn{
+    color: white!important;
+    border-color: #227C7B!important;
+
+}
+.dark-mode hr{
+    border-color: #227C7B;
+    margin: 0px!important;
+}
+.dark-mode .toggleModeButton{
+    background-color: #1b262c!important;
+    color: whitesmoke!important;
 }
\ No newline at end of file
