Add skin tone and hair color options for ARASAAC symbols

[jacobmcgowan]

Benefit

Allowing users to select a skin tone and hair color for symbols that more closely resemble them would help make boards feel more personal.

Composing image URLs with skin tone and hair color

ARASAAC's API supports getting symbols with different skin tones and hair colors. For example, you can get the image URL for a symbol using https://api.arasaac.org/v1/pictograms/{idPictogram}?skin={skinToneName}&hair={hairColorName}&url=true. For example, https://api.arasaac.org/v1/pictograms/31849?skin=mulatto&hair=brown&url=true results in { "image": "https://static.arasaac.org/pictograms/31849/31849_hair-A65E26_skin-E3AB72_500.png" }

ARASAAC supports the following skin tones and hair colors where the skin tone and hair color name is the value used the query parameters (e.g. ?skin=black&hair=brown) and the HEX code is used in image URLs (e.g. 31849_hair-A65E26_skin-E3AB72_500.png):

Skin Tone	HEX
white	F5E5DE
black	A65C17
assian	F4ECAD
mulatto	E3AB72
aztec	CF9D7C

Hair Color	HEX
blonde	FDD700
brown	A65E26
darkBrown	6A2703
gray	EFEFEF
darkGray	AAABAB
red	ED4120
black	020100

For more details see the ARASAAC API documentation.

UI

There are a couple of places where the skin tone and hair color options could be placed in the UI.

One is in Settings > Symbols. If placed here, then the settings could apply to all symbol requests made to the ARASAAC API.

Another option is in the Symbol Search. This would allow for users to use multiple different skin tone and hair color options for each board; however, it may clutter the search page on small screens.

[jacobmcgowan]

If approved, I am free to start working on this feature.