From 31398a7e6bfd3abcd4ada82c73e783986a04cd4f Mon Sep 17 00:00:00 2001 From: Sergey Krashevich Date: Fri, 22 Mar 2024 18:08:47 +0300 Subject: [PATCH] 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'); + } +});