Qt - Create a simple theming system (changing colors of GUI) - c++

I want to be able to create an simple internal theming system for my program (by internal I mean I don't need to be able to load custom themes from user system... all themes will be embedded inside the program itself.)
I can think of some ways:
simply put all color inside the main stylesheet of the program, every time the colors need to change, retrieve main stylesheet, parse and change the colors, and then reapply it again (or have multiple stylesheet with different colors, and apply them when its needed).
Create a top widget that only hold the colors for each widget, and then a child widget that hold other stylesheet for other styling, and all the UI as child of this widget... in this way we need to only change the first stylesheet.
... (not sure about other ways, but I'm sure there is some... maybe using QStyle or something..?)
I'm not sure what is the best way to achieve what I'm after, that will be best at both performance and the code itself...
I know the first way will be heavy in performance side, to each time change the whole stylesheet and rerender the whole program. (I think at least)
the second option though, I'm not sure how it will work, I mean its any better then the first one?!
or there is any other better methods..?

you should create a .qss file and add it in your .qrc like you add your icons.
then write all your stylesheet there. you can have multiple Style.qss files and these files are your themes and whenever you change it your theme will change.
add your Style.qss File in your Resources(.qrc)
write these codes in main.cpp
Load the application style
QFile styleFile(":/style.qss");
styleFile.open(QFile::ReadOnly);
Apply the loaded stylesheet
QString style(styleFile.readAll());
a.setStyleSheet(style);
For more information :
https://github.com/GTRONICK/QSS
https://github.com/ColinDuquesnoy/QDarkStyleSheet

Related

Qt: How can I use my widgets created with code in the *.ui file

I have a project in Qt made with the QWizard and QWizardPage classes. There are two ways to create a widget i.e: a Label:
One is going to the *.ui file and search the element and put it where you want (visual way). Then you can access it on your code with ui->nameOfLabel.
The other one is going to your code and creating it like QLabel codedLabel;
Actually I'm using the second way (it's easier for me to create, show and use) but my question is: Is there any way that I can see my label codedLabel on the *.ui file?
I would like to move it to a space in the screen and in that case, it would be much easier for me to be able to do it through the visual way (but having the label created in the code instead of the ui).
Thank you so much.
Widgets created at runtime from your source code and being added to a widget as child CANNOT be seen in Qt Designer when you edit the .ui file of the widget they will be added to.
However, there could be an alternative (reading what you are trying to achieve: having some child widgets being present or not based on the context):
Create the widget from the .ui within Qt Designer and hide it (QWidget::hide()) or even remove it (QLayout::removeWidget()) programmatically if not needed at runtime.
If the real reason why you want to see it is because you want to "move it to a space in the screen and in that case, it would be much easier for me to be able to do it through the visual way". Then I recommend that you simply create an empty QWidget (or QLayout) in Qt Designer (graphically: easy to place where you want to) and later (programmatically) add your QLabel to it (rather than adding it to the main top-level widget): then, it goes in the place you determined from Qt Designer tool.
You should not need any complex code to programmatically display your QLabel in a specific place, just choose the right parent to have it be displayed in the right place!

Should I really use a single qss file for my application instead of having one for each (UI) class?

Some posts (namely, these two: Set CSS in QPushButton's subclass's constructor and Does the use of styleSheets in a dynamic manner add a lot of computation) suggest that I should use a single qss file for my Qt application.
However, imagine I have a QLabel subclass whose purpose is (using stylesheets) to provide a particular look/behavior (say BlinkingLabel, however horrendous it would look). In that case, doesn't it make sense to prepare a separate stylesheet and load it in the class constructor? Wouldn't using a global file take away a very useful aspect of using OOP for UI components? Because if I do so, I can no longer just take the class and put it in another project without worrying about anything, because it can take care of itself; I have to remember to copy the relevant stylesheet entries.
Common answer: it depends...
From my point of view, if you will split your qss to several files and implement a good logic to load them correctly - it will be better solution in compare with single file. As extra option, you still may have a global qss with basic styles.
First reason, why splitting is better: your qss will be more readable and it will me more easy to provide a support.
Second: smaller qss files, applied on different widgets works a bit faster.
P.S. If you need to reload qss on a widget (as described under your links), you need to call polish() + unpolish() instead of resetting qss text.
P.P.S. don't use stylsheets for animations. There is a QPropertyAnimation class. You can use it to animate color, font, etc. on your widget.

Determining Qt stylesheet options programmatically?

Is it possible to look up stylesheet values at runtime in Qt?
I'm working on a custom button derived from QPushButton that has some stylesheet properties set. I'd like to be able to look up some stylesheet settings like border width, margin, padding-top, padding-left, padding-right, etc. Is this at all possible to do without calling widget->getStyleSheet() and parsing out the values myself?
Internally, when you call QApplication::setStyleSheet() Qt creates a QStyle sub-class called QStyleSheetStyle.
That means you can query style sheet information via the normal QStyle methods. Just remember to fill in the options and widget parameters properly to ensure you get the right values from the style sheet.
Don't think so, you might be able to find something by stepping through the drawing code. But the parsing and the application of stylesheets is pretty optimised and uses a lot of preprocessing. I don't even think that you can get to the stylesheet of a widget if it was actually set in a parent.

How can I visually design a component in C++ Builder?

I have been away from C++ for a couple of years now doing AS3/Flex work. I have gotten used to being able to create a component and place it in design mode with very little fuss and I am struggling to get my head around the C++ Builder way of doing the same thing.
I have written many components for C++ Builder in the past, but none of them have been visual. What I would like to do now is create a component for customer search and another for order processing because I want to be able to create a new instance of these on the fly. What I don't want to do is have to place each of the components like the dbgrid and search fields manually in code. I would like to do this (as well as set their properties) in design mode.
How do I go about this? I have browsed the source for other Delphi components and I notice they have dfm files which seems to be what I need. How do I do this in C++ Builder? The only option I see is to add a new form if I want a dfm, but this isn't what I want as my components will be based on TPanel.
Is there a way to do this or do I have to resort to doing it all in code with no visual reference?
Pursuing the DFM idea I did a test this morning where I created a component based on TPanel and added a new form to it which I create and parent in the constructor of the component. In design mode I set the form border to none and placed a grid on it. This all looks OK until I place the component in my application, at that point it looks like a panel with a standard looking form in it and the grid is missing. If I run the app the panel shows as expected, borderless and with a grid. The DFM appears to be ignored in design mode for some reason.
If you know a better way to do this than using components then please give me some pointers.
Any help and advice will be appreciated beyond words
You might want to have a look at frames (look for "Frame objects"). They are "subforms" you can design visually and then place on forms.
Just as an FYI item, you can also drop the panel on a form, put any other controls on it, position them, set captions, etc..
Now, click the panel to select it, and use Component->Create Component Template from the IDE's main menu. This creates a unit you can install as a component which will add the panel and it's sub-controls (as a single component) to the IDE's component palette.
Of course, you can then modify the source for that new component like any other component source.

Qt: How to show icon when item selected

I have a QListWidget containing items which have icons and when the items are selected the icon is just highlighted out. Is there a way to prevent this? I can't use stylesheets because it's for an embedded application and including them takes up too much space.
thanks
I suppose when you say "Highlithed out", you mean that the icon colors don't render well when the line is selected, and therefore, you can't see properly the icon...
Maybe you could consider using a different icon when the item is selected. It's possible to do so by specifing a mode to your icon.
Example :
QIcon MyIcon(":/images/foo");
MyIcon.addFile(":/images/bar", QSize(...), QIcon::Selected);
You can easily make a try in QtDesigner and see the results...
Hope it helps a bit !
Certainly, drawing on a black-and-white screen presents its challenges.
It sounds like you just want to change the appearance of the interface, not any functionality. If this is the case, a QItemDelegate-derived class (or QStyledItemDelegate) is almost certainly what you want. In particular, the drawDecoration function looks like it is used to draw an icon, and the style options should include whether it is selected. The simplest fix would be to override that function, set the selected flag in the options to false, then pass it up to the parent's function.