gilles/go2rtc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1014 from skrashevich/dark-mode

Browse Source 
feat(dark-mode): implement dark mode and centralize CSS in WebUI
This commit is contained in:
Alex X
2024-04-20 13:39:25 +03:00
committed by GitHub
parent e610081634 484d401021
commit fcfef3080a
5 changed files with 154 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/add.html
-27
View File
@@ -5,11 +5,6 @@
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<style> <style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
}
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -27,33 +22,11 @@
padding: 10px; padding: 10px;
} }
table {
background-color: white;
text-align: left;
border-collapse: collapse;
}
table td, table th {
border: 1px solid black;
padding: 5px 5px;
}
table tbody td { table tbody td {
font-size: 13px; font-size: 13px;
} }
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;
}
</style> </style>
</head> </head>
<body> <body>
www/index.html
+5 -26
View File
@@ -8,39 +8,18 @@
<title>go2rtc</title> <title>go2rtc</title>
<style> <style>
body { body {
font-family: Arial, Helvetica, sans-serif; margin: 0;
background-color: white; padding: 0;
} display: flex;
flex-direction: column;
table {
background-color: white;
text-align: left;
border-collapse: collapse;
}
table td, table th {
border: 1px solid black;
padding: 5px 5px;
} }
table tbody td { table tbody td {
font-size: 13px; font-size: 13px;
} }
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;
}
label { label {
display: flex; display: flex;
align-items: center; align-items: center;
www/links.html
-4
View File
@@ -5,10 +5,6 @@
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<style> <style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
}
body { body {
margin: 0; margin: 0;
www/log.html
+3 -20
View File
@@ -19,34 +19,17 @@
height: 100%; height: 100%;
} }
table {
background-color: white;
text-align: left;
border-collapse: collapse;
}
table td, table th {
border: 1px solid black;
padding: 5px 5px;
}
table tbody td { table tbody td {
font-size: 13px; font-size: 13px;
vertical-align: top; vertical-align: top;
} }
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;
}
</style> </style>
</head> </head>
<body> <body>
www/main.js
+146 -1
View File
@@ -18,7 +18,6 @@ i {
nav { nav {
display: block; display: block;
/*width: 660px;*/
margin: 0 auto 10px; margin: 0 auto 10px;
} }
@@ -41,6 +40,97 @@ nav a:hover {
nav li { nav li {
display: inline; 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 a {
background: rgba(45, 45, 45, .8);
border-right: 1px solid #2c2c2c;
color: #c7c7c7;
}
body.dark-mode a:hover {
background: #555;
}
body.dark-mode a:visited {
color: #999;
}
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;
}
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
background-color: #333;
color: #e0e0e0;
border: 1px solid #444;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
color: #bbb;
}
body.dark-mode hr {
border-top: 1px solid #444;
}
</style> </style>
<nav> <nav>
<ul> <ul>
@@ -48,6 +138,61 @@ nav li {
<li><a href="add.html">Add</a></li> <li><a href="add.html">Add</a></li>
<li><a href="editor.html">Config</a></li> <li><a href="editor.html">Config</a></li>
<li><a href="log.html">Log</a></li> <li><a href="log.html">Log</a></li>
<li><a href="#" id="darkModeToggle">
&#127769;
</a>
</li>
</ul> </ul>
</nav> </nav>
` + document.body.innerHTML; ` + document.body.innerHTML;
const sunIcon = '&#9728;&#65039;';
const moonIcon = '&#127765;';
document.addEventListener('DOMContentLoaded', () => {
const darkModeToggle = document.getElementById('darkModeToggle');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
const isDarkModeEnabled = () => document.body.classList.contains('dark-mode');
// Update the toggle button based on the dark mode state
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 updateDarkMode = () => {
if (localStorage.getItem('darkMode') === 'enabled' || prefersDarkScheme.matches && localStorage.getItem('darkMode') !== 'disabled') {
document.body.classList.add('dark-mode');
} else {
document.body.classList.remove('dark-mode');
}
updateEditorTheme();
updateToggleButton();
};
// Update the editor theme based on the dark mode state
const updateEditorTheme = () => {
if (typeof editor !== 'undefined') {
editor.setTheme(isDarkModeEnabled() ? "ace/theme/tomorrow_night_eighties" : "ace/theme/github"); }
};
// Initial update for dark mode and toggle button
updateDarkMode();
// Listen for changes in the system's color scheme preference
prefersDarkScheme.addEventListener('change', updateDarkMode); // Modern approach
// Toggle dark mode and update local storage on button click
darkModeToggle.addEventListener('click', () => {
const enabled = document.body.classList.toggle('dark-mode');
localStorage.setItem('darkMode', enabled ? 'enabled' : 'disabled');
updateToggleButton(); // Update the button after toggling
updateEditorTheme();
});
});