How to make Google Maps info window text color compatible with the Rally theme?

Anvil Q&A
1

What I’m trying to do:
I would like to use the Rally theme in my app which includes a Google Map component where InfoWindows would be used.

What I’ve tried and what’s not working:
I can get the info windows to display, but the text color is (near) white on white background, so obviously the info window looks quite empty. Painting the text in the info window with my mouse confirms that it indeed correctly displays the label it should show, but the problem is in the color which is very close to the background color of the info window.

From GoogleMaps documentation it would seem you cannot change the background color of the overlay, but can you change the color of the text and color in the scheme is actually used for the Google Maps component?

2

Here is a clone link:

As you can see, the labels (in this case numbers as strings) display on the markers but on info windows they are white on white background.

3

You can set the css for these windows with this selector:

.gm-style .gm-style-iw {
    color: %color:Secondary Container%
}
2 Likes
4

Thank you, this solved it. For those like me who haven’t been modifying the theme, just add this selector to the end of the theme.css file found under Assets.

1 Like
5

For what it’s worth, putting a style block in your Native Libraries section will also apply the CSS after the theme is loaded, and it’ll keep you from needing to redo the CSS if you ever replace your theme.css file.

1 Like