Qt style sheet: switch theme

First of all, I recommend the software "qss designer" of this big brother: QT- Smart QSS designer

This tool can switch between different themes. This software is not open source but can implement the same switch theme function according to some methods.

For example, for a button, the following three colors are set in the usual state: ordinary color, pressed color, and mouse over color can have dynamic interactive effects:

The style of this button is set as follows:

QPushButton
{
	border-style: none;
	border: 0px;
	color: #FFFFFF;
	padding: 5px;	
	border-radius:5px;
	background: #00bcd4;
}

QPushButton:hover
{ 
	background: #24d4e0
}

QPushButton:pressed
{ 
	background: #0296ad;
}

It can be found that if you want to change its color, you only need to change the "background" property, other properties do not need to be changed, further adjustments:

QString style_main_color = "00bcd4";
QString style_hover_color = "24d4e0";
QString style_press_color = "0296ad";

QString btnStyle = QString("QPushButton{border-style: none;border: 0px;color: #FFFFFF;padding: 5px;border-radius:5px;background: #%1;}"
                           "QPushButton:hover{background: #%2;}"
                           "QPushButton:pressed{background: #%3;}").arg(style_hover_color).arg(style_hover_color).arg(style_press_color);

In this way, as long as you modify the values ​​of the 3 colors and set the style sheet each time, you can achieve the effect of switching themes.

The principle is like this, the specific operation is as follows:

According to the software "qss Designer" as a benchmark, it defines a theme that requires five colors to be set:

This is defined as:

QString style_main_color;//主颜色
QString style_hover_color;//鼠标滑过颜色(主要是按钮)
QString style_press_color;//鼠标按下颜色(主要是按钮)
QString style_item_select_color;//项目选中颜色(如QTreeView、QTableWidget等选中项目的颜色)
QString style_item_hover_color;//鼠标滑过(QTreeView、QTableWidget等)项目的颜色

1. Register a custom theme switching event:

extern int STYLE_CHANGE_EVENT;//事件id

class style_change_event : public QEvent
{
public:
    style_change_event();
    virtual ~style_change_event();
    enum mystyle
    {
        Turquoise,//蓝绿色
        Orange,//橙色
        Pink,//粉色
        Red,//红色
        Coffee,//咖啡色
        Blue_Grey,//蓝灰色
        Blue,//蓝色
        Green,//绿色
        Lavender,//紫色
        Arctic_Glacier,//北极冰川
        Custom//自定义
    };
    mystyle get_style()
    {
        return now_style;
    }

    void set_style(mystyle style)
    {
        now_style = style;
    }

    void set_color_list(QStringList list)
    {
        color_list = list;
    }

    QStringList get_color_list()
    {
        return color_list;
    }

private:
    mystyle now_style;
    QStringList color_list;
};
int STYLE_CHANGE_EVENT = QEvent::registerEventType();

style_change_event::style_change_event():
    QEvent (QEvent::Type(STYLE_CHANGE_EVENT))
{
}

style_change_event::~style_change_event()
{}

2. Generate an event in the right place:

    style_change_event * event = new style_change_event;
    event->set_style(style_change_event::Turquoise);//选择蓝绿色主题
    qApp->postEvent(this, event);

3. Handle the theme switching event in the event filter:

bool MainWindow::eventFilter(QObject *watched, QEvent *event)
{ 
    if(event->type() == STYLE_CHANGE_EVENT)//主题改变
    {
        style_change_event * e = dynamic_cast<style_change_event*>(event);
        if(e)
        {
            int type = e->get_style();
            switch (type)
            {
                case style_change_event::Turquoise : //蓝绿色
                {
                    style_main_color = "00beac";
                    style_hover_color = "20c9b3";
                    style_item_hover_color = "cafcef";
                    style_item_select_color = "9aefdb";
                    style_press_color = "01968c";
                }
                break;
                case style_change_event::Orange: //橙色
                {
                    style_main_color = "ff9800";
                    style_hover_color = "fcab28";
                    style_item_hover_color = "fcf0ca";
                    style_item_select_color = "fce3a2";
                    style_press_color = "d87802";
                }
                break;
                case style_change_event::Pink://粉红色
                {
                    style_main_color = "ec62a1";
                    style_hover_color = "f78fbd";
                    style_item_hover_color = "fcf1f4";
                    style_item_select_color = "fcf1f5";
                    style_press_color = "c44987";
                }
                break;//红色
                case style_change_event::Red:
                {
                    style_main_color = "f45e63";
                    style_hover_color = "fc8b8d";
                    style_item_hover_color = "fcf1f1";
                    style_item_select_color = "fcf1f1";
                    style_press_color = "cc454e";
                }
                break;
                case style_change_event::Coffee://咖啡色
                {
                    style_main_color = "8c6450";
                    style_hover_color = "967d6f";
                    style_item_hover_color = "c9c5c0";
                    style_item_select_color = "bcb7b3";
                    style_press_color = "634235";
                }
                break;
                case style_change_event::Blue_Grey://蓝灰色
                {
                    style_main_color = "507ea4";
                    style_hover_color = "7296af";
                    style_item_hover_color = "d8dfe2";
                    style_item_select_color = "ccd3d6";
                    style_press_color = "375a7c";
                }
                break;
                case style_change_event::Blue://蓝色
                {
                    style_main_color = "00bcd4";
                    style_hover_color = "24d4e0";
                    style_item_hover_color = "cafcf9";
                    style_item_select_color = "a2fcf9";
                    style_press_color = "0296ad";
                }
                break;
                case style_change_event::Green://绿色
                {
                    style_main_color = "79be3c";
                    style_hover_color = "97c961";
                    style_item_hover_color = "f8fcf1";
                    style_item_select_color = "ebefe4";
                    style_press_color = "5a9628";
                }
                break;
                case style_change_event::Lavender://淡紫色
                {
                    style_main_color = "7467b9";
                    style_hover_color = "988dc4";
                    style_item_hover_color = "efecf7";
                    style_item_select_color = "e2dfea";
                    style_press_color = "534a91";
                }
                break;
                case style_change_event::Arctic_Glacier://北极冰川
                {
                    style_main_color = "45b0c4";
                    style_hover_color = "6bc3ce";
                    style_item_hover_color = "f1fcfc";
                    style_item_select_color = "e9f4f4";
                    style_press_color = "30889b";
                }
                break;
                case style_change_event::Custom://自定义主题
                {
                    QStringList list = e->get_color_list();
                    style_main_color = list.at(0);
                    style_hover_color = list.at(1);
                    style_item_hover_color = list.at(2);
                    style_item_select_color = list.at(3);
                    style_press_color = list.at(4);
                }
                break;
            }
        }
    }
}

Once you have obtained 5 corresponding theme colors, you can set the style sheet. 

In addition to the fixed themes, there are also custom themes here. The custom themes will pop up a color selection window for users to choose colors:

    QColor c = colorDlg.currentColor();
    if(c.isValid())//QColor转QString
    {
        QString mRgbStr = QString::number(qRgb(c.red(),c.green(),c.blue()),16).right(6);//ARGB 第一个是透明度
    }

Store 5 selected colors into QStringList, and then generate event objects:

//设置自定义主题
void set_custom_theme(const QStringList & list)
{
    if(list.size() != 5)
        return;
    style_change_event * event = new style_change_event;
    event->set_style(style_change_event::Custom);
    event->set_color_list(list);
    qApp->postEvent(this, event);
}

It is not necessary to use a custom event method, but here you need to set a custom theme. The events generated by the custom theme and the events generated in other locations are unified in the event filter for processing. The effect of switching the theme can be viewed: https://blog.csdn.net/kenfan1647/article/details/109373355

Guess you like

Origin blog.csdn.net/kenfan1647/article/details/114391479