Question about Theming Icons

Development Themes Development
#1

Hello,
I have started a theme based on the Breeze look from KDE Plasma¹ (Opensuse, Kubuntu, etc.) . I could do most of the reskinning from the starter theme, the Taiga theme (from the git) and the Agapanthus theme (which I found online).

There are some elements which are very difficult to skin.

  1. The sidebar: Some of the id’s of the items that hold the folder names and icons are predicatbles, i.e. id=“Unread”, others are not human readable, i.e. id=“Jm47j8CLKMvTHR8RXMxm2PmDsK86ai3BYnMyb4ow6”. I am concerned that these could be computer dependent, and not work properly. But I did not find any other way to identify these items properly.
  2. The buttons which are at the bottom of the mail composition window or panel are even harder, and I did not manage to skin most of them. You can see the commented-out failed code in styles/email-frame.less. In the button with a handle (like the reminder button) it is especially difficult to modify the button without changing the handle. Do you have any example were this is done, if it is doable in an official way?

kind regards, and thank you for you great software

[1] GitHub - paulatz/Mailspring-Theme-Breeze-Light: A starting point for creating your own custom Mailspring themes!

(Originally posted by paulatz on GitHub.)

1 Like
#2

Here I am… if you have any example or doc I’ll take it

P.S. I think I have solved the first question as I can identify the icon from the alt-text of the img, still looking for the second part

1 Like
#3

Update: I’ve been able to skin all icons, using either the alt-text or just the img src to identify the correct img tag. There could be some problem if @1x and @2x images are used under different cases, but nothing that cannot be fixed.

You can check my theme on github to see how I have done it (composer.less and sidebar.less)

1 Like