How to style the calendar icon?

[jdavidbakr]

Apologies if this is in the docs, but I can't find it ... I have a screen that has a dark background and have styled the <DatePickerField /> to be white text. However, the calendar icon remains black. How do I change the color of the icon?

[bundyo]

Unfortunately you can't just change the color - this icon is a background image. There is styling for it in the {N} Theme 2.0, so you can probably use that. If you don't plan on using it, you can just rip it off from there and use it:

.ns-dark DatePickerField {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAAwBAMAAAB9IEC+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAPUExURUdwTP///////////////xPgMRoAAAAEdFJOUwDAECBTkMJDAAAAV0lEQVRIx2NgIBW4uLigMeinlEnEBQM4KmBVyuiCBQhgVcqCTakzDqUKGG51ccChlIFWStHDboQpxQLoq3Q0CgaRUhZoVI0qHblKB3tBREJlREIVRwsAALYjaEQQIFg+AAAAAElFTkSuQmCC');
}

If you don't want to support two modes - remove the .ns-dark in front of it.

[support]

👋 @jdavidbakr, we use the issue tracker exclusively for bug reports and feature requests. However, this issue appears to be a support request. Please, use Stackoverflow to get help.