From 48fff2353dc98f5a2464beeb73ac10f336cd9007 Mon Sep 17 00:00:00 2001 From: ION606 Date: Mon, 24 Jun 2024 18:04:51 -0400 Subject: [PATCH] added dark mode toggle --- index.html | 3 +++ script.js | 4 ++++ styles.css | 29 +++++++++++++++++++++++++++++ 3 files changed, 36 insertions(+) diff --git a/index.html b/index.html index 91af845..05a23b5 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,9 @@

Fetch GitHub Commits

+ +

+
diff --git a/script.js b/script.js index ec8f173..f1c20a1 100644 --- a/script.js +++ b/script.js @@ -70,4 +70,8 @@ async function fetchCommits() { commitList.innerHTML = `ERR: 
${error}
`; console.error(error); } +} + +function toggleDarkMode() { + document.body.classList.toggle('dark-mode'); } \ No newline at end of file diff --git a/styles.css b/styles.css index b193598..d6c6728 100644 --- a/styles.css +++ b/styles.css @@ -82,4 +82,33 @@ a:hover { .commit-section { flex: 1 1 300px; margin-left: 20px; +} + +body.dark-mode { + background-color: #333; + color: #f4f4f9; +} + +body.dark-mode h1, +body.dark-mode a { + color: #f4f4f9; +} + +body.dark-mode input[type="text"], +body.dark-mode input[type="password"], +body.dark-mode input[type="date"], +body.dark-mode button { + background-color: #555; + color: #f4f4f9; + border: 1px solid #777; +} + +body.dark-mode button:hover { + background-color: #666; +} + +body.dark-mode #commitList { + border: grey solid 1px; + background-color: #444; + color: #f4f4f9; } \ No newline at end of file