0.1.37

color change

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>

scripts/darkmode.js

@@ -1,4 +1,18 @@
-function toggleDarkMode() {
-    const main = document.querySelector('main');
-    main.classList.toggle('dark-mode');
-  }
+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
+    }
+});

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;

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);
     }

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;
 }