Does anyone have a trick on how to style the svg icons for the Rating (the star icons) and the Ranking (the arrows icon) types of the Survey field (gsurvey) with a custom color?
I need to change the colors of the svg icons to better fit with the Dark Mode of my (Blocksy) theme.
I would perfer another color than the default yellow of the stars.
And that arrows icon with the Ranking type completely disappears visually as black on black is kinda impossible to see 
Hi Steven,
Could you please share your form page URL so I can try to find a custom CSS code which might help you?
For now I ended up with:
html[data-color-mode=“dark”] .gform_wrapper.gform-theme–orbital {
–gf-icon-ctrl-number: url(“data:image/svg+xml,%3Csvg width=‘8’ height=‘14’ viewBox=‘0 0 8 14’ fill=‘none’ xmlns=‘``http://www.w3.org/2000/svg’><path`` fill-rule=‘evenodd’ clip-rule=‘evenodd’ d=‘M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z’ fill=‘rgba(255, 255, 255, .8)’/%3E%3C/svg%3E”) !important;
–gf-icon-ctrl-select: url(“data:image/svg+xml,%3Csvg width=‘10’ height=‘6’ viewBox=‘0 0 10 6’ fill=‘none’ xmlns=‘``http://www.w3.org/2000/svg’><path`` fill-rule=‘evenodd’ clip-rule=‘evenodd’ d=‘M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z’ fill=‘rgba(255, 255, 255, .8)’/%3E%3C/svg%3E”) !important;
–gf-icon-ctrl-search: url(“data:image/svg+xml,%3Csvg width=‘640’ height=‘640’ xmlns=‘``http://www.w3.org/2000/svg’><path`` d=‘M256 128c-70.692 0-128 57.308-128 128 0 70.691 57.308 128 128 128 70.691 0 128-57.309 128-128 0-70.692-57.309-128-128-128zM64 256c0-106.039 85.961-192 192-192s192 85.961 192 192c0 41.466-13.146 79.863-35.498 111.248l154.125 154.125c12.496 12.496 12.496 32.758 0 45.254s-32.758 12.496-45.254 0L367.248 412.502C335.862 434.854 297.467 448 256 448c-106.039 0-192-85.962-192-192z’ fill=‘rgba(255, 255, 255, .8)’/%3E%3C/svg%3E”) !important;
–gf-survey-icon-control-rank: url(“data:image/svg+xml,%3Csvg width=‘8’ height=‘14’ viewBox=‘0 0 8 14’ fill=‘none’ xmlns=‘``http://www.w3.org/2000/svg’><path`` fill-rule=‘evenodd’ clip-rule=‘evenodd’ d=‘M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z’ fill=‘rgba(255, 255, 255, .8)’/%3E%3C/svg%3E”) !important;
}
That works as an override. I don’t think there will be a better/easier way due to the fixed fill-color in the SVG’s. I also gave it a go with
filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
but that is less controlable (for me).
BTW - the html[data-color-mode=“dark”] is to apply it only with the Blocksy theme dark mode. Other themes might use the same setup or have it in the tag.