[SOLVED] Qt Creator 5.2 - Changing Background Color of Left Hand Pane

[ray4qt]

This can be done using a style sheet, but with side effects.

The body of the sidebar, which is the area dcbdbis would like to change is a QTreeView widget, which is also used in several places in the designer, the help window, various locations in the options dialog and also sets the text color in the To-Do Entries window at the bottom, if it is enabled. And perhaps elsewhere not listed here nor known to mere mortals.

If for example the style sheet sets a really dark color as the background in the sidebar it will, of course, be really dark in those other places.

I feel your pain Dave so here is a simple style sheet which uses a lightish-grey (like my hair) to take the glare off the area in question without, hopefully, making a mess elsewhere:

@
QMainWindow,
QAbstractItemView
{
color: #EAEAEA;
background: #5C5C5C;
}

QComboBox
{
color: #FFFFFF;
background-color: #5C5C5C;
min-height: 15px;
min-width: 60px;
max-width: 360px;
padding-left: 5px;
padding-right: 15px;
border-style: solid;
}

QComboBox QAbstractItemView
{
color: #000000;
background-color: #CFCFCF;
selection-background-color: #1D1D1D;
border-style: solid;
}

QHeaderView::section
{
color: white;
background-color: #7F7F7F;
padding-left: 4px;
border: 1px solid #6c6c6c;
}

QTreeView
{
color: #000000;
background-color: #B6B6B6;
alternate-background-color: #A5A5A5;
selection-color: #000000;
selection-background-color: #7FB3E6;
}

QTreeView::branch:item
{
color: #714DFF;
}

QListView
{
color: #000000;
background-color: #D7D7D7;
}
@

Copy this into a text editor, say Notepad, and save it as sample.css or under another name if you prefer, but the extension must be css.

From this point on I'm talking Windows 8, so appropriate adjustments need to be made to suit other operating systems. The 'sample.css' file can be placed in any suitable location, perhaps with qtcreator.exe, but my preference would be to put it somewhere in Documents so it will not get lost when upgrading Qt.

Then modify your desktop shortcut to Qt Creator to point to the place chosen for the file, by adding to the end of the 'Target':

         -stylesheet your\path\to\sample.css

Here's how mine looks (all on one line in my shortcut):

C:\Qt64\qt-creator-3.0.0-x64\bin\qtcreator.exe -stylesheet D:\Documents\Qt\Customise\sample.css

Give it a try, and let me know if you would like the color adjusted if you would rather not do that yourself.

I really should do an item for the wiki on customising Qt Creator using style sheets, if there is any interest out there.

One tip, when playing around with style sheets and Qt Creator be prepared for numerous restarts!

Regards

Ray

[SGaist]

Hi and welcome to devnet !

Nice one ! I completely forgot the stylesheet parameter.

IIRC there might a Wiki page with style sheet like this one, could be a interesting addition

[dcbdbis]

We will certainly find out! I will install these changes tomorrow, Monday.

I really, really appreciate the posts with a solution!!!

Sincerely,

Dave

[dcbdbis]

OK...I couldn't wait. I've had a break enough to do as mentioned. I did this on Arch Linux x86_64.....

And it worked perfectly!

The color scheme is excellent, and I don't forsee any more white light induced headaches.

My sincerest thanks to ray4qt!!!

Sincerely and respectfully,

Dave

[ray4qt]

A small tweak to take the glare off the 'Help' background:

@
QWebView
{
background-color: #D7D7D7;
}
@

Add this to your style sheet - adjust the color to suit. As there is more text in the help area I made the background a little lighter than the sidebar, for readability. Matter of individual preference.

[Slion]

Most of the UI is looking good with this trick but somehow specifying any style sheet as command line parameter, even an empty one, messes with the background color of the code editor and put it to white.

So right now I can get the code editor in dark theme using the Tools -> Options or the rest of the UI using those style sheets but not both.

What's the CSS element for the code editor? Maybe I could try setting the background color there?

[Slion]

There is some interesting stuff here:
http://qt-project.org/wiki/QtCreatorStyling

But even those styles yield similar results on Qt 5.3 with QtCreator 3.1.1.
Code editor color remains white. I'm still looking for the Selector Type of that code editor.

[ray4qt]

It's a QPlainTextEdit.

QPlainTextEdit
{
background: #000000;
}

#000000 can also be expressed simply as black.

Or whatever color you want. Sorry to spell it out Slion, you obviously know how to do this, but others may not.

Remember, this will change all the QPlainTextEdit elements, not just the code editor.

If you want dialogs to have a white background you can do this:

QDialog QPlainTextEdit
{
color: black;
background: white;
}

This makes a couple of areas in the Options dialog hard to read, for example, Options->C++->Code Style, so these can be corrected like this:

QDialog[windowTitle="Options"] QPlainTextEdit
{
background: black;
}

Dialogs can be customised as a group. Or they can be done individually using their 'windowTitle' property. There may be a better way, but this works for me.

Hope this helps.

[Slion]

Thanks for helping out with that.
Could we not use QObject name in Selector Type?
How easy, is it to find out QObject names from QtCreator source code?
I did have a look at it but it's pretty thick :)

QPlainTextEdit did it for me but then I had a weird issue with text editor font changing when I start a debug session so I had to specify text editor font in style sheet too:

@QPlainTextEdit {
background: #1E1E1E;
font-family: "Courier";
font-size: 10pt;
}@

Now I still have an issue with the background of the line number column resetting to white when starting a debug session.
Any idea which Selector I should use for the line number column?

I would also need a Selector for Application Output and Compile Output window for which I would like to change the color font color or set a different background color.

[ray4qt]

I also had a look at the source code but after a short while my brain hurt, which says more about me than it does the source. In any case, I wonder how well objects are named for our purpose. I've seen a "widget" and a "widget_2" in there. How many "button_1" objects are there?

Thanks for the solution to the text editor font issue. There is a bug report on this which I have commented and voted on. If you could do the same and include your solution it would help the original poster and maybe get some attention from the developers.

Here is the link :https://bugreports.qt-project.org/browse/QTCREATORBUG-12271

I see what you mean with the line numbers. Interestingly, my problem is with the numbers themselves, not the background. I have the background set to a dark color but if I reset it to a light one then go into debug mode it sets it back to the original dark color on the screen but not in "Options". Go figure.

In any case, your solution is a big step forward, but I think fixing the bug is what needs to happen here.

Regarding Application Output and Compile Output, try these (Issues is a bonus, optional of course):

With Application Output, this only applies when an application is run or being debugged. Unable to change the text color, at least this way. The method used below to color Issues and Compile Output doesn't work for Application Output.

@QTabWidget QPlainTextEdit
{
background: #E3E3E3;
}

QWidget[windowTitle="Issues"],
QWidget[windowTitle="Compile Output"]
{
color: black;
background: #E3E3E3;
}@

With Compile Output only some text can be changed, it seems.

If you want to do Search Results:

This one needs to be treated differently. First do the entire background

@QObject[windowTitle="Search Results"] QWidget
{
color: black; /so the labels can be seen/
background: #E3E3E3;
}@

Then restore the standard appearance to these

@QObject[windowTitle="Search Results"] QLineEdit,
QObject[windowTitle="Search Results"] QComboBox
{
background: none;
}@

How much interest is there in customising Qt Creator, are many people doing this, or would like to? I would welcome any comments on this.

Thanks.

[Slion]

Thanks ray4qt for helping out.

I've pretty much given up on stylesheet for now as there are too many bugs with the code editor. QML code font color also get messed after debug.

[qtenvy]

Let's not give up on this discussion.

I fell in love with qtCreator a couple of years ago. And to respond to ray4qt, there has always been interest, on my part, in customizing qtCreator. And like everyone on this thread has noticed, there is not much information out there.

I have scoured the web for quite a while now and have come up with a stylesheet that I like. dcbdbis (Dave), you may want to give it try. I am curious if you like. Unfortunately, there are a couple of things about my stylesheet that I have not yet addressed. 1) In debug mode, the font for the value column in the Locals and Expressions window gets changed to red. Red is hard on the eyes with a dark background. Not sure how that got changed. Not sure how to fix. 2) The tabs in dialog windows are a bit cobbled together (not as distinct). Again, not sure what caused that.

Note that this stylesheet does not mess with the settings I chose for my text editor colors (which is the Inkpot scheme).

I am using qtCreator 3.0.1 on Linux Mint.

Anway, here is my stylesheet. Hope it helps someone.

@QMainWindow,
QAbstractItemView,
QTreeView::branch,
QTabBar::tab{
color: #EAEAEA;
background: #5e5e57;
font-size: 9pt;
}

/* This attribute change the listed text in the help menu */
QListView {
color: #FFF8DC;
}

QAbstractItemView::item:selected {
color: #EAEAEA;
background-color: #151515;
}

QScrollBar {
border: none;
background: #333333;
height: 6px;
width: 6px;
margin: 0px;
}

QScrollBar::handle{
background: #494949;
min-width: 10px;
min-height: 10px;
}

QScrollBar::add-line, QScrollBar::sub-line {
background: none;
border: none;
}

QScrollBar::add-page, QScrollBar::sub-page {
background: none;
}

/* Add the horizontal arrow keys to the dir/file list (left pane) /
QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:adjoins-item:has-children {
border-image: none;
image: url(:/qmldesigner/images/triangle_horz.png);
/
margin: 6px;
height: 6px;
width: 6px;
border-radius: 3px;
*/
}

/* Add the vertical arrow keys to the dir/file list (left pane) */
QTreeView::branch:open:has-children:!has-children,
QTreeView::branch:open:adjoins-item:has-children {
border-image: none;
image: url(:/qmldesigner/images/triangle_vert.png);
}

QTabBar::tab:selected {
font: bold;
border-color: #9B9B9B;
border-bottom-color: #C2C7CB;
}

QTabBar::tab:!selected {
margin-top: 2px;
}

QHeaderView::section {
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
stop:0 #616161, stop: 0.5 #505050,
stop: 0.6 #434343, stop:1 #656565);
color: white;
padding-left: 4px;
border: 1px solid #6c6c6c;
}

QToolBar {
border-style: solid;
border-style: outset;
color: #EAEAEA;
background: #333333;
font-size: 9pt;
}@

Brock

[ray4qt]

Thanks for posting! Gave your stylesheet a try and it looks good.

Hope I'm wrong, but I don't think you will be able to change the red font in Debug mode as I suspect it is hard coded. Little things like this mean we are not able to get everything exactly as we would like, which is frustrating.

Regarding the tabs, you could try setting a minimum width property:

@QTabBar::tab
{
min-width: 125px;
}@

Adjust to suit, of course.

This looks okay in Design mode, but is too wide for dialogs.
They can have their own width setting:

@QDialog QTabBar::tab
{
min-width: 75px;
}@

Do you use Design mode? I see a couple of issues there with unreadable fonts in the Object Inspector and Property Editor - on my Windows 8.1 system.

Try these (again, adjust to suit) if you want a fix:

@QObject[windowTitle="Object Inspector"] QTreeView
{
color: #EAEAEA;
alternate-background-color: black;
}@

@QObject[windowTitle="Property Editor"] QTreeView
{
color: black;
}@

Like Slion, I've given up on stylesheets, at least for now, because of the editor font issue. I notice this is not a problem on Qt Creator version 3.0.0, which I have on my laptop, so perhaps you are not affected by it. If you update to a later version I think you will be. Well, at present I am reluctant to post anything that doesn't work correctly.

Once again Brock, thanks for posting. Nearly 3000 views makes me think there is interest out there, even if you are the only one who has bothered to post.

Regards, Ray.

[qtenvy]

Thanks for the tips Ray. I will give them a try today.

No, I don't usually use Design mode.

[mrtypography]

qtenvy or ray4qt: Any tips on how to most easily load a custom Qt Creator stylesheet on OS X?

[ray4qt]

The principle will be the same regardless of the operating system being used.
You just need to add a parameter to the command that launches Qt Creator.

I think it will look like this under a Unix-like o/s (path/to/qtcreator will already be there):

path/to/qtcreator -stylesheet path/to/your/stylesheet.css

I'm a Windows guy so I was hoping someone who knows Macs would answer. As they haven't perhaps this will help.

[mrtypography]

Figured this out with the help of someone on IRC.

In Terminal.app or iTerm.app:

@~/Qt/Qt\ Creator.app/Contents/MacOS/Qt\ Creator -stylesheet ~/.config/qtcreator_custom.css@

Notes:

• The first part of the command is necessary (~/Qt/Qt\ Creator.app/Contents/MacOS/Qt\ Creator)
• The second part of the command can point anywhere you have a .css file with custom QSS styling for Qt Creator. I chose ~/.config/ because it persists Qt uninstalls, reinstalls, upgrades.

[idlefrog]

For Qt Creator 5.0:

Tools->Options->Environment->Interface
On the 'Interface' tab select 'Theme:' and then select 'dark'.

[oulav83]

Thank you very much @idlefrog !!

[osirisgothra]

The problem? PLUGIN writers are not respecting/inheriting QPalette properly, and are using hard coded defaults and saying "ah good enough". It seriously sucks having to forfiet the entire dark mode just because state charts are white--but i couldnt stand the constant going back/forth from dark to white. So in essence, for me, dark mode isn't useful.

Yes there is dark mode, no plugin and qch help makers are ignoring the palette and giving us no possible way to customize it.