← Back • Potatoe

Kickoff Shenanigans (or, how i got a dynamic KDE Plasma application launcher icon)

2025-07-17 • Spike (spike@potatoe.ca)

I recently saw a screenshot of someone’s screen, where they were running KDE Plasma, but with one thing changed. The application launcher was showing an icon for Framework! And I had a thought.

Hey, I’ve got a Framework! And I’ve been getting bored of the default application launcher icon anyway.

Only problem was I have a widget to change my colorscheme from light to dark, which I use often–I needed some way for an SVG I downloaded and cleaned up to change to a light color when I was in a dark theme, and a dark color when I was in a light theme. Just like how the default icon does it. I know I’m not changing icon themes with my color switcher widget, so it has to be in the icon kde-symbolic. Looking up /usr/share/icons/breeze/apps/22/kde-symbolic.svg, it’s pretty clear to see that KDE’s actually using a hack!

The Hack

  1. In each path, set style="fill:currentColor;"

  2. For each path, also add class="ColorScheme-Text"

  3. Add this little snippet inside <svg>:

<defs id="defs3051">
    <style type="text/css" id="current-color-scheme">
      .ColorScheme-Text {
        color:#232629;
      }
    </style>
</defs>

And that’s all!

Why it works

NOTE: Let me know if any of this is wrong! I’m using my best judgement based on my current knowledge of the SVG spec.

SVGs have a little variable called currentColor which you can use for fills/strokes inside a style tag. Remember, SVGs are a W3 standard and are meant to be embedded inside websites! This means they can inherit a color style attribute, which is passed down through currentColor. KDE makes use of this by setting the color of a “symbolic” SVG to some dark or light foreground dependent on the current color scheme. The second bit in step 3 makes use of that. It adds a <style> tag where we’re setting the icon’s color (the icon has a class of .ColorScheme-Text, by the way) to some grey value. This doesn’t matter of course, because we’re giving it an ID so KDE Plasma can override its contents. When we change a colorscheme, all we have to do is change the inner text of this style element to change the color of .ColorScheme-Text–our icon–and then currentColor is a variable that reads from that.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 30">
    <defs id="defs3051">
        <style type="text/css" id="current-color-scheme">
          .ColorScheme-Text {
            color:#232629;
          }
          </style>
    </defs>
    <path style="fill:currentColor;fill-opacity:1;stroke:none" d="M29.8357 11.1639L27.5526 9.80995C26.4837 9.17385 25.823 8.00115 25.823 6.73249V4.02461C25.823 3.47024 25.5774 2.94786 25.1588 2.5996C23.9135 1.56549 22.5125 0.726826 20.9974 0.126259C20.4923 -0.0727449 19.9285 -0.0336548 19.4615 0.24353L17.175 1.60102C16.1061 2.23713 14.7881 2.23713 13.7158 1.60102L11.4292 0.24353C10.9622 -0.0336548 10.3949 -0.0762986 9.89333 0.126259C8.37474 0.726826 6.97722 1.56549 5.73536 2.59605C5.3168 2.9443 5.0712 3.46669 5.0712 4.02106V6.72894C5.0712 7.99759 4.41395 9.1703 3.34159 9.8064L1.05852 11.1603C0.591524 11.4375 0.273277 11.9173 0.190256 12.4645C0.0622657 13.2712 0 14.0957 0 14.9343C0 15.773 0.0622657 16.5974 0.186797 17.4005C0.269818 17.9478 0.588065 18.4311 1.05506 18.7083L3.33813 20.0622C4.40703 20.6983 5.06774 21.871 5.06774 23.1397V25.8476C5.06774 26.4019 5.31334 26.9243 5.7319 27.2726C6.97376 28.3031 8.37474 29.1418 9.88987 29.7424C10.3949 29.9414 10.9588 29.9023 11.4258 29.6251L13.7123 28.2676C14.7812 27.6315 16.0991 27.6315 17.1715 28.2676L19.458 29.6251C19.925 29.9023 20.4923 29.9414 20.9939 29.7424C22.5091 29.1418 23.91 28.3031 25.1519 27.2726C25.5705 26.9243 25.8161 26.4019 25.8161 25.8476V23.1397C25.8161 21.871 26.4768 20.6983 27.5457 20.0622L29.8287 18.7083C30.2957 18.4311 30.614 17.9514 30.697 17.4005C30.8181 16.5974 30.8838 15.773 30.8838 14.9343C30.8838 14.0957 30.8215 13.2712 30.697 12.4681C30.6174 11.9208 30.3026 11.4411 29.8357 11.1639ZM15.4454 24.4688C10.3223 24.4688 6.16776 20.2008 6.16776 14.9379C6.16776 9.67491 10.3223 5.40698 15.4454 5.40698C20.5684 5.40698 24.7229 9.67491 24.7229 14.9379C24.7229 20.2008 20.5684 24.4688 15.4454 24.4688Z" class="ColorScheme-Text"/>
</svg>

And that’s all!! See you again in a few years, I guess.

Built with Pandoc and a fish script. Contribute here!