mirror of
https://github.com/ION606/commit_grabber.git
synced 2026-05-14 22:06:53 +00:00
added dark mode toggle
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -71,3 +71,7 @@ async function fetchCommits() {
|
|||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toggleDarkMode() {
|
||||||
|
document.body.classList.toggle('dark-mode');
|
||||||
|
}
|
||||||
+29
@@ -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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user