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

Reply via email to