Change (svg) images in dark mode native

4
Hi all,  I'm styling the darkmode of a native app and have some trouble with images. I have a lot of svg images for custom icons. Is there an easy way to change the colors of these svg images or something in the modeler to check or uncheck for in darkmode? I am now adding every images twice in different colors and add custom code to let the image disappear in darkmode/lightmode. This is a lot of work and not maintenance-friendly. Is there an easier way to do this? Thanks! Kolien
asked
3 answers
4

Hi Kolien,

You can remove color from the SVG files and use fill to to color the image in javascript. 

answered
9

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
  }
}

 

answered
2

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
   }
}

 

answered