diff --git a/www/add.html b/www/add.html
index 2b1bb9d7..3058f8dc 100644
--- a/www/add.html
+++ b/www/add.html
@@ -5,11 +5,6 @@
diff --git a/www/index.html b/www/index.html
index 4e4f9992..b5d3b449 100644
--- a/www/index.html
+++ b/www/index.html
@@ -8,39 +8,11 @@
go2rtc
diff --git a/www/main.js b/www/main.js
index 63dbde32..d00fca88 100644
--- a/www/main.js
+++ b/www/main.js
@@ -41,6 +41,77 @@ nav a:hover {
nav li {
display: inline;
}
+
+body {
+ font-family: Arial, Helvetica, sans-serif;
+ background-color: white;
+}
+table {
+ background-color: white;
+ text-align: left;
+ border-collapse: collapse;
+}
+table thead {
+ background: #CFCFCF;
+ background: linear-gradient(to bottom, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
+ border-bottom: 3px solid black;
+}
+table thead th {
+ font-size: 15px;
+ font-weight: bold;
+ color: black;
+ text-align: center;
+}
+table td, table th {
+ border: 1px solid black;
+ padding: 5px 5px;
+}
+
+/* Dark mode styles */
+body.dark-mode {
+ background-color: #121212;
+ color: #e0e0e0;
+}
+
+body.dark-mode nav ul {
+ background: #333;
+}
+
+body.dark-mode nav a {
+ background: rgba(255, 255, 255, .1);
+ border-right: 1px solid #444;
+ color: #ccc;
+}
+
+body.dark-mode nav a:hover {
+ background: #555;
+}
+
+body.dark-mode table {
+ background-color: #222;
+ color: #ddd;
+}
+
+body.dark-mode table thead {
+ background: linear-gradient(to bottom, #444 0%, #3d3d3d 66%, #333 100%);
+ border-bottom: 3px solid #888;
+}
+body.dark-mode table thead th {
+ font-size: 15px;
+ font-weight: bold;
+ color: #ddd;
+ text-align: center;
+}
+body.dark-mode table td, body.dark-mode table th {
+ border: 1px solid #444;
+}
+
+body.dark-mode button {
+ background: rgba(255, 255, 255, .1);
+ border: 1px solid #444;
+ color: #ccc;
+}
+
` + document.body.innerHTML;
+
+const sunIcon = '☀️';
+const moonIcon = '🌕';
+
+document.addEventListener('DOMContentLoaded', () => {
+ const darkModeToggle = document.getElementById('darkModeToggle');
+ const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+
+ const updateToggleButton = () => {
+ if (isDarkModeEnabled()) {
+ darkModeToggle.innerHTML = sunIcon;
+ darkModeToggle.setAttribute('aria-label', 'Enable light mode');
+ } else {
+ darkModeToggle.innerHTML = moonIcon;
+ darkModeToggle.setAttribute('aria-label', 'Enable dark mode');
+ }
+ };
+
+ const isDarkModeEnabled = () => document.body.classList.contains('dark-mode');
+
+ const updateDarkMode = () => {
+ if (prefersDarkScheme.matches) {
+ document.body.classList.add('dark-mode');
+ } else {
+ document.body.classList.remove('dark-mode');
+ }
+ };
+
+ updateDarkMode();
+ updateToggleButton();
+
+ prefersDarkScheme.addListener(updateDarkMode);
+
+ darkModeToggle.addEventListener('click', () => {
+ document.body.classList.toggle('dark-mode');
+ if (document.body.classList.contains('dark-mode')) {
+ localStorage.setItem('darkMode', 'enabled');
+ darkModeToggle.innerHTML = sunIcon;
+ } else {
+ localStorage.removeItem('darkMode');
+ darkModeToggle.innerHTML = moonIcon;
+ }
+ });
+
+ if (localStorage.getItem('darkMode') === 'enabled' || prefersDarkScheme.matches) {
+ document.body.classList.add('dark-mode');
+ }
+});