Theming colour changes to SVGs in action links

Created on 18 October 2024, 7 months ago

We are experimenting with the colours of the 'on-hover' action links and we would like to know how do we should go about using theming to change the colour of the SVG icons 1,2 and 3 as illustrated below...

Thank you

💬 Support request
Status

Active

Version

1.8

Component

Code

Created by

🇬🇧United Kingdom SirClickALot Somerset

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @SirClickALot
  • 🇵🇹Portugal bbruno Poland

    Hi sirclickalot, the SVGs that are used in the actions links are actually background images applied to pseudo-element '::before' on each link.

    Since these are black, they can be easily manipulated using a 'Filter' style.

    For example, this filter when targeting this '::before', will turn the icons red:

    .frontend-editing__action::before { 
     filter: invert(20%) sepia(90%) saturate(4516%) hue-rotate(357deg) brightness(97%) contrast(135%);
    }
    

    You can search online for 'CSS filter black to hex' and find tools that will provide you with the correct filter styling to match your desired color

  • Status changed to Postponed: needs info 17 days ago
  • 🇵🇹Portugal bbruno Poland
Production build 0.71.5 2024