How to change colors of a dropdown box

Ignition
1

image

I have tried just about all the elements in the style menu and can modify the background etc but I can not change the dark and light blue default selection and hover in the dropdown box itself. Any help would be appreciated.

image

2

CallToAction
CallToAction1096×342 43.5 KB

Use your browser's Developer Tools (F12), hit the inspect button, click on your dropdown (expand it before using the inspect button) and examine the CSS. You'll see that it's using var(--callToAction--hover) which means that it's using the built-in themes.

For consistency in your app you should override these variables in the Project Browser | Perspective | Styles | right-click Advanced (I think) and then edit stylesheet.css.

Try adding this:

:root {
	--callToAction--hover: #00cc00;
	--callToAction--activeAlt: #dbe540;
}

Developer Tools should give you a list of all the theme variables on the bottom right and you may need to expand it. Click on a color and edit to find the settings you want and add those to your stylesheet.css overrides.

3

So I added the line that you suggested in the CSS file and the hover color is still blue.

[data-component="ia.chart.simple-gauge"] g > text {
    text-anchor: middle;
    font-size: 15px; /* Default font size for the text */
    dominant-baseline: middle; /* Center-align vertically */
}
 
[data-component="ia.chart.simple-gauge"] g > text:first-child {
    font-size: 150%; /* 150% font size for the "%" symbol */
}
:root{
		--callToAction--hover:  --neutral-50
}

image

neutral 50 should be grey correct? or did I do something wrong.

Nevermind I forgot to wrap with var(--neutral-50);

Thanks for your help