MetaMask / MetaMask/metamask-design-system

Bug: Add prefers-color-scheme support to design tokens

Open
#452 0 comments 0 reactions 1 assignee Claimed by @georgewrmarshall View on GitHub
bug
Dominant language
TypeScript
Stars
37
Forks
14
Avg merge
1d 9h
Merged PRs (30d)
60

Description

### **Description**

Currently, when the `data-theme` attribute is not set, the theme colors don't properly respect the system's color scheme preference. This has led to inconsistent implementations in the extension where custom logic has been added to handle this case.

We need to update the design tokens CSS to automatically apply the correct theme based on the user's system preference when no explicit theme is set.

### **Technical Details**

1. Update both `dark-theme-colors.css` and `light-theme-colors.css` to include `@media (prefers-color-scheme: dark)` and `@media (prefers-color-scheme: light)` queries
2. Move the existing theme definitions inside these media queries
3. Add fallback styles for when no theme preference is available
4. Ensure the implementation is comprehensive and covers all color variables
5. Remove the need for custom implementations like the one in the extension's base-styles.scss

### **Acceptance Criteria**

- System theme preference should work without explicit `data-theme` attribute
- All color variables should be properly set based on system preference
- No breaking changes to existing theme functionality
- Comprehensive test coverage for both light and dark themes
- Remove the need for custom theme handling in the extension

### **References**

- MetaMask Extension Issue #30569: https://github.com/MetaMask/metamask-extension/issues/30569
- MetaMask Extension Issue #30407: https://github.com/MetaMask/metamask-extension/issues/30407
- Current implementation in extension: https://github.com/MetaMask/metamask-extension/blob/115238c0a568e1f291b62fd30edf75ba9dbb9a4b/ui/css/base-styles.scss#L29-L46
```

The implementation would involve modifying both theme CSS files to include media queries. Here's an example of how the dark theme file would be updated:

```css:packages/design-tokens/src/css/dark-theme-colors.css
// ... existing code ...

@media (prefers-color-scheme: dark) {
[data-theme='dark'],
.dark {
// ... existing dark theme variables ...
}

/* Fallback for when no theme is specified */
:root:not([data-theme]) {
// ... dark theme variables ...
}
}

// ... existing code ...
```

A similar structure would be added to the light theme file. This approach ensures that the system theme preference is respected even when no explicit theme is set.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.