Revision history [back]

In the last months, I have repeatedly read the respective passages of the Sailfish Silica Reference as well as the Common Pitfalls Page. Looking at various apps, it does not always seem to be clear which color should be used for which elements.

I think I have understood now that the Theme colors should be used like this (please correct me if I am wrong):

• interactive elements: Theme.primaryColor
• active/selected elements: Theme.highlightColor or Theme.secondaryHighlightColor, depending on priority
• static elements: Theme.highlightColor or Theme.secondaryHighlightColor, depending on priority

But I am still not 100% sure, because the Sailfish website is not 100% clear about labels, e.g.

Theme.primaryColor - the default Label color

vs.

[...] descriptive items like static labels, page and section headers are painted with the ambience highlight color

So well... primary color? Or highlight color?

Anyway, I think the color names in the theme should be self-explaining (semantic) for a better understanding and thus for a consistent user experience... so what about

• Theme.color.interactive + interactiveSecondary
• Theme.color.active + activeSecondary
• Theme.color.static + staticSecondary

It would be a lot easier to understand for developers, and - should there be need for a fifth color in the future, e.g. for better differentiation of static and active elements - apps developed today would be prepared for the themes of tomorrow.

In the last months, I have repeatedly read the respective passages of the Sailfish Silica Reference as well as the Common Pitfalls Page. Looking at various apps, it does not always seem to be clear which color should be used for which elements.

I think I have understood now that the Theme colors should be used like this (please correct me if I am wrong):

• interactive elements: Theme.primaryColor
• active/selected elements: Theme.highlightColor or Theme.secondaryHighlightColor, depending on priority
• static elements: Theme.highlightColor or Theme.secondaryHighlightColor, depending on priority

But I am still not 100% sure, because the Sailfish website is not 100% clear about labels, e.g.

Theme.primaryColor - the default Label color

vs.

[...] descriptive items like static labels, page and section headers are painted with the ambience highlight color

So well... primary color? Or highlight color?color? And is there a recommendation if an element is interactive and active/selected?

Anyway, I think the color names in the theme should be self-explaining (semantic) for a better understanding and thus for a consistent user experience... so what about

• Theme.color.interactive + interactiveSecondary
• Theme.color.active + activeSecondary
• Theme.color.static + staticSecondary

It would be a lot easier to understand for developers, and - should there be need for a fifth color in the future, e.g. for better differentiation of static and active elements - apps developed today would be prepared for the themes of tomorrow.

In the last months, I have repeatedly read the respective passages of the Sailfish Silica Reference as well as the Common Pitfalls Page. Looking at various apps, it does not always seem to be clear which color should be used for which elements.

1. Improve documentation on which color should be used for which kind of element

I think I have understood now that the Theme colors should be used like this (please correct me if I am wrong):

• interactive elements: Theme.primaryColor
• active/selected elements: Theme.highlightColor or Theme.secondaryHighlightColor, depending on priority
• static elements: Theme.highlightColor or Theme.secondaryHighlightColor, depending on priority

But I am still not 100% sure, because the Sailfish website is not 100% clear about labels, e.g.

Theme.primaryColor - the default Label color

vs.

[...] descriptive items like static labels, page and section headers are painted with the ambience highlight color

So well... primary color? Or highlight color? And is there a recommendation if an element is interactive and active/selected?

2. Improve theme color names to be more semantic

Anyway, I think the color names in the theme should be self-explaining (semantic) for a better understanding and thus for a consistent user experience... so what about

• Theme.color.interactive + interactiveSecondary
• Theme.color.active + activeSecondary
• Theme.color.static + staticSecondary

It would be a lot easier to understand for developers, and - should there be need for a fifth color in the future, e.g. for better differentiation of static and active elements - apps developed today would be prepared for the themes of tomorrow.

Obviously 2 would render 1 unnecessary, and be my preferred solution. Less reading and more developing for developers, more consistency for users. :)