QSS-黑色皮肤

已于 2022-11-27 14:55:59 修改
阅读量397 收藏 2
点赞数
分类专栏： QT 文章标签： css css3 前端
于 2022-11-27 10:20:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GraceLand525/article/details/128061146
版权
本文介绍了如何利用QSS（Qt样式表）来创建一款精致的黑色皮肤，特别是在前端开发中，通过应用black.css文件，可以将应用界面转变为深色风格，提升用户的夜间使用体验。
摘要由CSDN通过智能技术生成

black.css

/* -----------------------------黑色-------------------------------
背景颜色：#4F4F4F
字体颜色：#FFFFFF
选中字体颜色：#00BB9E
禁用时字体颜色：#DCE1E6
控件颜色：#262829 #969696
禁用控件颜色： #404244
摁键颜色：#646464 #525252
边框颜色：#969696
选中边框颜色：#00BB9E
禁用边框颜色：#4F4F4F
------------------------------------------------------------ */
 
/* 图标下载网址 ------------------------------------------------------------
https://www.iconfont.cn/search/index?q=%E4%B8%89%E8%A7%92&page=1&tag=&searchType=icon&fromCollection=-1&fills=
-------------------------------------------------------------------*/
 
/* 官网教程 ------------------------------------------------------------
https://doc.qt.io/qt-5/stylesheet-examples.html
-------------------------------------------------------------------*/
 
QWidget {
    background-color: #4F4F4F;
    padding: 0px;
    color: #FFFFFF;
}
/* QMainWindow 主界面------------------------------------------------
QMenBar         菜单栏
QMenu           菜单
QToolBar        工具栏
Central Widget  中心部件
QDockWidget     停靠窗口
QStatusBar      状态栏
QSizeGrip       提示窗口拉伸标志
QMessageBox     无法用QSS设置
---------------------------------------------------------------------*/
/* QMenuBar ---------------------------------------------------------
菜单栏
---------------------------------------------------------------------*/
QMenuBar{
    background-color: #4F4F4F;
    color: #FFFFFF;
    margin: 0px;
    padding: 3px 10px;
    min-height: 20px;
    min-width: 20px;
}
QMenuBar::item{
    background-color: #4F4F4F;
    color: #FFFFFF;
    margin: 0px;
    padding: 3px 10px;
}
QMenuBar::item:selected{
    background-color: #262829;
    border: 1px solid #00BB9E;
}
QMenuBar::item:pressed{
    background-color: #969696;
    border: 1px solid #00BB9E;
}
QMenuBar,QMenuBar:disabled{
    color: #DCE1E6;
    background-color: #4F4F4F;
    border: 1px solid #4F4F4F;
    margin: 0px;
}
/* QMenu ------------------------------------------------------------
菜单
--------------------------------------------------------------------------- */
QMenu::item{
    padding: 3px 20px;
}
QMenu::indicator{
    width: 13px;
    height: 13px;
}
QMenu,QMenu:disabled{
    color: #DCE1E6;
    background-color: #4F4F4F;
    border: 1px solid #4F4F4F;
    margin: 0px;
}
QMenu::item:selected{
    background-color: #262829;
    border: 1px solid #00BB9E;
}
QMenu::item:pressed{
    background-color: #969696;
    border: 1px solid #00BB9E;
}
QMenu::separator{ /*分隔符*/
    height: 1px;
    background-color: #969696;
}
/* QToolBar ------------------------------------------------------------
工具栏
--------------------------------------------------------------------------- */
QToolBar, QToolBar:disabled{
    color: #DCE1E6;
    background-color: #4F4F4F;
    border: 0px solid #4F4F4F;
    border-width: 0px 0px 1px 0px;
    min-height: 30px;
}
QToolBar::separator{
    width: 1px;
    background-color: #969696;
}
QToolBar QToolButton{
    min-height: 30px;
    background-color: #4F4F4F;
    border: 0px solid #969696;
    border-width: 0px 0px 1px 0px;
    color: #FFFFFF;
    border-radius: 0px;
}
QToolBar QToolButton:hover{
    background-color: #262829;
    border: 1px solid #00BB9E;
}
QToolBar QToolButton:pressed{
    background-color: #969696;
    border: 1px solid #00BB9E;
}
 
/* QStatusBar ------------------------------------------------------------
状态栏
--------------------------------------------------------------------------- */
QStatusBar{
    color: red;
    background-color:#4F4F4F;
}
 
/* QSizeGrip ------------------------------------------------------------
提示窗口拉伸标志
--------------------------------------------------------------------------- */
QSizeGrip{
    min-height: 20px;
    min-width: 20px;
    border-image: url(:/icon/zoom_969696.png);
}
/* QDockWidget ------------------------------------------------------------
停靠窗口：在下面
--------------------------------------------------------------------------- */
 
/* Buttons 按钮------------------------------------------------------------
QPushButton             推动按钮
QToolButton             工具按钮
QRadioButton            单选按钮
QCheckBox               复选键
QCommandLinkButton	命令链接按钮
QDialogButtonBox              按钮盒
--------------------------------------------------------------------------*/
 
/* QPushButton ------------------------------------------------------------
摁键
https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qpushbutton
--------------------------------------------------------------------------- */
QPushButton {
    background: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464 , stop:1 #525252);
    border: 1px solid #969696;
    color: #FFFFFF;
    border-radius: 4px;
    padding: 1px;
    min-height: 25px;
    min-width: 35px;
}
QPushButton:hover {
    background-color: #00BB9E;
    border: 1px solid #00BB9E;
    color: #FFFFFF;
}
QPushButton:pressed {
    background-color: #969696;
    border: 1px solid #00BB9E;
    color: #FFFFFF;
}
QPushButton:focus {
  border: 1px solid #00BB9E;
}
QPushButton:!enabled {
    background-color: #4F4F4F;
    border: 1px solid #404244;
    border-style: inset;
}
 
/* QToolButton ------------------------------------------------------------
--------------------------------------------------------------------------- */
QToolButton {
    background: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464 , stop:1 #525252);
    border: 1px solid #969696;
    color: #FFFFFF;
    border-radius: 4px;
    padding: 3px;
    min-height: 20px;
    min-width: 30px;
}
QToolButton:hover {
    background-color: #00BB9E;
    border: 1px solid #00BB9E;
    color: #FFFFFF;
}
QToolButton:pressed {
    background-color: #969696;
    border: 1px solid #00BB9E;
    color: #FFFFFF;
}
QToolButton:focus {
  border: 1px solid #00BB9E;
}
QToolButton[popupMode="0"] {
    padding-right: 2px;
}
QToolButton[popupMode="1"] {
    padding-right: 2px;
}
QToolButton[popupMode="2"] {
    padding-right: 2px;
}
QToolButton::menu-button {
    padding: 2px;
    border-radius: 4px;
    border: 1px solid #969696;
    width: 12px;
    outline: none;
}
QToolButton:menu-button:hover {
    background-color: #00BB9E;
    border: 1px solid #969696;
    color: #FFFFFF;
}
QToolButton:menu-button:pressed {
    background-color: #969696;
    border: 1px solid #00BB9E;
    color: #FFFFFF;
}
QToolButton::menu-arrow {
    image: url(":/icon/down_triangle_4F4F4F.png");
    height: 8px;
    width: 8px;
}
QToolButton::menu-arrow:hover {
    image: url(":/icon/down_triangle_262829.png");
}
QToolButton::menu-arrow:pressed {
    image: url(":/icon/down_triangle_4F4F4F.png");
}
QToolButton:disabled {
    color: #DCE1E6;
    background-color: #4F4F4F;
    border: 1px solid #404244;
}
 
/* QRadioButton -----------------------------------------------------------
https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qradiobutton
--------------------------------------------------------------------------- */
QRadioButton {
    background-color: transparent;
    color: #FFFFFF;
    spacing: 4px;
    padding: 0px;
    border: none;
    outline: none;
    min-height: 20px;
    min-width: 50px;
}
QRadioButton:focus {
    border: none;
}
QRadioButton::indicator {
    border: none;
    outline: none;
    margin-left: 4px;
    height: 16px;
    width: 16px;
}
/*指示器常规图标*/
QRadioButton::indicator
{
    image: url(:/QSS/Resources/sls_radioButton_off.png);
}
/*指示器选中状态图标*/
QRadioButton::indicator:checked
{
    image: url(:/QSS/Resources/sls_radioButton_on.png);
}
/*指示器禁用状态图标*/
QRadioButton::indicator:!enabled
{
    image: url(:/QSS/Resources/sls_radioButton_off_Disable.png);
}
/*指示器选中时禁用状态图标*/
QRadioButton::indicator:checked:!enabled
{
    image: url(:/QSS/Resources/sls_radioButton_on_Disable.png);
}
 
QRadioButton:disabled{
    background-color: #4F4F4F;
    color: #DCE1E6;
}
 
/* QCheckBox --------------------------------------------------------------
QT网址
https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qcheckbox
图标网址
https://www.iconfont.cn/search/index?searchType=icon&q=%E5%8D%8A%E9%80%89&page=3&fromCollection=-1&fills=&tag=
--------------------------------------------------------------------------- */
QCheckBox {
    background-color: #4F4F4F;
    color: #FFFFFF;						/*字体颜色*/
    spacing: 4px;						/*文本与指示器的间隔*/
最低0.47元/天 解锁文章
GraceLand525
关注
专栏目录
QSS美化之黑色皮肤最全
11-30
QSS美化之黑色皮肤最全
收集的QSS的ui美化皮肤
02-22
收集的QSS的ui美化皮肤
QSS风格设计皮肤生成器
最新发布
02-22
QSS风格设计皮肤生成器
【QT学习】QSS样式表实现界面换肤（图文详解+源码）
孤生i的博客
09-20 6124
QSS样式表的简单介绍，以及使用QSS样式表实现界面换肤功能。
自定义qss样式表_qss_qss皮肤_QT_
10-03
标题"自定义qss样式表_qss_qss皮肤_QT_"表明我们将探讨如何使用QSS为QT应用创建自定义的皮肤。 首先，让我们了解QSS的基本结构。QSS由一系列规则组成，每个规则包含一个选择器（selector）和一个声明块...
QT实现QSS自动换肤
10-06
在QT中，QSS（Qt Style Sheets）类似于HTML中的CSS，允许开发者通过样式表来改变应用的外观和感觉，实现皮肤定制。本教程将深入探讨如何在QT应用中实现QSS的自动换肤功能。 一、QSS基础 1. **定义样式**: QSS使用...
QSS编辑器，同时含13套QSS皮肤
10-05
**QSS编辑器与QSS皮肤详解** QSS（Qt Style Sheets）是Qt框架提供的一种样式表语言，类似于HTML中的CSS，用于定制Qt应用程序的外观和感觉。它允许开发者使用类似CSS的语法来改变控件的颜色、字体、边框、布局和其他...
QSS样式表之PS黑色风格+白色风格+淡蓝色风格
05-06
标题提到的"QSS样式表之PS黑色风格+白色风格+淡蓝色风格"，是指利用QSS来模仿Photoshop（PS）软件的经典配色方案，为Qt应用程序创建出类似的专业界面。这三种风格分别代表了不同的色彩主题： 1. 黑色风格：通常给人...
自己使用的一套 QSS皮肤【不断更新】
qq_42964109的博客
07-05 353
皮肤设置
QT界面皮肤生成器Qss
06-24
该文件解压可直接执行，无源码信息，不需要进行编译。软件可对程序除标题外位置进行格式颜色的改动，导出文件格式为QSS
QSS蓝色皮肤
有志者事竟成
10-06 1560
QWidget#frmLogin,QWidget#frmPopup,QWidget#frmHostInfo,QWidget#frmLogout,QWidget#frmConfig,QWidget#frmData,QWidget#frmDefence,QWidget#frmHost,QWidget#frmMain,QWidget#frmPwd,QWidget#frmSelect,QWidget#fr
Qt 之 QSS（黑色炫酷）
热门推荐
青春不老，奋斗不止！
07-22 9万+
黑色炫酷 - 一款漂亮的QSS风格。
Qt皮肤生成器及uidemo源码（共26套），自带17套精美皮肤样式，其中包括黑色、灰色、扁平等。
m0_59957100的博客
07-05 893
Qt皮肤生成器及uidemo源码（共26套） 自带17套精美皮肤样式，其中包括黑色、灰色、扁平等。 皮肤生成器只需要简单几步就可以生成一套自定义的皮肤。 自带了26种uidemo，非常漂亮美观，涵盖了主界面布局、菜单切换等各种效果，总有一款适合你。 所有代码和demo注释都非常详细整齐整洁，非常适合初学者学习。 uidemo由简入难，可以一步步学习下去，从入门到熟悉。 uidemo从常规的客户端到app端到触摸端等都有，既有鼠标操作的也有触摸操作的。 皮肤中的qss样式表内容，覆盖了几乎所有的控件，非常
QSS黑色皮肤
有志者事竟成
10-06 732
QWidget#frmLogin,QWidget#frmPopup,QWidget#frmHostInfo,QWidget#frmLogout,QWidget#frmConfig,QWidget#frmData,QWidget#frmDefence,QWidget#frmHost,QWidget#frmMain,QWidget#frmPwd,QWidget#frmSelect,QWidget#fr
发布十几套Qt精美皮肤（Qt使用QSS进行界面美化）
weixin_41749063的博客
07-17 2万+
1.CSS样式表 QPushbutton按钮样式 样式1 QPushButton { min-height: 24px; min-width: 60px; border: 1px solid #BEBEBE; border-radius: 15px; padding: 2px 12px; background:#F5F5F5; } QPushButton:hover{ color:#FFFFFF; border:none; background-
qt中漂亮的几款 qss 样式
lvmengzou的专栏
10-17 1万+
Qt中漂亮的几款QSS /* === Shared === */ QStackedWidget, QLabel, QPushButton, QRadioButton, QCheckBox, QGroupBox, QStatusBar, QToolButton, QComboBox, QDialog { background-color: #222222; color: #BBB...
qss flex-direction
10-14
Q: qss flex-direction是用来做什么的？ A: qss flex-direction是用来设置flex容器内flex项目的排列方向的属性，可以设置为row（默认值，水平方向）、column（垂直方向）、row-reverse（水平方向，反向排列）和column-reverse（垂直方向，反向排列）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值