Hi,
I’m currently experimenting with the custom CSS file in SAO. Most UI elements change as expected, but the icons in the menu and in the action menu seem to resist every CSS rule I try. Since the icons themselves are black SVG files, the color must be applied somewhere else.
However, the browser’s developer tools don’t show any style that affects their color.
Does anyone know how SAO assigns colors to those icons, or how I can override them?
Thanks and regards,
Jakob
Hi Jakob,
I can share your frustration, I already walk through the same problem. As I see, the problem is raised because the SVGs are missing fill="currentColor", if that was in place changing the color should be easier.
I’ve found that you can use filter to modify the color. Here is an example:
img.icon{
filter: brightness(0) saturate(100%) invert(30%) sepia(25%) saturate(2566%) hue-rotate(186deg) brightness(99%) contrast(79%);
}
To know which filter you should use in order to reach the color you want, I’ve used this filter generator.
Once you’ve got the color, the problem does not end there, applying filters causes the icon to not be clickable, like on side menu, favorite icons, binary fields, datepickers so you should add pointer-events: none; and pointer-events: none; to corresponding classes depending on the required behavior for each one. Finally, I also abandoned this path due to some other problem related to this (don’t remember which) that I could not solve, but if you want to continue I can share my progress.
Hi Andrià,
thanks for your input.
It sounds like a nightmare, I probably will be abandoning this path too.
Regards Jakob
The icons are filled with the first/primary color of the Sao.config.icon_colors.
If you want to customize it, you just have to change it in custom.js.
@ced
as always on spot! Thank you very much.
Regards Jakob
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.