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

From Inkscape Wiki
Jump to navigation Jump to search
m (First list fixed.)
m (Next piece.)
Line 11: Line 11:
 
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 white (transparent?). The default colors can be set in a CSS file in /share/inkscape/icons/<theme_name>/highlights.css.
 
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 white (transparent?). The default colors can be set in a CSS file in /share/inkscape/icons/<theme_name>/highlights.css.
  
== How to build a new set of icons (practical guide) ==
+
== How to build a new set of icons: Practical Guide ==
  
 
==== Creating a new icon theme and setting its default colors ====
 
==== Creating a new icon theme and setting its default colors ====
Line 29: Line 29:
 
# You can also come back and tweak the colors later, if you like.
 
# You can also come back and tweak the colors later, if you like.
  
==== Editing/creating first icon ====
+
==== Editing or creating your first icon ====
  
 
Now when you are happy with your colors, we can jump into Icon editing:
 
Now when you are happy with your colors, we can jump into Icon editing:
  
# Open any icon you like in Inkscape 1.0 from ''SUPER COOL ICONS''
+
# 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.
# Open CSS selectors and styles Dialog
+
# Open any icon file in the folder 'symbolic/actions' inside your 'Super Cool Icons' folder with Inkscape 1.0.
# Open '''Edit/Preferences> Interface> Theming''' and select your icon theme your just created
+
# Open the dialog Object > Selectors and CSS.
# Delete content of layer in Object dialog
+
# Also open Edit > Preferences > Interface > Theme and select the icon theme you have just created.
# Design your icon
+
# Delete the current icon.
# When you want to add color to path select it and go to CSS selectors
+
# Design your own icon.
# You will see 5 classes (.base, .success, .warning, .danger .dark)
+
# To assign a color to a fill:
# you can assine color to path by clickin plus button next to desired class
+
## Select the path.
# So lets say we want to add green (.success) you will click on plus button next to .success
+
## 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).
# If you changed your mind and want diffrent color you can click on triangel roll up all paths in that class and delet it form class with x button.
+
## 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.
# To preview your icon designs live-ish '''SAVE ( Ctrl+S )''' and than go to ('''Edit/Preferences> Interface> Theming''') and double click chcek box Dark theme.
+
## If you changed your mind and want a different class, you can click on the triangle to expand the list of paths that use the class, and remove the class from the path by clicking on the x button.
# This will reload Icons and you can see how they look ( note that this technique does not work for dock icons you need to restart inksacpe to see thees icons change )
+
# To preview your icon designs, save the icon file (Ctrl+S), and then toggle the box for the dark theme twice in the preferences to force a reload of the current theme.
 +
# Now you can see how they look when used in the Inkscape interface (note that this technique does not work for dock icons you need to restart inksacpe to see thees icons change )
 
# Now do it 450 more times and you made '''SUPER COOL ICONS'''
 
# Now do it 450 more times and you made '''SUPER COOL ICONS'''
 
# Congratulation you did it dont forget to share your '''SUPER COOL ICONS''' theme with comunity on inkcape.org
 
# Congratulation you did it dont forget to share your '''SUPER COOL ICONS''' theme with comunity on inkcape.org

Revision as of 16:56, 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 and documented 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, but 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 white (transparent?). The default colors can be set in a CSS file in /share/inkscape/icons/<theme_name>/highlights.css.

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 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.
  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 to expand the list of paths that use the class, and remove the class from the path by clicking on the x button.
  8. To preview your icon designs, save the icon file (Ctrl+S), and then toggle the box for the dark theme twice in the preferences to force a reload of the current theme.
  9. Now you can see how they look when used in the Inkscape interface (note that this technique does not work for dock icons you need to restart inksacpe to see thees icons change )
  10. Now do it 450 more times and you made SUPER COOL ICONS
  11. Congratulation you did it dont forget to share your SUPER COOL ICONS theme with comunity on inkcape.org

Feature support

Suported:

  • 4 colors + opacities of this colors (set by classes)
  • solid fills (set by classes)
  • LPE (life paths effects)
  • Cliping masks
  • Filters ( dont reccomend to us it )
  • Bitmaps embeds ( dont reccomend to us it )

Unsuported:

Best technical practisies

  • Keep it all in one layer and DONT change name of layer
  • Keep in mind that this icons are going to be very small (16*16px) so use grid for chrisp rendering
  • Add color class to all paths If you cont defoult class is .base
  • Try to keep SVG small and simple so it does not take long time to render them (this can impact start up time )
  • Try use opacities 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, % to keep SVGs small
  • Try to use max 0.xx on in your cordinations ( nodes poritions , object transformations etc)
  • Tips and tricks

  • to render Strokes add LPE Join paths ( It just nondestractivly convert strokes to paths )
  • you can create more than 4 colors by mixing 4 colors with opacity. Create duplicat of path you want to mix color add new color and change opaciy. Succes 100% + Base 50% for darker shade of Succes color
  • keep your icon folder in (WIN) C: YOUR USER NAME
  • You can set your defoult colors of normal theme and dark theme in highlights.css
  • you simulate linear gradients by creating buch of rectangles in row and changing their opacity (0,10,20,30...) and than clip this grupe with shape you want to make linear gradient
  • you simulate radial gradient by making circles goign from small to big and changing their opacity (0,10,20,30...) and cliping this grupe with shape you want to make linear gradient
  • you can simulate gradients by using blur on paths
  • to preview your icon designs live-ish keep preference panel (Edit/Preferences> Interface> Theming) open in corener a SAVE ( ctrl+S ) and double click chcek box Dark theme this will reload Icons and you can see how they look (Note that this technique does not work for dock icons you need to restart ink to see changes)
  • you can ajust your color schem in dark mode by editing highlights.css dark.class name ( contras works diffrently on dark and white backround)
  • Have a fun