Default theme: icon colors

[oleq]

Note: Discussion about icon types (SVG vs icons fonts) in #109.

---

Default theme may come with:

1. Colourful iconset
   • Examples: Kama, Moono Color.
   • Pros
     • More exciting than monochromatic icons.
   • Cons
     • Far more time consuming.
     • May not integrate with some web pages/application, which avoid colored UI.
2. Monochromatic iconset
   • Examples: Moono.
   • Pros
     • Faster to develop, maintain and extend.
     • Unobtrusive.
     • Also integrates with colorful applications.
     • More focus on shape and meaning.
   • Cons
     • It can be seen as boring, dry.
     • Sometimes it's hard to avoid colors (like "text color" button).

Which option is the best?

---

Related tickets:

• Default theme: contrast.
• Default theme: icon types.

[pjasiun]

What about 3-colors? White and black with details in additional color, for example red, by default. It would be great if that color would be configurable, but it may be hard to implement. This way editor could better fit webpage.

I general it is the pros of monochromatic iconset, I believe they better fit random webpage which integrates CKEditor.

[oleq]

It would be great if that color would be configurable, but it may be hard to implement. This way editor could better fit webpage.

@pjasiun Sounds great but that would only be possible if we used SVG inline (https://css-tricks.com/cascading-svg-fill-color/, http://stackoverflow.com/questions/13367868/modify-svg-fill-color-when-being-served-as-background-image), which is unlikely TBH.

[pjasiun]

Or (maybe) we could use png, with transparency, and change the background color, couldn't we?

[Reinmar]

Or produce SVG icons generator ;) Kinda like LESS.

[Comandeer]

There is also one more option: custom icon font, which color can be easily made configurable. Choosing icon font enables us also to use nice features – ligatures, that could improve accessibility of icons de facto out of box.

[SteveTheTechie]

Coincidentally, some useful discussion on icons happened on GitHub related to JQuery Chassis (another GitHub section I am following): https://github.com/jquery/css-chassis/issues/1

They decided on SVG for the flexibility... +1 to Reinmar

I hate monochromatic icons. We are not dogs. Humans have cones for colors in their eyes... should make use of them. :-D Color communicates additional information.

I am currently using the FontAwesome iconic font. I thought it would be a slam dunk to use, but I have run into the occasional issue with corporate and government users that have downloadable web fonts blocked by their IT departments. I am going to still use FontAwesome (until JQ Chassis is released) but keep in mind that downloads of web fonts can be blocked.

[oleq]

Note: Moved discussion about icon types to #109. Let's focus on visual appearance in this issue only.

I hate monochromatic icons. We are not dogs. Humans have cones for colors in their eyes... should make use of them. :-D Color communicates additional information.

Please note that CKEditor is integrated into numerous environments (web pages, applications, some of them quite exotic). It is our goal to make default theme as flexible as possible, so it visually works out–of–the–box for as many integrations as possible. Something like jeans and t–shirt – virtually everyone looks OK in it. So it's not about making thing beautiful but universal.

[fredck]

I agree with @oleq and I'm for a monochromatic solution. The editor UI is not there to enhance the overall application style... it must be neutral instead.

Additionally, there must be a reason why this is a tendency out there.

[SteveTheTechie]

Have you looked at number of CKE4 builds w/ mono vs color themes for some perspective?

[mrmnmly]

definietly monochromoatic. It is way more accessible for some people.

At the same time I like the idea behind 3 color icons, mentioned by @pjasiun - it could be done with e.g. icon font and :before and :after tags - each of them would contain specific part of the icon and could have separated color - what do You think?

EDIT: it is called 'stack icons' - thanks @oleq for link to the other issue with a mention about it.

[oleq]

@ofcapl Take a look on #109.

[AlfonsoML]

Color doesn't mean that it has to be a full rainbow in each icon, it can be something like the 3 colors proposal by @pjasiun , something that really helps the users to quickly find each icon instead of having to hunt them around everytime. For those that use a very basic toolbar like the one shown here then monochromatic can be a good solution because they expect mostly plain text and few usage of the icons, but as soon as you have two rows of icons it's really useful to have the extra hints provided by the colors to quickly locate each icon.

Look at the real life, signs have colors, everything has colors and help us to find and locate them, but we don't like when anyone flashes a light on our face.

[SteveTheTechie]

@AlfonsoML: Agree completely with you...

+1 for 3-color icon option by @pjasiun ... excellent compromise!

[fredck]

Other than some funky effect, I don't think that "one" additional color adds a lot in terms of helping understanding or locating icons. It is true that the use of color in signs is useful but in those cases the color has a precise meaning and effectively participate on the sign meaning (e.g. red = no; green = yes).

If the point is just making the icons stand out, still a monochromatic solution fits. One can make icons flashing red instead of dark gray it that's the whole point about it. A mono configurable solution seems to be enough.

[Reinmar]

I agree with Fred. Either multicolor icons or monochromatic. Intermediate solutions will only make things a lot harder to code without giving much better results.

[oleq]

but as soon as you have two rows of icons it's really useful to have the extra hints provided by the colors to quickly locate each icon.

@AlfonsoML This is something we'd like to avoid. Take a look on #95.

Anyway, take a look on Google Docs, it's all mono:

But icons may get custom color when necessary, i.e. to announce the state of the feature:

It makes sense to me.

BTW, it surprised me that Google Docs uses PNG sprites (instead of SVG or icon fonts) – #109.

[AlfonsoML]

Instead of taking to designers and programmers that might bias the answers, it would be better to check how users interact with the tools. I find myself that if a web is using gray monochromatic icons, the cognitive load required by me to use its toolbar it's much greater than one that provides typical colors for some features. If we're going to paste toolbars, here's Visual Studio: Simple icons with only 2-3 colors, they can be recognized by people with vision problems but they are easier to understand for the rest of the people that ones with only B&W

[SteveTheTechie]

I think this is a discussion that will always have some proponents on either side. Suffice to say, that there will probably be some that will favor mono icons and there will be some that will favor color icons. If you have some built-in flexibility around this, I think that will allow both camps to get what they want.

[koleary]

There may be people who prefer color icons from an aesthetic point of view but usability is what's important and from that perspective it becomes more difficult—and less effective—to apply "semantic" color (eg. red for a destructive action) selectively if the icons already have color.

[georgephillips]

+1 for monochromatic icons. I agree with @oleq that some colour where applicable (font colour) would lift the interface and offer good feedback. Have you considered using the material design icon set at https://design.google.com/icons/?

[javierpaniza]

Why not to use a font for icons, like this one?: https://materialdesignicons.com/

In this way, you can change the color and size of the icons using CSS, so it's easy to adapt to the application look & feel.

[Reinmar]

The discussion about SVG vs fonts was held in https://github.com/ckeditor/ckeditor5-design/issues/109.

[Reinmar]

Cleaning up old discussions. See https://github.com/ckeditor/ckeditor5-design/issues/186.