How to change SVG fill color in Ionic 5

user_10284688 0
Viewed 521

I am trying to implement dark mode in the app and for that I need to change the fill color of the svg icon when a user changes mode.

I am trying to use a variable directly in the svg code but it seems to have no effect.

<svg class="trophy" xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><g id="Group_216" data-name="Group 216" transform="translate(-28 -158)"><rect id="Rectangle_2" data-name="Rectangle 2" width="36" height="36" rx="5" transform="translate(28 158)" fill="var(--primaryforicon)"/>
<path id="trophy" d="M19.853,6.795a.4.4,0,0,0-.4-.4H17.768V4.935c0-.013,0-.024,0-.037a.613.613,0,0,0-.612-.613l-.022,0v0H9.015V4.3a.61.61,0,0,0-.563.608c0,.013,0,.025,0,.037V6.394H6.773a.4.4,0,0,0-.4.384h0v5.452h0v0h0a.4.4,0,0,0,.4.4H8.511a4.659,4.659,0,0,0,3.562,3.85v2.66H9.992a.521.521,0,1,0,0,1.041v0h6.238v0a.521.521,0,1,0,0-1.041H14.15v-2.66a4.657,4.657,0,0,0,3.566-3.851h1.736a.4.4,0,0,0,.4-.381h0V6.795h0Zm-11.4,4.8H7.414V7.436H8.456Zm10.355,0H17.767V7.436h1.045Z" transform="translate(33.058 163.583)" fill="var(--secondaryforicon)"/>

It would be really helpful is someone can help me with this

ionic5 ionic-framework svg css
2 Answers

Try this:

<svg class="trophy" xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><g id="Group_216" data-name="Group 216" transform="translate(-28 -158)"><rect id="Rectangle_2" data-name="Rectangle 2" width="36" height="36" rx="5" transform="translate(28 158)" fill="var(--primaryforicon)"/>
        <path id="trophy" d="M19.853,6.795a.4.4,0,0,0-.4-.4H17.768V4.935c0-.013,0-.024,0-.037a.613.613,0,0,0-.612-.613l-.022,0v0H9.015V4.3a.61.61,0,0,0-.563.608c0,.013,0,.025,0,.037V6.394H6.773a.4.4,0,0,0-.4.384h0v5.452h0v0h0a.4.4,0,0,0,.4.4H8.511a4.659,4.659,0,0,0,3.562,3.85v2.66H9.992a.521.521,0,1,0,0,1.041v0h6.238v0a.521.521,0,1,0,0-1.041H14.15v-2.66a4.657,4.657,0,0,0,3.566-3.851h1.736a.4.4,0,0,0,.4-.381h0V6.795h0Zm-11.4,4.8H7.414V7.436H8.456Zm10.355,0H17.767V7.436h1.045Z" transform="translate(33.058 163.583)" fill="var(--secondaryforicon)"/>

    <script>
        let varr = "yellow";
        const svg0 = document.getElementsByClassName("trophy")[0];
        svg0.addEventListener("click", (e) => e.target.setAttribute("fill", varr));

    </script>

"var" is a reserved word, cannot be a variable name.

Admin1

Try this solution. First detect whether the app running on dark mode. Then switch the fill color dynamically.

import { ThemeDetection } from '@ionic-native/theme-detection';

fillcolor: string;

constructor(private themeDetection: ThemeDetection) { }

...

this.themeDetection.isAvailable()
  .then((res: ThemeDetectionResponse) => {
     if(res.value) {
       this.themeDetection.isDarkModeEnabled().then((res: ThemeDetectionResponse) => {
         if(res){
           this.fillcolor = "#FFFFF"
         }else{
           this.fillcolor = "#00000"
         }

       })
       .catch((error: any) => console.error(error));
     }
  })
  .catch((error: any) => console.error(error));

in SVG

<svg class="trophy" xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><g id="Group_216" data-name="Group 216" transform="translate(-28 -158)"><rect id="Rectangle_2" data-name="Rectangle 2" width="36" height="36" rx="5" transform="translate(28 158)" [attr.fill]="fillcolor"/>
user_95148470
Related