Nikita Pande created AMBARI-26527: ------------------------------------- Summary: Implement User-Selectable Dark/Light Mode for Ambari UI Key: AMBARI-26527 URL: https://issues.apache.org/jira/browse/AMBARI-26527 Project: Ambari Issue Type: Improvement Reporter: Nikita Pande Attachments: image-2025-07-13-02-51-09-731.png, image-2025-07-13-02-51-59-306.png, image-2025-07-13-03-05-53-581.png, image-2025-07-13-03-06-12-103.png
h3. *Problem Statement* The current Apache Ambari web interface provides a single, light-themed UI. While functional, it lacks a dark mode option, which has become a standard feature in modern web applications for several reasons: * *User Comfort:* A dark theme significantly reduces eye strain, especially for users who work for extended periods or in low-light conditions (e.g., late-night monitoring). * *Accessibility:* For some users with visual sensitivities, a dark theme can improve readability and reduce screen glare. h3. *Proposed Solution* Implementing a persistent, easily accessible dark/light mode toggle within the Ambari UI. * *Location:* A toggle button will be placed in the main top navigation bar, next to the "admin" user menu. This ensures the control is globally accessible from any page within the application. * *Interaction:* ** The toggle will use intuitive icons: a *moon* for switching to dark mode and a *sun* for switching to light mode. ** The user's selected theme will be saved to their browser's {{{}localStorage{}}}, ensuring the choice persists across sessions for a consistent experience. ** The default theme for first-time users will remain the current light mode. h3. *Visual Design & Mockup* The new dark theme will be designed to maintain the clarity and usability of the existing interface while providing a comfortable, low-light alternative. * ** *Color Palette:* The theme will use a palette of dark grays for backgrounds and lighter text colors to ensure high contrast and excellent readability. Existing accent colors (e.g., blues for links, greens/reds for statuses) will be preserved and adjusted for optimal visibility. ** *Visual Consistency:* All UI elements, including tables, navigation panes, buttons, and metric widgets, will be styled to conform to the selected theme. h3. *Acceptance Criteria* * A theme toggle button (sun/moon icon) is present in the top navigation bar. * Clicking the toggle button instantly switches the entire UI between light and dark themes without a page reload. * The selected theme (light or dark) is saved in the browser's local storage. * When a user reloads the page or starts a new session, their previously selected theme is automatically applied. * All text, icons, buttons, and navigation elements are clearly visible and have sufficient contrast in both themes. * All dashboard widgets, progress bars, and data visualizations are correctly styled for both themes. * The feature is implemented without degrading the performance or functionality of the Ambari UI. h3. Sample Mock UpĀ Light Mode !image-2025-07-13-03-05-53-581.png! Dark Mode !image-2025-07-13-03-06-12-103.png! -- This message was sent by Atlassian Jira (v8.20.10#820010) --------------------------------------------------------------------- To unsubscribe, e-mail: issues-unsubscr...@ambari.apache.org For additional commands, e-mail: issues-h...@ambari.apache.org