diff --git a/index.html b/index.html
index 21de46b..262f1ea 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@
Matthew Anderson
WDD 230: Web Frontend Development
-
@@ -55,6 +54,7 @@ Information
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;
}