Color scheme: Where is the box?

Support
1

I’m not very lucky with the default color scheme - and the flat design, making it nearly impossible to locate most of the GUI-elements on the first sight. As nowadays most programs tend to use flat design with a greyish color scheme as well the situation is even worse …

Just have a look on the following example

What do you see? Komodo is on top of another application, which shows up in the upper part of the image. In the lower left part of the image a Komodo dialog box is open waiting for response.

It’s impossible to see where Komodo-application starts and that there is a dialog box in the lower corner - you have to search for it. All visual guides (borders, shadows … from non-flat design are gone).

For sure you can say: “use another color scheme” - but why has the default color scheme such a bad color choice with so low contrast? It might be trendy to have flat design - but in my eyes it’s an enormous step back in ergonomy: no visual guidelines, very low contrast … your eyes have actively to search for some visual anchors to get any orientation within this borderless flat design.

At least it would be helpful to have a comprehensive guide how to adapt the single GUI elements including the exact naming of the GUI elements - best would be a Default-Theme with more contrast and optical guidance …

At last a concrete question: is it possible to give the borders of the main window or of the dialog boxes a different color?

BTW: I already tweaked some things for better visibility (for example background color of active tab)

2

That’s not the default color scheme. The default color scheme is called “Default”.

It is, head over to Tools > Color Scheme Editor. Hit “New”, give it a name. Then on the left side hit the dropdown menu and select “Interface”. Now on the right side you can enter custom CSS rules, enter:

dialog, window.dialog
{
  border: 3px solid red !important;
}

Then hit Apply.

Alternatively you could go to Preferences > Appearance and hit the “Use native window borders” checkbox.

3

Sorry for blaming my scheme as default colour scheme.

4

What’s the best way to get all the names of the separate graphical elements? Is there a comprehensive list/example?

Can I set the color of the border of the main window?

Thanks in advance

5

The list on the left side on the color scheme editor should be fairly self-explanatory in most cases. Beyond that it’s a little bit of trial and error.

For the main window you can use the #komodo_main {} selector.

6

You can install DOM inspector and Element Inspector from Commando and then ctrl+click on an element you wish to know more about :slight_smile:

1 Like
7

It’s shift+right click.

8

My bad. Haven’t used it for a while :slight_smile:

9

DOM-Inspector: That’s exactly what I was looking for … :wink:
So I could have come on it myself :innocent:, unless I didn’t need it before

10

Yes - changing the things from the left side on the color scheme editor is pretty straightforward - but beyond this is not so clear without guidance. Will try DOM-Inspector to identify those things …