feat(dark-mode): implement dark mode and centralize CSS in WebUI #1014
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
This commit improves the visibility and aesthetics of form elements (input, select, textarea) and horizontal rules (hr) in dark mode by adjusting their styles. Specifically, it sets a darker background color, lighter text color, and modifies border colors to ensure these elements are both visually appealing and easily distinguishable against the dark background. Additionally, placeholder text color has been adjusted to maintain readability without being overly prominent. The removal of a fixed width on the navigation bar (`nav`) style is aimed at enhancing responsiveness and flexibility in various screen sizes, promoting a better user experience across devices. These changes contribute to a more cohesive and accessible dark mode theme, aligning with modern web design practices that prioritize user comfort and interface adaptability.
AlexxIT
approved these changes
Apr 20, 2024
|
Thanks! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This Pull Request introduces significant changes to the styling and functionality of the web pages. Most notably, it performs a clean-up of repetitive CSS across multiple HTML files (
add.html,index.html,links.html, andlog.html) by removing duplicated style declarations. These styles were explicitly defining font families, background colors, and table styles directly within each HTML file. This redundancy is removed, and instead, the styling definitions are centralized and now reside withinmain.js.Furthermore, the PR adds a comprehensive dark mode feature across the website. Two key additions facilitate this:
The implementation also respects the user's system preference for dark or light themes through the
prefers-color-schememedia query, providing an adaptive and user-friendly experience. The dark mode state is persisted across sessions usinglocalStorage, ensuring that users' preferences are remembered.Additionally, JavaScript logic is added to dynamically update the dark mode state and the Ace editor theme based on the user's selection or system preference. An event listener for the
DOMContentLoadedevent ensures that the dark mode toggle and theme are correctly initialized when the page loads.Overall, this Pull Request enhances the website's accessibility and user experience by introducing a much-requested dark mode feature and simplifying the CSS structure for easier maintenance and consistency across web pages.