White Outline on Dark Mode Toggle Affects Internal Elements

[teja-pola]

Bug Report 🐛

The dark mode toggle button was updated with a white outline to improve visibility. However, the outline is also applied inside the button, affecting its appearance.

Expected Behavior

The white outline should only be applied around the button's outer boundary to enhance visibility without affecting the inner elements.

Current Behavior

The white outline is applied both outside and inside the button, making it look cluttered and inconsistent.

Possible Solution

Use outline or border only on the outer boundary of the button. Avoid applying styles that affect internal elements or use box-shadow instead for better visual clarity.

Steps to Reproduce

1. Go to the page with the dark mode toggle button.
2. Enable dark mode.
3. Observe the white outline applied to the button.
4. Notice that the outline also appears inside the button, affecting readability.

Context (Environment)

The issue affects the UI by making the dark mode toggle button look inconsistent. The intended improvement of visibility is compromised by the inner outline.

Desktop

• OS: [e.g. macOS]
• Browser: [e.g. Chrome, Safari]
• Version: [e.g. 0.22.15]

Detailed Description

The white outline should be applied only around the button's external boundary. Internal elements should not be affected to maintain a clean and consistent UI.

Possible Implementation

Use outline: 2px solid white; on the button element without affecting child elements. Alternatively, use box-shadow for a more subtle effect.

[teja-pola]

@DianaLease Please assign this to me if you find it worthy.

[Owaiseimdad]

@teja-pola , the current behaviour is good enough as same pattern is used in moon as well. I don’t think so the users will be stuck anywhere in the app by this UI. The dark and light change is what matters. Let me know if there is more to this.

[teja-pola]

@Owaiseimdad Yes you're right. But this maintains a clean and consistent UI.
@DianaLease You can close this issue after reviewing and merging #206.

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 10 days.