好工具推荐系列：用好CSS/QSS可视化工具，实现Qt控件美化

本文链接：https://blog.csdn.net/libaineu2004/article/details/19621831

一、CSS概念

级联样式表 (CSS) 包含应用于网页中的元素的样式规则。CSS 样式定义元素的显示方式以及元素在页中的放置位置。可以创建一个通用规则，只要 Web 浏览器遇到一个元素实例，或遇到一个分配给某个特定样式类的元素，该规则就立刻应用属性，而不是将属性逐个分配给页中的每个元素。CSS 样式可以通过内联方式放置在单个 HTML 元素内，也可以在网页 head 部分的 style 块内加以分组，或从单独的样式表中导入。如果样式是在单独的样式表中创建的，则可以将多个网页链接到该样式表，从而为整个网站提供一个通用的外观。如果使用 CSS 设置 Web 控件的样式，则应使用 CssClass 属性来定义要与控件或控件元素关联的 CSS 类名，然后在样式表中为这些控件或控件元素指定样式时引用该类名。

二、Qt的CSS/QSS帮助文档

打开Qt Assistant工具，在索引页面查找关键字：

1、“Qt Style Sheets Reference”查看Qt样式表的用法

2、“Qt Style Sheets Examples” 查看Qt样式表的实例

3、“The Style Sheet Syntax” 查看Qt样式表语法

三、QSS工具

1、QssStylesheetEditor

Editor for qt stylesheet (qss). Real-time preview, and user can define varibles in qss.该软件是使用PyQt5实现的。

Qss代码高亮，代码折叠
Qss代码自动提示，自动补全
实时预览 Qss 样式效果
可以预览几乎所有的 qtwidget 控件效果
支持在 Qss 中自定义变量
自定义变量可以在颜色对话框中拾取变量的颜色
支持相对路径引用图片，以及引用资源文件中的图片
支持切换不同的系统 theme，如 xp 主题，vista 主题等(不同 theme 下 qss 效果会略有差异)
能够在 windows，linux，unix 上运行
支持多国语言（中文，英文）

GitHub - hustlei/QssStylesheetEditor: Editor for qt stylesheet (qss). Real-time preview, and user can define varibles in qss.

Releases · hustlei/QssStylesheetEditor · GitHub

2、FdogQtStyleSheet

https://github.com/HuaGouFdog/FdogQtStyleSheethttps://github.com/HuaGouFdog/FdogQtStyleSheethttps://github.com/HuaGouFdog/FdogQtStyleSheethttps://github.com/HuaGouFdog/FdogQtStyleSheethttps://github.com/HuaGouFdog/FdogQtStyleSheet

GitHub - HuaGouFdog/Fdog-Kit: Qt工具集合：无边框窗口模板，zookeeper可视化操作工具，thrift接口调用工具（支持数据预制，压测，解析pacp文件），ssh终端工具（基本命令可用），数据库工具（查询表数据），qss工具，其他工具集合等）

3、qsseditor

QssEditor is a cross-platform UI application to edit and preview Qt style sheets (QSS).

GitHub - HappySeaFox/qsseditor: 🎨 Cross-platform application to edit and preview Qt style sheets (QSS).

QScintilla parts are under GNU GPL v3

4、QDarkStyleSheet

A dark style sheet for QtWidgets application

GitHub - ColinDuquesnoy/QDarkStyleSheet: A dark style sheet for QtWidgets application

5、QT Style Sheets templates

GitHub - GTRONICK/QSS: QT Style Sheets templates

6、QSvgStyle

QSvgStyle is a themeable SVG style for Qt5 applications

GitHub - DexterMagnific/QSvgStyle: QSvgStyle is a themeable SVG style for Qt5 applications

7、ezEngine

An open source game engine in active development

GitHub - ezEngine/ezEngine: An open source C++ game engine.

8、极光远见

发布十几套Qt精美皮肤（Qt使用QSS进行界面美化）

发布十几套Qt精美皮肤（Qt使用QSS进行界面美化）_qt 皮肤-CSDN博客

9、qt-material

Qt-Material — Qt Material documentation

GitHub - UN-GCPDS/qt-material: Material inspired stylesheet for PySide2, PySide6, PyQt5 and PyQt6

10、qt-material-widgets

GitHub - laserpants/qt-material-widgets: :art: Qt widgets-based implementation of the Material Design specification.

11、PyQtDarkTheme

GitHub - 5yutan5/PyQtDarkTheme: A flat dark theme for PySide and PyQt.

12、Modern_GUI_PyDracula_PySide6_or_PyQt6

GitHub - Wanderson-Magalhaes/Modern_GUI_PyDracula_PySide6_or_PyQt6

13、creeper-qt

GitHub - creeper5820/creeper-qt

14、ElaWidgetTools

GitHub - Liniyous/ElaWidgetTools: Fluent-UI For QT-Widget

15、qfluentwidgets

QFluentWidgets

GitHub - zhiyiYo/PyQt-Fluent-Widgets: A fluent design widgets library based on C++ Qt/PyQt/PySide. Make Qt Great Again.

QFluentWidgets: 基于 C++ Qt 的 Fluent Design 组件库 - 之一Yo - 博客园

商业软件

16、Here is a small collection of Qt stylesheets (QSS) or QStyle ideas

GitHub - xakod/qt-stylesheets: Qt stylesheets (QSS) or QStyle ideas

x、Other

https://github.com/chenwen1126/Qsshttps://github.com/chenwen1126/Qsshttps://github.com/chenwen1126/Qsshttps://github.com/chenwen1126/Qsshttps://github.com/chenwen1126/Qss

加载qss示例

qDebug() << QStyleFactory::keys(); //"windowsvista", "Windows", "Fusion"
QApplication::setStyle(QStyleFactory::create("windowsvista"));
Q_INIT_RESOURCE(qss);
QFile qss(":/qss/lightblue.css");
if (qss.open(QFile::ReadOnly))
{
    QString paletteColor = qss.mid(20, 7);
    qApp->setPalette(QPalette(paletteColor));
    qApp->setStyleSheet(qss.readAll());
}