question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

css: Make `background` a theme-aware property

See original GitHub issue

Is 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:closed
  • Created 2 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
hasparuscommented, Jan 5, 2022

🚀 Issue was released in v0.13.1 🚀

0reactions
lachlanjccommented, Nov 29, 2021

Oh! Yes, that’s cool with me. Semicolon-free is definitely the way to go haha

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found