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: [email protected]
For additional commands, e-mail: [email protected]
