Giter Club home page Giter Club logo

qdarkstylesheet's Introduction

QDarkStyleSheet

Build Status Docs Status Latest PyPI version License: MIT License: CC BY 4.0 Conduct

The most complete dark/light style sheet for Qt applications (Qt4*, Qt5, PySide*, PySide2, PySide6, PyQt4*, PyQt5, PyQt6, QtPy, PyQtGraph, Qt.Py) for Python 2*/3 and C++.

Check out the complete documentation.

What is new?

Version 3

In the current version 3, qdarkstyle is now working as a theme framework, currently for dark/light themes, keeping styled widgets identical throughout theme colors.

The palette has been redefined and improved (UI/UX) to accept more colors and to be able to implement new themes thanks to the Spyder team collaboration.

The current stable version is using Python 3 (preferable 3.6+) and Qt5 (PyQt5 and PySide 2). Also in this version, an option for Qt6 (PyQt6, PySide6) was added.

The current version for use with Qt6 may still present instabilities.

[*] Python 2, as well as Qt4 (PyQt4 and PySide), will not be supported anymore. They are still there as it is, but no back compatibility, fixes, nor features will be implemented.

Version 2

We moved to QtPy to simplify your code in v2.8, thus this is a required dependency now. We included special patches in three main categories: operating system, Qt/binding version, application.

Included in that, lots of widgets' styles were included/fixed. A Qt application example (Python only) with almost all types of widgets and combinations were included to serve as a portfolio and a checklist for new styles.

We have added SCSS in v2.7, so the palette can be accessed programmatically. Also, many scripts were added to give freedom to developers who want to change the colors of our palette. All images and icons were revised, also creating SVG files for all of them.

In version 2.6 and later, a restructure stylesheet is provided. The palette has only 9 colors. Most widgets are revised and their styles were improved. We also provide a command line (script) to get info that could be used when opening issues. See the image below.

Version 1

First stable release of QDarkStyle.

Installation

Python

From PyPI: Get the latest stable version of qdarkstyle package using pip (preferable):

pip install qdarkstyle

From code: Download/clone the project, go to qdarkstyle folder then:

  • You can use the setup script and pip install.

    pip install .
  • Or, you can use the setup script with Python:

    python setup.py install

C++

Note: The ":" in the file name is necessary to define that file as a resource library. For more information see the discussion here.

Usage in applications

If your project already uses QtPy or you need to set it programmatically, it is far more simple

import sys
import qdarkstyle
import os

# set the environment variable to use a specific wrapper
# it can be set to pyqt, pyqt5, pyside or pyside2 (not implemented yet)
# you do not need to use QtPy to set this variable
os.environ['QT_API'] = 'pyqt5'

# import from QtPy instead of doing it directly
# note that QtPy always uses PyQt5 API
from qtpy import QtWidgets

# create the application and the main window
app = QtWidgets.QApplication(sys.argv)
window = QtWidgets.QMainWindow()

# setup stylesheet
# the default system in qdarkstyle uses qtpy environment variable
app.setStyleSheet(qdarkstyle.load_stylesheet())

# run
window.show()
app.exec_()

If you are using PyQt5 directly, see the complete example

import sys
import qdarkstyle
from PyQt5 import QtWidgets

# create the application and the main window
app = QtWidgets.QApplication(sys.argv)
window = QtWidgets.QMainWindow()

# setup stylesheet
app.setStyleSheet(qdarkstyle.load_stylesheet_pyqt5())
# or in new API
app.setStyleSheet(qdarkstyle.load_stylesheet(qt_api='pyqt5'))

# run
window.show()
app.exec_()

Here is an example using PySide2

import sys
import qdarkstyle
from PySide2 import QtWidgets

# create the application and the main window
app = QtWidgets.QApplication(sys.argv)
window = QtWidgets.QMainWindow()

# setup stylesheet
app.setStyleSheet(qdarkstyle.load_stylesheet_pyside2())
# or in new API
app.setStyleSheet(qdarkstyle.load_stylesheet(qt_api='pyside2'))

# run
window.show()
app.exec_()

If you use PyQtGraph, then the code is

import sys
import qdarkstyle
import os

# set the environment variable to use a specific wrapper
# it can be set to PyQt, PyQt5, PySide or PySide2 (not implemented yet)
os.environ['PYQTGRAPH_QT_LIB'] = 'PyQt5'

# import from pyqtgraph instead of doing it directly
# note that PyQtGraph always uses PyQt4 API
from pyqtgraph.Qt import QtGui

# create the application and the main window
app = QtGui.QApplication(sys.argv)
window = QtGui.QMainWindow()

# setup stylesheet
app.setStyleSheet(qdarkstyle.load_stylesheet(qt_api=os.environ['PYQTGRAPH_QT_LIB'])

# run
window.show()
app.exec_()

If you are using Qt.py, which is different from qtpy, you should install qtpy then set both to the same binding.

Usage of example/portfolio

There is an example included in the package. You only need to have PySide2 or PyQt5 is installed on your system.

# dark theme example
$ qdarkstyle.example --palette=dark

# light theme example
$ qdarkstyle.example --palette=light

# no theme/style sheet applied
$ qdarkstyle.example --palette=none

# check all options included
$ qdarkstyle.example --help

Changelog

Please, see CHANGES file.

License

This project is licensed under the MIT license. Images contained in this project is licensed under CC-BY license.

For more information see LICENSE file.

Authors

For more information see AUTHORS file.

Contributing

Most widgets have been styled. If you find a widget that has not been style, just open an issue on the issue tracker or, better, submit a pull request.

If you want to contribute, see CONTRIBUTING file.

qdarkstylesheet's People

Contributors

aaiyer avatar brucelee569 avatar ccordoba12 avatar colinduquesnoy avatar conradolandia avatar devinacker avatar dpizetta avatar fieldofview avatar goanpeca avatar hmaarrfk avatar isabela-pf avatar jihadist avatar juanis2112 avatar juliangilbey avatar kchnst avatar martindelille avatar mgrojo avatar mhendricks avatar mowoolli avatar mstuttgart avatar musicinmybrain avatar nikita-y avatar oscargus avatar pkev avatar polygamma avatar raincode avatar sawt00th avatar svenevs avatar tmosley-nc avatar vladimir-kraus avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

qdarkstylesheet's Issues

Stylesheet overriding custom background colors

I'm not sure if this is a fixable issue, but when I try to change the background color of a widget in PySide, this stylesheet overwrites the change.

Take, for example, the following code, which displays three differently colored squares in a green-background widget:

from PySide.QtCore import *
from PySide.QtGui import *

import qdarkstylesheet

class AllGreen(QWidget):
     def __init__(self):
         QWidget.__init__(self)
         layout = QVBoxLayout(self)

         self.w1 = QWidget(self)
         self.w1.setFixedSize(100, 100)
         self.w2 = QWidget(self)
         self.w2.setFixedSize(100, 100)
         self.w3 = QWidget(self)
         self.w3.setFixedSize(100, 100)

         palette = self.palette()
         role = self.backgroundRole()
         palette.setColor(role, QColor('green'))
         self.setPalette(palette)

         palette = self.w1.palette()
         role = self.w1.backgroundRole()
         palette.setColor(role, QColor('red'))
         self.w1.setPalette(palette)

         palette = self.w2.palette()
         role = self.w2.backgroundRole()
         palette.setColor(role, QColor('yellow'))
         self.w2.setPalette(palette)

         palette = self.w3.palette()
         role = self.w3.backgroundRole()
         palette.setColor(role, QColor('red'))
         self.w3.setPalette(palette)

         layout.addWidget(self.w1)
         layout.addWidget(self.w2)
         layout.addWidget(self.w3)

def testWidget():
     import sys
     a = QApplication(sys.argv)

     QObject.connect(a,SIGNAL("lastWindowClosed()"),a,SLOT("quit()"))

     w = AllGreen()
     w.w1.setAutoFillBackground(True)
     w.w2.setAutoFillBackground(True)
     w.w3.setAutoFillBackground(True)
     w.show()

     a.exec_()

if __name__ == "__main__":
     testWidget()

If we add the following line after creating the QApplication,

a.setStyleSheet(qdarkstyle.load_stylesheet())

Then the custom background colors are overwritten.

QTableView issues

  1. gridline-color is not set.
  2. There's a very strange behavior when resizing the control; at certain sizes the left column is being erased except it's first row, see the screenshot below:

image

It can be easily reproduced on Windows/Linux PySide/PyQt using the following code:

import sys
from PyQt4 import QtGui
import qdarkstyle


def main():
    num_rows, num_cols = 10, 10

    app = QtGui.QApplication(sys.argv)
    w = QtGui.QTableWidget()
    w.setStyleSheet(qdarkstyle.load_stylesheet(pyside=False))
    w.setRowCount(num_rows)
    w.setColumnCount(num_cols)
    w.setAlternatingRowColors(True)

    for i in xrange(num_rows):
        for j in xrange(num_cols):
            w.setItem(i, j, QtGui.QTableWidgetItem('test'))

    w.show()
    app.exec_()


if __name__ == '__main__':
    main()

Checkbox in table not styled

Hi,
the checkboxes in the table are not styled.
image
My setup (just in case it matters):
Windows 10
Python 2.7
PyQt4
QDarkStyle 2.3

change colors

Hi; thank you for the beautiful theme
is it possible to modify the colors ?

Tabbed dock widgets: strange line

I've jsut received an email from a user that found a defect in the style sheet:

Hello i have found a issue with the stylesheet
When 2 dockwidget are tabbed together, there is a strange line where the Tab button is.

I will try to reproduce this bug in the example and will post a screenshot here

QRadioButton indicator issue

I think it's an error:
QRadioButton::indicato::menu-arrowr:checked:pressed
Should be:
QRadioButton::indicator:checked:pressed

Cannot set QDialog border style in css

Hi,
This style sheet is awesome, but when I use it, I can't set qdialog border in your .css.
I created a dialog as my main window, and setWindowFlags(Qt::FramelessWindowHint) for it , then added

QDialog #MyDialog
{
    border: 1px solid white;
}

but it did't work. I don't know why.

QDockWidget on OS X

First of all I would like to thank you for this great stylesheet. QDockWidget's title bar isn't dark on OS X (see the screenshot). I'm not sure how to resolve this. If you don't have a Mac available then I'll be happy to assist in testing.

import sys
from PyQt4 import QtGui, QtCore
import qdarkstyle

def main():
    app = QtGui.QApplication(sys.argv)
    m = QtGui.QMainWindow()
    d = QtGui.QDockWidget('Lorem ipsum dolor sit amet, consectetur bla bla')
    m.addDockWidget(QtCore.Qt.LeftDockWidgetArea, d)
    d = QtGui.QDockWidget('testing')
    m.addDockWidget(QtCore.Qt.LeftDockWidgetArea, d)
    m.setStyleSheet(qdarkstyle.load_stylesheet(pyside=False))
    m.show()
    app.exec_()


if __name__ == '__main__':
    main()

dock

QDockWidget issue

When the docking widget's caption text is too long, the control buttons cover the text (see below - with and without the stylesheet)

image

image

Code to reproduce:

import sys
from PyQt4 import QtGui, QtCore
import qdarkstyle


def main():
    app = QtGui.QApplication(sys.argv)
    m = QtGui.QMainWindow()
    d = QtGui.QDockWidget('Lorem ipsum dolor sit amet, consectetur bla bla')
    m.addDockWidget(QtCore.Qt.LeftDockWidgetArea, d)
    m.setStyleSheet(qdarkstyle.load_stylesheet(pyside=False))
    m.show()
    app.exec_()


if __name__ == '__main__':
    main()

Incoherent focus colors

Focus png of radio and checkbox are too bright than the color used in the stylesheet for QWidget which is #78879b.

Tristate checkboxes not supported

A QCheckbox with Tristate set to True renders the same, whether its CheckState is Unchecked or PartiallyChecked. The two states should be visually distinguishable.

Tooltip of QcomboBox not shown correctly

Great work on the theme, I absolutely love it!

I found a minor issue, where the tooltip of a QcomboBox is not shown correctly. Instead of the text an empty box is shown (see screenshot). The tooltips of the other widgets work fine. Also this issue is consistent for all QcomboBoxes in my application. (I'm on Qt 5.8)

screen shot 2017-08-13 at 12 30 00

Add QTableView support

Add to style.qss:

QTableView QTableCornerButton::section {
    background-color: #3A3939;
    border: 1px solid #3A3939;
}

ImportError: No module named setuptools

There is no debian package for QDarkStyleSheet so I did a git clone. Then ran: $ python setup.py install.

Output is:

Traceback (most recent call last): File "setup.py", line 29, in <module> from setuptools import setup, find_packages ImportError: No module named setuptools

QTabBar issues

The styling of the selected item in a QTabBar is not consistent - it varies according to the QTabBar shape. The mouse-hover acts differently on North and East than on South and West.

In addition (a matter of taste) the selected item style is not distinctive enough.

See the example below to reproduce:

image

Code:

import sys
from PyQt4 import QtGui
import qdarkstyle


def main():
    app = QtGui.QApplication(sys.argv)
    w = QtGui.QWidget()
    w.setStyleSheet(qdarkstyle.load_stylesheet(pyside=False))
    l = QtGui.QGridLayout(w)

    for name, shape, pos in [('north', QtGui.QTabBar.RoundedNorth, (0, 1)),
                             ('east',  QtGui.QTabBar.RoundedEast,  (1, 2)),
                             ('south', QtGui.QTabBar.RoundedSouth, (2, 1)),
                             ('west',  QtGui.QTabBar.RoundedWest,  (1, 0))]:
        t = QtGui.QTabBar(w)
        t.setShape(shape)
        for _ in xrange(4):
            t.addTab(name)
        l.addWidget(t, *pos)

    w.show()
    app.exec_()


if __name__ == '__main__':
    main()

QToolButton:checked/pressed issue

Ubuntu 14.04, Unity shell.
In checked/pressed state QToolButton gets a little bigger that cause QToolBar gets bigger.
Adding padding: 2px; to QToolButton:hover, QToolButton::menu-button:hover and QToolButton:checked, QToolButton:pressed, QToolButton::menu-button:pressed helps me.
Sorry for my English.

Styling a Line from Designer

QDarkStyleSheet is a really nice stylesheet. I ran into a unstyled "widget", the "Horizontal Line" and "Vertical Line" in Qt Designer. It is a QFrame with height 3, sunken shadow and line width equal to 1. You can see it if examine header generated by uic tool.

QFrame[isLine="true"] {
    background-color: #3A3939;
}

The only way I can think to style it is to add a bool QProperty and use a dynamic property selector in the stylesheet. This is not the best solution because you have to remember to add the property every time.

QFrame[height="3"], QFrame[width="3"] {
    background-color: #3A3939;
}

Now that I'm typing this issue up, I thought of a second way to handle it, by checking if the width or height is 3 on qframes.

I don't know if either of these should be included in QDarkStyleSheet, but its worth mentioning in case someone has a better idea.

QCheckbox hover

Since QCheckBox uses png files, it misses of color on hover, surely the same for QRadioButton.

4K

Very nice work !!

However, when using a 4K display, it doesn't look as nice as it does in standard FullHD resolution.

Selected Tab color for QTabWidget slightly misleading

Take a look at the following picture and guess which Tab is selected in the 3 screenshots: http://i.imgur.com/CNWrggO.png

I found myself falling for the color scheme for the selected vs. unselected tabs. The darker background color is used for "selected", which I personally find to be slightly misleading, especially if you have 2 Tabs. I always feel like the lighter highlighted tab should be the one actually selected, as seen in the default windows theme and firefox.

As I already said, this is just my personal opinion and rather subjective, so let me know what you think. I'm sure I could get used to it.

Can QColorDialog be styled?

It seems impossible since it comes from desktop... the only solution available is to reimplement a custom one?

Thanks for this awesome theme!

Anything can be done to improve the colors when using with P4Merge (Qt5)?

I've tried using this style with P4Merge (https://www.perforce.com/product/components/perforce-visual-merge-and-diff-tools) by adding it under the P4VResources folder and named p4vstyle.qss (As they load such a style if it exists).

capture

This works for most elements, but the diff line backgrounds are off. Any idea if anything can be added to the stylesheet to control that?

Thank in advance and sorry if this is way too specific/per-app to be relevant.

QFrame does not style

Hello

if I have a QFrame having width=3 and height=3 pixels: it is visible. Otherwise not. IMHO this is wrong.

Best regards
Carl.

[C++] QDockWidget title bar on Mac OS X Yosemite

I see that this is an issue that you have corrected in the past, however, using Qt 5.4 the QDockWidget title bar is not themed on Yosemite (probably not even related to Yosemite). The icons, however, are.

QCheckBox doesn't work in checked state

Hi,

Thanks for a great sheet! I currently have a problem with using QCheckBox and that is when you press it it doesn't look like the button is checked at all.

I tried to switch to not using the sheet and then everything works as expected.

Option to choose Qt API from environment variable

Hi, I've been using QtPy and the way to choose the Qt API is great. I think you can use it in your project.

def load_stylesheet_from_qt_api():
    """Load stylesheet from Qt API environment variable."""

    # get qt api from environment variable
    qt_api = os.environ['QT_API']

    if qt_api == 'pyqt5':
        return qdarkstyle.load_stylesheet_pyqt5()
    elif qt_api == 'pyqt':
        return qdarkstyle.load_stylesheet(pyside=False)
    elif qt_api == 'pyside':
        return qdarkstyle.load_stylesheet()
    elif qt_api == 'pyside2':
        raise NotImplementedError("PySide 2 is not supported yet.")
    else:
        raise ImportError("QT_API not defined, please set it using one of these ['pyqt5', 'pyqt', 'pyside2', 'pyside'].")

I can implement if you approve :)

QToolBar "expand" button unstyled

When a QToolBar is sized such that not all items appear the button to open the window containing the hidden items is lacking any styling.

Appears to just inherit QToolBar QToolButton's styling, probably needs arrow icons. Will send p/r to fix if I track down where that is styled.

Switching to MIT

The lgpl license might be too restrictive for some users, I plan on switching to a MIT license. Any other opinions?

Images license

The embedded picture resources have no license attached. The MIT license cannot apply to them, because its terms are related to software resources only.

Could you indicate somewhere what is the license attached to these pictures?

highlight misalignment issue

Hi ColinDuquesnoy, I recently found QDarkStyleSheet and gave it a try. Thank you for your fantastic work! However, I seem to have encounter a small bug. The problem is with a right click menu I created with QMenu. When the mouse hovers on one action, it will be highlighted with blue color, but the highlight seems to be positioned a bit too much on the right side instead of in the middle. Sorry I may not express myself very clearly. I think a screenshot will explain better. The first image below is the default Qt style, and the second is after applying QDarkStyleSheet. Could you please confirm the issue and help fix it?
default
qdarkstylesheet

Cannot resize QWidget anymore

I use qdarkstylesheet to distinguish certain QMdiSubwindows from others in an QMDIArea setup. After applying the stylesheet, the widgets cannot be resized anymore. This happens with PyQt5.7 and Python 3.5 on Windows and Ubuntu 14.10

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.