onfido-sdk-ui
onfido-sdk-ui copied to clipboard
onfido
Customize the icons via customUI
What was the expected behaviour?
It would be interesting to have the option to customize the color of the icons via customUI.
What happened instead?
No property in customUI seems to allow such customization. The colors are hardcoded as a fill attribute in the SVGs (instances of #353FF4 and #3640F5 can be found in various places)
There might be other ways of achieving this. The only workaround I'm aware of for styling SVGs as background-image uses the filter CSS property. It potentially interferes with other styling options.
Version info:
- Onfido SDK: 6.9.0
- OS: all
- Browser: all
- Device: all
- Node: N/A
- Framework or relevant dependencies (if applicable): N/A
Integration configuration:
N/A
Steps to reproduce:
N/A
Demo:
Not available.
Hello @psenechal-ws You should be able to customize the colour of icons backgrounds via "colorBackgroundIcon" Here is one example: https://github.com/onfido/onfido-sdk-ui/blob/16b248a08877ab144218a82cd073cf598df77240/UI_CUSTOMIZATION.md and here is another example, https://github.com/onfido/onfido-sdk-ui/search?q=colorBackgroundIcon.
The colors can be customized as "colorBackgroundIcon": "#FFD2D2" where the value after the hash is hexodecimal number.
HI @andra-radu , could u please add a param for customizing the color of the focus state of the button?
Hello @psenechal-ws - Could you please rephrase "the color of the focus state of the button"? or maybe you can share a screenshot of the button you are referring to.
@andra-radu
i've changed button color according to documentation, but on focus color is still blue.
@andra-radu I have raised this with our SDK team for further investigation and I will get back to you as soon as they will make progress on this.
Hello @cebandionis - I have checked with our SDK team and they've mentioned that there is no customisation for the focus state. We have active and hover but not focus. I apologise for the inconvenience caused. If you have any further questions or concerns please do not hesitate to contact us. I would be more than glad to assist you.
@andra-radu I got it, so maybe you can set an extra param for focus? because it looks ugly when I want to change the button color? That blue border on focus remains
@cebandionis - I'm currently checking with our SDK team on this to see if they can set an extra param for focus and I will let you know as soon as I will receive an update from them.
Meanwhile, you could go always go for overwriting our style, e.g.
:focus {
box-shadow: inset 0 0 0 2px yellow,inset 0 0 0 3px yellow !important
}
@cebandionis We're working on adding support for this (see PR) and expect this to release in the next version 8.2.0 (no ETA yet)
