How to change selected button color in ODK Survey?

Apologies if this is a straightforward question:
I’ve been mostly using “select_multiple_inline” prompts in developing an ODK Survey (ODK-X) form. In use, the selection buttons begin white with black text and then turn a shade of grey with black text when the item is selected.

I’m trying out switching to “select_multiple_grid” instead but the default selection color seems to be black with dark grey text so that I can barely read the text in a selected box (and the black is a bit overwhelming). At least on the gadget I am testing on.

Is there a standard way to change the selection color/shade in the select_multiple_grid type?

Thanks in advance.

There’s lots of customizability in terms of color/font etc. I am not 100% sure exactly what controls color, but you can try playing around with the survey css file (app/config/assets/css).

it is looking like the handlebars for grid has it hardwired:

in app/system/survey/templates/select_grid.handlebars is this:

                            {{#if checked}}

but in app/config/assets/css/odk-survey.css is this

.grid-select-item:active {
    border: 1px solid 		#aaa /*{d-bdown-border}*/;
	background: 			#eee /*{d-bdown-background-color}*/;
	font-weight: bold;
	color: 					#333 /*{d-bdown-color}*/;
	text-shadow: 0 /*{d-bdown-shadow-x}*/ 1px /*{d-bdown-shadow-y}*/ 0 /*{d-bdown-shadow-radius}*/ 	#fff /*{d-bdown-shadow-color}*/;

But #eee is a light gray, they color of the in_line style.

An attempt to modify the handlebar file didn’t seem to do anything … I assume I need to move it over to app/config?

Yes, it looks like I modify the handlebars file, move it, then specify the new location in a templatePath column in the form xlsx file. As described here:

Doing this seems to slow things down, but I fully haven’t figured it out yet.