[
https://issues.apache.org/jira/browse/AMBARI-26527?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Nikita Pande updated AMBARI-26527:
----------------------------------
Attachment: (was: image-2025-07-13-02-51-59-306.png)
> 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
> Priority: Major
> Attachments: 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
