Difference between revisions of "Creating a new multicolor icon theme"

From Inkscape Wiki
Jump to navigation Jump to search
(Change Adam's edit back. This also reloads icons in docked dialogs, unlike Adam's suggestion.)
Line 16: Line 16:
  
 
# Find the '''Inkscape data folder''' at <code>Edit > Preferences > System: Inkscape data</code>.
 
# Find the '''Inkscape data folder''' at <code>Edit > Preferences > System: Inkscape data</code>.
# Find your '''Inkscape user icon folder''' at <code>Edit > Preferences > System: User icons</code>.
+
# Find you '''Inkscape user icon folder''' at <code>Edit > Preferences > System: User icons</code>.
 
# Open the folder <code>icons</code> in the Inkscape data folder.
 
# Open the folder <code>icons</code> in the Inkscape data folder.
 
# Copy the <code>multicolor</code> icon folder from there into your Inkscape user icon folder.
 
# Copy the <code>multicolor</code> icon folder from there into your Inkscape user icon folder.
Line 44: Line 44:
 
## Click on the <code>+</code> button next to the desired class, e.g. if you want the fill to be green (<code>.success</code>), you will click on <code>+</code> button next to <code>.success</code>.
 
## Click on the <code>+</code> button next to the desired class, e.g. if you want the fill to be green (<code>.success</code>), you will click on <code>+</code> button next to <code>.success</code>.
 
## If you changed your mind and want a different class, you can click on the triangle behind the class name to expand the list of objects that use the class, and remove the class from the path by clicking on the <code>x</code> button.
 
## If you changed your mind and want a different class, you can click on the triangle behind the class name to expand the list of objects that use the class, and remove the class from the path by clicking on the <code>x</code> button.
# To preview your new icon, save the icon file (<code>Ctrl+S</code>), and double click Dark theme in the preferences to force a reload of the icon theme.
+
# To preview your new icon, save the icon file (<code>Ctrl+S</code>), and switch to a different theme, and then switch back to your new theme in the preferences to force a reload of the icon theme.
 
# Now you can see how the icon looks when it is used in the Inkscape interface.
 
# Now you can see how the icon looks when it is used in the Inkscape interface.
 
# Repeat the process 450 more times to finish your very own '''Super Cool Icons'''.
 
# Repeat the process 450 more times to finish your very own '''Super Cool Icons'''.
Line 51: Line 51:
 
== Feature support ==
 
== Feature support ==
  
==== Supported ====
+
==== Supported: ====
  
 
* 4 solid fill colors (set by classes)
 
* 4 solid fill colors (set by classes)
Line 60: Line 60:
 
* embedded bitmaps (not recommended)
 
* embedded bitmaps (not recommended)
  
==== Unsupported ====
+
==== Unsupported: ====
  
 
* strokes with any color different from the theme base color
 
* strokes with any color different from the theme base color
Line 78: Line 78:
 
* Try to keep the SVG file '''small and simple''' so it does not take a long time to render your icons (this can impact start up time).
 
* Try to keep the SVG file '''small and simple''' so it does not take a long time to render your icons (this can impact start up time).
 
* Try to use '''discrete opacity values''': 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100% to keep the SVG files small.
 
* Try to use '''discrete opacity values''': 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100% to keep the SVG files small.
* Use a '''low precision''' for your file's coordinates (maximally 0.xx). This includes node positions, object transformations etc.
+
* Use a '''low precision''' for your file's coordinates (maximally 0.xx). This includes node poritions, object transformations etc.).

Revision as of 18:43, 11 February 2020

What are multicolor icons?

From Inkscape 1.0 on, Inkscape icon sets can make use of 4 user-customizable highlight colors, plus a user definable base color (colors can be mixed and blended). A user can select the colors in Edit > Preferences > Interface > Theme: Display icons.

The stock multicolor icon theme was designed by Adam Belis. Most of its icons are based upon those contained in the hicolor symbolic icon theme.

Since Inkscape's switch to Gtk3, every icon is saved in a separate file. There are about 450 different icons used in Inkscape. When you're creating your own icon theme, you don't need to make a new one for each of those. Instead, you can base your changes on an existing icon theme.

How does it work?

Gtk supports up to 4 classes of colors: .base, .success, .warning and .error. Normally, .error is set to red, .warning is orange and .success is green. .base is black and the background is transparent. The default colors can be set in a CSS file in the theme's folder.

How to build a new set of icons: Practical Guide

Creating a new icon theme and setting its default colors

  1. Find the Inkscape data folder at Edit > Preferences > System: Inkscape data.
  2. Find you Inkscape user icon folder at Edit > Preferences > System: User icons.
  3. Open the folder icons in the Inkscape data folder.
  4. Copy the multicolor icon folder from there into your Inkscape user icon folder.
  5. Rename the new folder to your new name (for example, call it Super Cool Icons).
  6. Open the file index.theme in your new icon folder with a text editor (e.g. Notepad), and adjust the name and comment line there, too. Save the file.
  7. To set up your default colors:
    1. Open the file highlights.css in your new Super Cool Icons folder with your favorite text editor.
    2. Adjust the hex color codes of the classes to your liking, e.g. if you want your .success class to be green, you will change it to #009909.
    3. You can copy hex colors from Inscape's Fill and Stroke dialog or use an online color chooser, e.g. https://htmlcolorcodes.com .
    4. The .dark classes can be used to adjust your color scheme to dark themes.
    5. Save and close the highlights.css file.
  8. You can also come back and tweak the colors later, if you like.

Editing or creating your first icon

Now when you are happy with your colors, we can jump into icon editing:

  1. Think about how you want to use the three available colors for your theme, e.g. maybe you want to sort icons by functionality, placement, or any other attribute.
  2. Open any icon file in the folder symbolic/actions inside your Super Cool Icons folder with Inkscape 1.0.
  3. Open the dialog Object > Selectors and CSS.
  4. Also open Edit > Preferences > Interface > Theme and select the icon theme you have just created.
  5. Delete the current icon.
  6. Design your own icon on the same layer.
  7. To assign a color to a fill:
    1. Select the path.
    2. In the Selectors and CSS dialog, you will see 3 classes (.success, .warning, .error) (you may need to expand the dialog, or switch to vertical mode to be able to see them).
    3. Click on the + button next to the desired class, e.g. if you want the fill to be green (.success), you will click on + button next to .success.
    4. If you changed your mind and want a different class, you can click on the triangle behind the class name to expand the list of objects that use the class, and remove the class from the path by clicking on the x button.
  8. To preview your new icon, save the icon file (Ctrl+S), and switch to a different theme, and then switch back to your new theme in the preferences to force a reload of the icon theme.
  9. Now you can see how the icon looks when it is used in the Inkscape interface.
  10. Repeat the process 450 more times to finish your very own Super Cool Icons.
  11. Congratulation you did it! Dont forget to share your Super Cool Icons theme with the community on the Inkscape website.

Feature support

Supported:

  • 4 solid fill colors (set by classes)
  • arbitrary opacity values (not alpha, but object opacity)
  • LPEs (live path effects)
  • clip masks
  • filters (not recommended)
  • embedded bitmaps (not recommended)

Unsupported:

  • strokes with any color different from the theme base color
    • Workaround: add the 'Join type' LPE (it nondestructively converts strokes to paths)
  • gradients
    • Workaround: you can simulate linear gradients by creating multiple rectangles in a row and changing their opacity (0,10,20,30...), and then clipping this group with the shape you want to have a linear gradient. You can simulate radial gradients by using blur on paths.
  • mesh gradients
  • blend modes
  • different colors than those set by .success, .warning and .error.
    • Workaround: you can create more than 4 colors by layering objects with lowered opacity. Create a duplicate of the path, then change the new path's opacity and select one of the color classes. E.g. use one object with the class .success at 30% opacity, placed on top of another object with an unset fill for a different shade of the .success color.

Best practices

  • Keep it all in one layer and do not change the name of the layer.
  • Keep in mind that the icons are going to be very small (16x16px), so use a grid for drawing to ensure crisp rendering.
  • Add a color class to all paths, or unset the fill. If no class is set, the default class .base will be used.
  • Try to keep the SVG file small and simple so it does not take a long time to render your icons (this can impact start up time).
  • Try to use discrete opacity values: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100% to keep the SVG files small.
  • Use a low precision for your file's coordinates (maximally 0.xx). This includes node poritions, object transformations etc.).