Is your feature request related to a problem? Please describe.
At the moment dark mode overrides are scattered throughout our scss stylesheets for specific parts of the UI. The trouble is, if we continue this pattern, we'll end up duplicating those styles and in some cases introducing very minor visual variations.
Describe the solution you'd like
For @wordpress/components styles, we should override styles on a component by component basis.
In my opinion, we should introduce stylesheets for each component we use from that package.
.e.g. for button, we'd have a file component-styles/button.scss, which might contain:
.components-button {
.theme-dark & {
color: $some-light-wordpress-color;
// ... and so on
}
}
Within these stylesheets we could also introduce other TestPress specific style variations.
Describe alternatives you've considered
We could also look into how Gutenberg plans to tackle a dark mode (https://github.com/WordPress/gutenberg/issues/9483) and incorporate the same approach, but for now, I think we need an intermediate solution, which would be what I've proposed above.
Is your feature request related to a problem? Please describe. At the moment dark mode overrides are scattered throughout our scss stylesheets for specific parts of the UI. The trouble is, if we continue this pattern, we'll end up duplicating those styles and in some cases introducing very minor visual variations.
Describe the solution you'd like For
@wordpress/componentsstyles, we should override styles on a component by component basis.In my opinion, we should introduce stylesheets for each component we use from that package.
.e.g. for button, we'd have a file
component-styles/button.scss, which might contain:Within these stylesheets we could also introduce other TestPress specific style variations.
Describe alternatives you've considered We could also look into how Gutenberg plans to tackle a dark mode (https://github.com/WordPress/gutenberg/issues/9483) and incorporate the same approach, but for now, I think we need an intermediate solution, which would be what I've proposed above.