MetaMask / MetaMask/metamask-extension

Improve scroll bar styles in dark mode

Open
#25,222 0 comments 0 reactions 0 assignees View on GitHub
team-design-system
Dominant language
TypeScript
Stars
13.2k
Forks
5.6k
Avg merge
2d 5h
Merged PRs (30d)
451

Description

### What is this about?

This issue aims to style all scroll bars globally to improve their appearance and functionality in dark mode. Currently, scroll bar styles have been applied only to the modal component. This task will extend those styles to ensure a consistent user experience across the entire application.

![styled-dark-scrollbar](https://github.com/MetaMask/metamask-extension/assets/8112138/fa58cf10-c622-4cbd-b164-d9048323bc75)

### Scenario

_No response_

### Design

_No response_

### Technical Details

- **Implementation details**:
- Extend the styles from the modal component to all scroll bars across the application.
- Review the existing styles in `modal-content.scss` [link](https://github.com/MetaMask/metamask-extension/blob/develop/ui/components/component-library/modal-content/modal-content.scss#L16-L30) and apply similar styles globally.
- Ensure compatibility with different browsers and devices.
- Consider accessibility concerns to ensure the scroll bars are easily visible and usable in dark mode.
- **Accessibility considerations**:
- Ensure that scroll bars maintain sufficient contrast with the background.
- Test with screen readers to confirm that scroll bars do not hinder navigation.
- Verify that scroll bars are easily usable with both mouse and keyboard.

### Threat Modeling Framework

_No response_

### Acceptance Criteria

- All scroll bars in the application should match the styles applied to the modal component.
- Scroll bars should be clearly visible and usable in dark mode.
- The styles should not negatively impact accessibility.
- The implementation should be tested across multiple browsers and devices.

### Stakeholder review needed before the work gets merged

- [x] Engineering (needed in most cases)
- [x] Design
- [ ] Product
- [ ] QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
- [ ] Security
- [ ] Legal
- [ ] Marketing
- [ ] Management (please specify)
- [ ] Other (please specify)

### References

- [Existing modal component styles](https://github.com/MetaMask/metamask-extension/blob/develop/ui/components/component-library/modal-content/modal-content.scss#L16-L30)
- [Slack thread](https://consensys.slack.com/archives/C0354T27M5M/p1718039191969719) discussing the need for this change.

Contributor guide

Open the contributing guide

Research direction

Start by reading ui/components/component-library/modal-content/modal-content.scss, especially the existing scrollbar styles around lines 16–30. Trace where application-wide styles are defined, then determine how to extend the modal treatment globally while checking browser and accessibility requirements. Done means scrollbars are consistently visible and usable in dark mode without harming keyboard or screen-reader navigation.

Written by the indexing model from the issue text.

Assessment

Tech stack
scss
Domain
accessibility, design, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.