css: Make `background` a theme-aware property
See original GitHub issueIs your feature request related to a problem? Please describe.
I find it surprising and confusing that the bg
shorthand can be set to a color name/key, but not background
, as they read the same.
Describe the solution you’d like
I would like background
to be a theme-aware property, so I can do sx={{ background: 'myCustomColorName' }}
.
Describe alternatives you’ve considered
I can obviously use bg
or backgroundColor
. But once in a while, I may forget and use background
, and be slightly annoyed when the color name I pass doesn’t get converted to the expected color value.
Additional context I can send a PR for this if you (the maintainers) agree with the idea. Thank you!
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (4 by maintainers)
Top Results From Across the Web
CSS Backgrounds - W3Schools
The background-color property specifies the background color of an element. Example. The background color of a page is set like this: body {...
Read more >A guide to theming in CSS - LogRocket Blog
This tutorial shows you how to create apps that are theme-aware using CSS variables and JavaScript to enable a better presentation.
Read more >The `sx` Prop - Theme UI
Theme-Aware Properties. The following CSS properties will use values defined in the theme, when available. Property, Theme Key. fontFamily ...
Read more >Supporting section backgrounds | Microsoft Learn
Making your web part theme aware. Update the manifest. You need to add a supportsThemeVariants property to the manifest of your webpart and...
Read more >Making Your Plugin Theme-aware - Adobe Developer
CSS variables are just what they sound like: a way to have dynamic property definitions in CSS. Luckily, Photoshop exposes a number of...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
🚀 Issue was released in
v0.13.1
🚀Oh! Yes, that’s cool with me. Semicolon-free is definitely the way to go haha