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

-

Learning Activities

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