Question to change colors with CSS

Yes, you can use the rgba value instead of naming the color or using the hex code.
Let's avoid any debates about Google for a moment... this is just an easy starting step...
Google search #000000
The search will place a Color Picker right at the top of the search hits.
You can test and explore how a color picker works.
To the left, is the RGB value and moving right, you see the same colors HEX value.
RGBA includes the (A)lpha Transparency value.
RED should be #F0F0F0, I think... so that can be a starting point. You can use the color slider to adjust and fine-tune that.
Then look at the rgb color.
All you need to do is add the Alpha - which is done with 0.0 for no transparency up to 0.99 for very transparent. I recommend starting at 0.3 and adjusting from there.
So...
I think rgb for red is 240,240,240, your Red Transparency: rgba(240,240,240,0.3)
You can research and install a Color Picker application if you feel you may be enjoying theme customizing in the future. I use Gpick since it allows me to click on a color and identify its color codes.

Quick .css properties 101:
Font color is the property color. For Symbolic Icons, the color property can affect them, too. But it will not effect regular icons.
Mouse Hover in this case shows the menuitem class.
And background, just as with the panel, is the background-color property.

You may need to test and play with things a bit... I do not theme Gnome these days, so this is guesswork for me, as well.
But you might look at (the rgba is an example color):

.popup-menu.panel-menu {
background-color: rgba(240,240,240,0.3);
color: #000000
}

.popup-menu-item:active, .popup-menu-item.selected, .popup-menu-item:checked, .popup-menu-item:checked.selected, .popup-menu-item:checked:active {
background-color: rgba(240,240,240,0.3);
}

2 Likes