From 31398a7e6bfd3abcd4ada82c73e783986a04cd4f Mon Sep 17 00:00:00 2001 From: Sergey Krashevich Date: Fri, 22 Mar 2024 18:08:47 +0300 Subject: [PATCH 1/5] feat(dark-mode): implement dark mode and centralize CSS Implemented a dark mode feature for the website, including a toggle button in the navigation bar that allows users to switch between light and dark themes. To support this feature, centralized common CSS styles (such as body, table, and button stylings) into main.js to ensure consistent application across all HTML pages. This change improves user experience by providing a visually comfortable alternative for low-light environments and centralizes styling rules for easier maintenance. - Added dark mode styles for body, table, buttons, and navigation elements in main.js. - Introduced a toggle mechanism in the navigation bar to switch between light and dark modes. - Utilized JavaScript to detect system theme preference (`prefers-color-scheme`) and persist user's theme choice using localStorage. - Removed duplicate and scattered CSS rules from individual HTML files (add.html, index.html, links.html, log.html) and centralized them in main.js to reduce redundancy and facilitate easier updates in the future. This update enhances accessibility and user preference compliance by allowing users to select their desired theme while simplifying CSS management across the website. --- www/add.html | 27 ----------- www/index.html | 28 ----------- www/links.html | 4 -- www/log.html | 23 ++------- www/main.js | 123 +++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 126 insertions(+), 79 deletions(-) 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'); + } +}); From 20dd16badf25bc971bae37b34a2cb55281b1d24e Mon Sep 17 00:00:00 2001 From: Sergey Krashevich Date: Sat, 23 Mar 2024 04:30:54 +0300 Subject: [PATCH 2/5] feat(dark-mode): improve contrast and visited link styles --- www/main.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/www/main.js b/www/main.js index d00fca88..2b94720d 100644 --- a/www/main.js +++ b/www/main.js @@ -77,16 +77,20 @@ 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 a { + background: rgba(45, 45, 45, .8); + border-right: 1px solid #2c2c2c; + color: #c7c7c7; } -body.dark-mode nav a:hover { +body.dark-mode a:hover { background: #555; } +body.dark-mode a:visited { + color: #999; +} + body.dark-mode table { background-color: #222; color: #ddd; From 4ddadc08cb3909decdb1ba4511cb7f126c6b7d10 Mon Sep 17 00:00:00 2001 From: Sergey Krashevich Date: Tue, 9 Apr 2024 04:16:38 +0300 Subject: [PATCH 3/5] feat(editor-theme): dynamically set editor theme based on dark mode preference --- www/main.js | 37 ++++++++++++++++++++----------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/www/main.js b/www/main.js index 2b94720d..f779a659 100644 --- a/www/main.js +++ b/www/main.js @@ -138,6 +138,9 @@ 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; @@ -148,33 +151,33 @@ document.addEventListener('DOMContentLoaded', () => { } }; - const isDarkModeEnabled = () => document.body.classList.contains('dark-mode'); - const updateDarkMode = () => { - if (prefersDarkScheme.matches) { + 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(); - updateToggleButton(); - prefersDarkScheme.addListener(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', () => { - 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; - } + const enabled = document.body.classList.toggle('dark-mode'); + localStorage.setItem('darkMode', enabled ? 'enabled' : 'disabled'); + updateToggleButton(); // Update the button after toggling + updateEditorTheme(); }); - - if (localStorage.getItem('darkMode') === 'enabled' || prefersDarkScheme.matches) { - document.body.classList.add('dark-mode'); - } }); From 51e20497acc2394088df3463b13edc308071f2ef Mon Sep 17 00:00:00 2001 From: Sergey Krashevich Date: Tue, 9 Apr 2024 09:32:59 +0300 Subject: [PATCH 4/5] fix(styles): implement flex layout for body element --- www/index.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/www/index.html b/www/index.html index b5d3b449..f4668a51 100644 --- a/www/index.html +++ b/www/index.html @@ -9,6 +9,13 @@