Hi Kolien,
You can remove color from the SVG files and use fill to to color the image in javascript.
I found a better way to change the color of the icons in dark mode. You have to make sure that the SVG doesn't have a color hardcoded inside it. Then it should be able to take the color from the code. You can delete the color of a SVG in a editor program (I used Adobe Illustrator).
You can use the following code:
export const iconDarkMode = {
container:{
backgroundColor: "#fff", //I used a icon with a gab, this way the background is white.
},
image:{
fill: darkMode ? "#6199FF" : "#1B60DB", //the color of the colorless SVG
}
}
The solution we talked about in slack is what I already discribed above. I add both imags/icons in de modeler with two different classes: iconHome and iconHomeDark for example. In the code I add:
import { darkMode } from "./custom-variables";
export const iconHome = {
container: {
width: darkMode ? 0 : 24,
height: darkMode ? 0 : 24
}
}
export const iconHomeDark = {
container: {
width: darkMode ? 24 : 0,
height: darkMode ? 24 : 0
}
}