How do I set the color of the icon for my Moodle plugin of Activity type (mod) to match the color used by the theme?

25 Views Asked by At

I've been developing a plugin of type activity (mod) for Moodle, but I'm quite new to the technologies used by Moodle and how it works.

I've created an icon for my plugin, and I understand that a 24x24 pixel .svg file needs to be placed inside the "pix" folder at the root of the project. I've done that, the icon looks fine, but it's applying the black color when I haven't defined a "fill" for any color, and the rest of the icons are applying the white color (I assume it's because of the theme my Moodle is using locally, which is Boost).

I would like the color used by the default theme for icons to be applied to my icon as well. If white is used, I'd like that color to be applied to my icon too. I don't want to touch Moodle's code; rather, I prefer to make the configurations within my plugin. And I don't want to set a white "fill" because if other themes don't use white icons, my icon would look odd.

Here's the code for my icon.svg:

<?xml version="1.0" encoding="UTF-8"?>

<svg width="24px" height="24px" viewBox="0 0 74.4 74.4" xmlns="http://www.w3.org/2000/svg">

   <g transform="matrix(0.0215348,0,0,-0.02289543,-96.575931,138.11221)">
   
      <path d="m 6053.2845,5666.111 c -39.0222,-17.3321 -196.4117,-89.051 -350.5494,-158.977 
               -281.6102,-127.8989 -760.9328,-343.0558 -888.4053,-399.2357 -47.477,-20.918 
               -70.24,-34.6641 -75.4429,-44.8243 -13.6578,-27.4923 0.6503,-38.8478 105.3599,
               -83.6722 178.2013,-75.9025 409.733,-178.1021 416.2367,-184.0787 3.9023,-3.5859 
               7.8045,-242.6492 9.7556,-679.5373 l 3.2518,-673.5607 20.8119,-38.8478 c 78.6947,
               -146.4262 347.2975,-252.8093 711.5047,-281.4969 174.9495,-13.7462 370.0605,-1.1953 
               545.6603,34.6641 288.7643,58.5705 455.9094,161.3677 487.1271,299.4268 5.203,22.1133 
               7.1541,230.0983 7.1541,686.1115 v 654.4356 l 86.4992,38.2502 c 86.4992,37.6524 167.145,
               72.9143 274.4561,119.5316 32.5185,14.3438 61.1348,25.6993 64.3866,26.297 3.2519,0.5976 
               5.203,-110.5668 4.5526,-267.1532 -1.3007,-239.6609 -1.9511,-267.7509 -11.7067,-273.1298 
               -26.6651,-14.9415 -61.7851,-49.008 -70.8903,-67.5354 -7.1541,-15.5391 -9.1052,-51.3986 
               -9.1052,-153.5981 0,-127.3012 0.6504,-133.8754 14.9585,-158.9771 31.2178,-54.3869 100.8074,
               -83.6721 167.1451,-70.5236 44.8755,8.9648 90.4014,38.2501 108.6118,70.5236 14.3081,25.1017 
               14.9585,32.2736 14.9585,157.1841 0,97.4183 -2.6015,135.6684 -9.1052,150.6099 -12.357,26.8946 
               -45.5259,60.3634 -68.9392,69.3283 l -19.5111,7.1719 v 300.622 300.0244 l -14.3081,16.7345 c 
               -9.7556,11.3555 -54.6311,34.6641 -135.277,69.926 -243.2383,107.5784 -505.9878,226.5124 
               -870.8453,394.4543 -441.6012,203.2038 -401.9286,192.4459 -518.3448,139.852 z m -385.019,
               -733.3265 c 236.7346,-100.4066 439.65,-184.0787 470.2174,-194.8365 l 26.0148,-8.9649 172.3481,
               72.9143 c 94.954,40.0431 213.3213,90.844 263.3998,111.762 204.2161,87.2581 228.2798,97.4183 
               236.0843,97.4183 5.8533,0 7.8044,-14.9414 7.8044,-56.1798 0,-53.1916 -0.6504,-56.7776 -14.3081,
               -60.9612 -8.4548,-2.3906 -85.1985,-33.4688 -171.0473,-69.3283 -340.1435,-142.2427 -480.6234,
               -197.8249 -498.1834,-197.2272 -20.8118,0.5977 -181.4532,63.9494 -600.9418,238.4656 l -84.5481,
               35.2618 -1.9511,55.5822 c -1.9511,53.7893 -1.3007,54.9846 11.7067,51.3986 7.8044,-2.3906 90.4014,
               -36.4571 183.4043,-75.3049 z m -89.1007,-433.3021 c 133.9762,-56.7776 343.3953,-89.0511 578.8292,
               -89.0511 260.7984,0.5977 478.0219,37.6525 624.3552,106.9808 28.6162,13.1485 53.9807,25.1016 57.2325,
               26.297 2.6015,1.1953 4.5526,-88.4534 4.5526,-199.0202 v -200.8131 l -29.917,-26.8946 c -58.5333,
               -51.9963 -206.8176,-105.1879 -366.8087,-130.8872 -90.4014,-14.3438 -243.2383,-22.711 -354.4516,
               -18.5274 -203.5657,7.7696 -366.1582,38.8478 -487.7774,93.2347 -66.3377,29.2852 -86.4992,43.629 
               -116.4162,79.4885 l -16.9096,20.3204 v 200.8131 201.4108 l 31.2177,-22.1133 c 16.9096,-11.9532 
               51.3792,-30.4806 76.0933,-41.2384 z m -7.1541,-653.2404 c 78.0444,-33.4688 207.468,-63.3517 348.5983,
               -79.4885 104.7096,-11.9532 412.3345,-10.1602 510.5404,3.5859 89.7511,11.9532 224.3776,40.0431 275.7568,
               57.9729 40.323,13.7461 111.8637,45.422 120.3185,53.7892 3.9022,2.9883 9.1052,5.3789 11.7066,5.3789 
               2.6015,0 5.203,-88.4534 5.203,-196.6295 V 3494.819 l -30.5674,-26.2969 c -41.6237,-35.2618 -66.3377,
               -49.008 -137.228,-74.1096 -142.4311,-50.2033 -291.3658,-71.719 -502.0856,-71.1213 -156.7392,0.5976 
               -229.5806,5.9765 -353.8013,26.8946 -145.0324,24.504 -264.0501,71.7189 -318.6812,124.9105 l -29.917,
               29.2853 v 200.8131 200.8131 l 29.917,-20.918 c 16.9096,-11.9532 48.1274,-29.2852 70.2399,-38.8478 z" 

      />

   </g>

</svg>

image describing the problem, the activity below is my plugin

The Moodle quiz or other non-Moodle activity plugins I've tried do it, but it's not clear to me how they do it, that the same colour is displayed and that it varies depending on the theme.

0

There are 0 best solutions below