From 2d2b788a2d0244f195d7a500a5e422382bb781c3 Mon Sep 17 00:00:00 2001
From: BYUIOMDA <and22099@byui.edu>
Date: Sun, 24 Sep 2023 21:27:52 -0600
Subject: [PATCH] 0.1.37

color change
---
 index.html          |  6 +++---
 scripts/darkmode.js | 22 ++++++++++++++++++----
 styles/base.css     |  6 +++---
 styles/larger.css   |  4 ++--
 styles/smaller.css  |  4 ++--
 5 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 21de46b..262f1ea 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@ <h1>Matthew Anderson</h1>
     </header>
     <nav>
         <ul class="navigation">
-            <button id="menu">Toggle Menu</button>
+            <button id="menu"></button>
             <li><a href="index.html" class="active">Home</a></li>
             <li><a href="underconstruction.html">Chamber</a></li>
             <li><a href="week01/chamber-site-plan.html">Site Plan</a></li>
@@ -36,7 +36,6 @@ <h1>Matthew Anderson</h1>
     </nav>
     <main>
         <h2>WDD 230: Web Frontend Development</h2>
-        <button id="darkModeToggle" onclick="toggleDarkMode()">Toggle Dark Mode</button>
         <section class="card">
             <h3>Learning Activities</h3>
             <ul>
@@ -45,7 +44,7 @@ <h3>Learning Activities</h3>
                 <li>Week One: <a href="week01/lesson1/holygrail.html">CSS Activity</a></li>
                 <li>Week Two: <a href= "https://codepen.io/BYUIOMDA/pen/vYvROZx">Responsive Hamburger</a></li>
                 <li>Week Two: <a href= "week02/bom.html">BOM Top 10</a></li>
-
+                
                 <!-- <li>Lesson 00: <a href= "index.html">Title</a></li> -->
             </ul>
         </section>
@@ -55,6 +54,7 @@ <h3>Information</h3>
         </section>
     </main>
     <footer>
+        <button id="mode">Darkmode Toggle ☑️</button>
         <p id="lastModified">Last modified: [Date]</p>
         <p>&copy; <span id="currentYear">Year</span> Matthew Anderson UT/US</p>
     </footer>
diff --git a/scripts/darkmode.js b/scripts/darkmode.js
index 9bb9ca9..45a0d4a 100644
--- a/scripts/darkmode.js
+++ b/scripts/darkmode.js
@@ -1,4 +1,18 @@
-function toggleDarkMode() {
-    const main = document.querySelector('main');
-    main.classList.toggle('dark-mode');
-  }
\ No newline at end of file
+const modeButton = document.querySelector('#mode');
+const body = document.querySelector('body');
+const main = document.querySelector('main');
+const nav = document.querySelector('nav');
+
+modeButton.addEventListener('click', () => {
+    if (modeButton.textContent.includes('Darkmode Toggle ☑️')) {
+        body.style.backgroundColor = '#0D1B2A'; // Dark Blue
+        main.style.color = '#FFFFFF'; // White
+        modeButton.textContent = 'Darkmode Toggle ❎';
+        nav.style.backgroundColor = '#002E5D'; // BYU Blue
+    } else {
+        body.style.backgroundColor = '#FFFFFF'; // White
+        main.style.color = '#0D1B2A'; // Dark Blue
+        modeButton.textContent = 'Darkmode Toggle ☑️';
+        nav.style.backgroundColor = '#002E5D'; // BYU Blue
+    }
+});
\ No newline at end of file
diff --git a/styles/base.css b/styles/base.css
index b1bb08d..982fb27 100644
--- a/styles/base.css
+++ b/styles/base.css
@@ -8,18 +8,18 @@ span {background-color: red}
 hr {
     border-top: .25rem solid #000000;
 }
-.dark-mode main {
+/* .dark-mode main {
     background-color: #1f1f1f;
     color: #ffffff;
   }
 /* Dark mode styles for the toggle button */
-#darkModeToggle {
+/* #darkModeToggle {
     background-color: #333;
     color: #fff;
     border: none;
     padding: 8px 16px;
     cursor: pointer;
-  }
+  } */
   
 header {
     background-color: #8efbff;
diff --git a/styles/larger.css b/styles/larger.css
index a60f2f5..b67f137 100644
--- a/styles/larger.css
+++ b/styles/larger.css
@@ -32,7 +32,7 @@ h1 {
 }
 
 nav {
-	background-color: #36454f;
+	background-color: #002E5D;
 	margin: 0 auto;
 	max-width: 800px;
 }
@@ -115,7 +115,7 @@ footer {
 
 @media only screen and (min-width: 32rem) {
     span {background-color: green}
-    
+
     main {
         grid-template-columns: repeat(3, 1fr);
     }
diff --git a/styles/smaller.css b/styles/smaller.css
index fcefc9d..fef5462 100644
--- a/styles/smaller.css
+++ b/styles/smaller.css
@@ -51,7 +51,7 @@ nav {
     display: flex;
     flex-direction: column;
     list-style: none;
-    background-color: #333;
+    background-color: #002E5D;
     color: #fff;
 }
 
@@ -69,7 +69,7 @@ nav {
 
 .navigation li a:hover {
     background-color: #bbb;
-    color: #333;
+    color: #002E5D;
     font-weight: 700;
 }