feat: add dark mode

quote_generator/index.html

@@ -5,6 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title> Moon's Project </title>
     <link rel="icon" href="../images/lifeadventurer_rounded_logo.png">
+    <!-- bootstrap -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <!-- box icons -->
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
     <link rel="stylesheet" href="./styles.css">
   </head>
 
@@ -15,12 +19,15 @@
         <p id="quote"></p>
         <p id="author"></p>
       </div>
-      <button onclick="getQuote()">Generate </button>
+      <div class="row">
+        <button class="col-4 offset-4" onclick="getQuote()">Generate </button>
+        <div class="col-2 offset-2 bx bx-moon" id="dark-mode-icon"></div>
+      </div>
     </div>
 
-    <canvas id="Matrix"> </canvas>
-    <script src="./matrix.js"> </script>
-    <script src="./quote.js"> </script>
-    
+    <canvas id="Matrix"></canvas>
+    <script src="./script.js"></script>
+    <script src="./matrix.js"></script>
+    <script src="./quote.js"></script>
   </body>
 </html>

quote_generator/script.js

@@ -0,0 +1,7 @@
+let darkModeIcon = document.querySelector('#dark-mode-icon');
+
+darkModeIcon.onclick = () => {
+    darkModeIcon.classList.toggle('bx-sun');
+    document.body.classList.toggle('dark-mode');
+};
+  

quote_generator/styles.css

@@ -1,3 +1,18 @@
+:root {
+  --button-color: #9DC4FF;
+  --button-hover-color: #5ca8f3;
+  --bg-color: #ffffffd7;
+  --text-color: #000000;
+}
+
+.dark-mode {
+  --button-color: #66a1fa;
+  --button-hover-color: #8ec1f4;
+  --bg-color: #1b1919d7;
+  --dark-mode-icon-color: #ffffff;
+  --text-color: #ffffff;
+}
+
 html {
   background: #282828;
   height: 100%;
@@ -21,12 +36,6 @@ body {
   z-index: 0;
 }
 
-:root {
-  --button-color: #9DC4FF;
-  --button-hover-color: #5ca8f3;
-  --white: #FFFFFF;
-}
-
 .container {
   position: absolute;
   z-index: 1;
@@ -38,7 +47,8 @@ body {
   margin: 0 auto;
   text-align: center;
   padding: 70px;
-  background-color: var(--white);
+  color: var(--text-color);
+  background-color: var(--bg-color);
   border-radius: 30px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
 }
@@ -49,7 +59,7 @@ body {
 
 button {
   background-color: var(--button-color);
-  color: var(--white);
+  color: var(--bg-color);
   font-size: 16px;
   border: none;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
@@ -62,3 +72,11 @@ button {
 button:hover {
   background-color: var(--button-hover-color);
 }
+
+#dark-mode-icon {
+  margin-top: 15px;
+  font-size: 2.4rem;
+  color: var(--dark-mode-icon-color);
+  cursor: pointer;
+  opacity: 85%;
+}