dark mode

This commit is contained in:
Josh Patra
2025-07-22 13:19:14 -04:00
parent 893c811802
commit 01b9b576eb
3 changed files with 109 additions and 1 deletions

View File

@@ -1,7 +1,7 @@
{ {
"name": "Video Speed Controller", "name": "Video Speed Controller",
"short_name": "videospeed", "short_name": "videospeed",
"version": "1.5.1", "version": "1.6.1",
"manifest_version": 2, "manifest_version": 2,
"description": "Speed up, slow down, advance and rewind HTML5 audio/video with shortcuts", "description": "Speed up, slow down, advance and rewind HTML5 audio/video with shortcuts",
"homepage_url": "https://github.com/SoPat712/videospeed", "homepage_url": "https://github.com/SoPat712/videospeed",

View File

@@ -5,6 +5,7 @@ body {
font-family: sans-serif; font-family: sans-serif;
font-size: 12px; font-size: 12px;
color: rgb(48, 57, 66); color: rgb(48, 57, 66);
background-color: white;
} }
h1, h1,
@@ -110,3 +111,76 @@ select {
color: transparent; color: transparent;
text-shadow: 0 0 0 #000000; text-shadow: 0 0 0 #000000;
} }
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
color: #e0e0e0;
}
h3 {
color: #ffffff;
}
header {
border-bottom: 1px solid #333;
background: linear-gradient(#1a1a1a, #1a1a1a 40%, rgba(26, 26, 26, 0.92));
}
button {
background-image: linear-gradient(#404040, #404040 38%, #353535);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 1px 2px rgba(0, 0, 0, 0.75);
color: #e0e0e0;
text-shadow: 0 1px 0 rgb(20, 20, 20);
}
button:hover {
background-image: linear-gradient(#4a4a4a, #4a4a4a 38%, #3f3f3f);
}
input[type="text"],
input[type="checkbox"],
select,
textarea {
background-color: #2a2a2a;
color: #e0e0e0;
border: 1px solid #555;
}
input[type="text"]:focus,
select:focus,
textarea:focus {
background-color: #333;
border-color: #777;
outline: none;
}
select option {
background-color: #2a2a2a;
color: #e0e0e0;
}
.customKey {
color: transparent;
text-shadow: 0 0 0 #e0e0e0;
}
#status {
color: #888;
}
a {
color: #66b3ff;
}
a:visited {
color: #cc99ff;
}
hr {
border-color: #333;
}
}

View File

@@ -1,5 +1,7 @@
body { body {
min-width: 8em; min-width: 8em;
background-color: white;
color: #333;
} }
hr { hr {
@@ -32,3 +34,35 @@ button {
.hide { .hide {
display: none; display: none;
} }
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
color: #e0e0e0;
}
hr {
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
button {
background-image: linear-gradient(#404040, #404040 38%, #353535);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 1px 2px rgba(0, 0, 0, 0.75);
color: #e0e0e0;
text-shadow: 0 1px 0 rgb(20, 20, 20);
}
button:hover {
background-image: linear-gradient(#4a4a4a, #4a4a4a 38%, #3f3f3f);
}
button:active {
background-image: linear-gradient(#353535, #353535 38%, #2a2a2a);
}
#status {
color: #ccc;
}
}