Why does Dawn theme not support RGBA color indicators on CSS?

[CricketRecords]

Every time I go in the custom CSS in the theme editor and enter a hex code, it works just fine. I then try to enter RGBA for the purpose of adjusting the opacity of a potentially transparent overlay that would darken a background image, and it will not work. It doesn't even let me save it if I put it in the page's JSON file.

[BSSCommerce-B2B]

HI @CricketRecords , 

It seems like the issue might be related to the theme editor's handling of certain CSS syntax. The RGBA function should normally work in both the custom CSS and JSON file, but some Shopify themes might not support it directly in the theme editor or JSON settings.

Here are a few things you can try:

1. Use a CSS class directly in the theme's CSS file: Instead of adding the RGBA value in the theme editor, add it directly in the theme's stylesheet (e.g., theme.css or styles.css). For example:

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Adjust transparency */
}​

• Ensure correct syntax in the JSON file: If you're editing a JSON file for page sections or settings, RGBA might not be supported directly. However, you can add a CSS class that you define in the theme’s CSS file. For instance, add a class like .overlay (as shown above) and use it in your section settings.

      3. Use HEX with transparency: Some Shopify themes may only accept HEX codes in their JSON settings. You can try using an 8-character HEX code where the last two characters represent transparency. For example:

"background-color": "#00000080"  /* 80 is 50% transparency */

This represents black with 50% opacity.

Here are a few suggestions for you. Hope it helps.