added dark mode toggle

This commit is contained in:
ION606
2024-06-24 18:04:51 -04:00
parent 134fc75bd8
commit 48fff2353d
3 changed files with 36 additions and 0 deletions
+3
View File
@@ -10,6 +10,9 @@
<body> <body>
<h1>Fetch GitHub Commits</h1> <h1>Fetch GitHub Commits</h1>
<label for="darkModeToggle">Dark Mode:</label>
<input type="checkbox" id="darkModeToggle" onchange="toggleDarkMode()"><br><br>
<div class="container"> <div class="container">
<div class="input-section"> <div class="input-section">
<label for="email">GitHub Username or Email:</label> <label for="email">GitHub Username or Email:</label>
+4
View File
@@ -71,3 +71,7 @@ async function fetchCommits() {
console.error(error); console.error(error);
} }
} }
function toggleDarkMode() {
document.body.classList.toggle('dark-mode');
}
+29
View File
@@ -83,3 +83,32 @@ a:hover {
flex: 1 1 300px; flex: 1 1 300px;
margin-left: 20px; 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;
}