This PR addresses a critical issue where the data-theme="light" attribute was incorrectly applied only to brand variables, resulting in the light mode theme not being activated correctly across all theme variables. The change ensures that the data-theme="light" attribute now correctly influences all relevant theme variables, ensuring a consistent and accurate representation of the light mode across the application.
Reason for Change
The light mode theme was not being applied correctly due to the data-theme="light" attribute being limited to brand variables. This led to inconsistencies in the UI where certain elements did not reflect the intended light mode appearance.
Improvement/Solution
By moving the data-theme="light" attribute to affect all theme variables, we ensure a uniform application of the light mode theme across the application, enhancing the user experience and visual consistency.
[x] I've clearly explained what problem this PR is solving and how it is solved.
[x] I've linked related issues.
[x] I've included manual testing steps.
[x] I've included screenshots/recordings if applicable.
[x] I’ve included tests if applicable.
[x] I’ve documented my code using JSDoc format if applicable.
[x] I’ve applied the right labels on the PR.
[x] I’ve properly set the pull request status to "ready for review".
Pre-merge reviewer checklist
[x] I've manually tested the PR (e.g., pull and build branch, run the app, test code being changed).
[x] I confirm that this PR addresses all acceptance criteria described in the issue it closes and includes the necessary testing evidence such as recordings and or screenshots.
Description
This PR addresses a critical issue where the
data-theme="light"attribute was incorrectly applied only to brand variables, resulting in the light mode theme not being activated correctly across all theme variables. The change ensures that thedata-theme="light"attribute now correctly influences all relevant theme variables, ensuring a consistent and accurate representation of the light mode across the application.Reason for Change
The light mode theme was not being applied correctly due to the
data-theme="light"attribute being limited to brand variables. This led to inconsistencies in the UI where certain elements did not reflect the intended light mode appearance.Improvement/Solution
By moving the
data-theme="light"attribute to affect all theme variables, we ensure a uniform application of the light mode theme across the application, enhancing the user experience and visual consistency.Related issues
Fixes: https://github.com/MetaMask/design-tokens/issues/626
Manual testing steps
Same as here https://github.com/MetaMask/design-tokens/pull/627
Screenshots/Recordings
Same as https://github.com/MetaMask/design-tokens/pull/627
Pre-merge author checklist
Pre-merge reviewer checklist