Skip to content

Dark Mode Toggle #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
+121 −2
Open

Dark Mode Toggle #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7e179d4
Update
C0mposer Nov 22, 2024
65ed85f
Merge branch 'master' of https://github.com/C0mposer/yt-frame-timer-d…
C0mposer Nov 22, 2024
26d2c2f
Update
C0mposer Nov 22, 2024
cf3e84b
Update
C0mposer Nov 22, 2024
e9bb447
Update
C0mposer Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<!DOCTYPE html>
<html>

<link rel="stylesheet" href="styles.css">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand All @@ -10,9 +12,13 @@
<script src="main.js"></script>
</head>

<body class="stackedit">
<body class="dark-mode">



<div class="stackedit__html">
<h1 id="youtube-interval-timer">YouTube Interval Timer</h1>
<button id="darkModeToggle" onclick="toggleDarkMode()">Toggle Dark Mode</button>
<h3 id="about">About</h3>
<p>Takes start and stop points of a YouTube video, down to the frame, and gives the time between them in the format
<code>1h 23m 45s 678ms</code>. Source code is <a
Expand Down Expand Up @@ -48,4 +54,4 @@ <h3 id="video-time">Video Time</h3>
</div>
</body>

</html>
</html>
20 changes: 20 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,3 +83,23 @@ const parseForTime = (event) => {
document.getElementById(event.target.id).value = `${finalFrame}`;
}
}

function toggleDarkMode() {
const body = document.body;
const button = document.querySelector('button#darkModeToggle');

body.classList.toggle('dark-mode');

// Update button text
if (body.classList.contains('dark-mode')) {
button.textContent = 'Toggle Light Mode';
} else {
button.textContent = 'Toggle Dark Mode';
}
}

// Initialize the button text on page load
document.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('button#darkModeToggle');
button.textContent = 'Toggle Light Mode'; // Since dark mode is default
});
93 changes: 93 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #ffffff; /* Default light background */
color: #000000; /* Default light text */
}

body.dark-mode {
background-color: #121212; /* Dark background */
color: #ffffff; /* Dark text */
}

/* Input and Textarea Styles */
input, textarea {
background-color: #ffffff; /* Light mode input background */
color: #000000; /* Light mode input text */
border: 1px solid #cccccc; /* Light mode border */
padding: 8px;
font-size: 14px;
border-radius: 4px;
}

input[readonly], textarea[disabled] {
background-color: #f9f9f9; /* Light mode disabled background */
color: #666666; /* Light mode disabled text */
}

body.dark-mode input,
body.dark-mode textarea {
background-color: #1e1e1e; /* Dark mode input background */
color: #ffffff; /* Dark mode input text */
border: 1px solid #444444; /* Dark mode border */
}

body.dark-mode input[readonly],
body.dark-mode textarea[disabled] {
background-color: #2a2a2a; /* Dark mode disabled background */
color: #aaaaaa; /* Dark mode disabled text */
}

/* Button Styles */
button {
background-color: #f0f0f0; /* Light mode button background */
color: #000000; /* Light mode button text */
border: 1px solid #cccccc; /* Light mode button border */
padding: 10px 15px;
font-size: 14px;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #e0e0e0; /* Light mode button hover background */
}

body.dark-mode button {
background-color: #333333; /* Dark mode button background */
color: #ffffff; /* Dark mode button text */
border: 1px solid #555555; /* Dark mode button border */
}

body.dark-mode button:hover {
background-color: #444444; /* Dark mode button hover background */
}

/* Link Styles */
a {
color: #0066cc; /* Light mode link color */
text-decoration: none;
}

a:hover {
color: #004999; /* Light mode link hover color */
}

body.dark-mode a {
color: #4a90e2; /* Dark mode link color */
}

body.dark-mode a:hover {
color: #8ab4f8; /* Dark mode link hover color */
}

/* Miscellaneous */
textarea {
width: 100%;
resize: vertical;
}

textarea#modMessage {
height: 100px;
}