Add a Spyder dark theme

[goanpeca]

I guess this can be achieved bu having custom themes on a OS level, but it would be nice to be able to set Spyder to a dark theme directly in Spyder.

Something like what Dark style sheet provides...

[j9ac9k]

Something like that would be amazing. I am far from experienced enough of a coder to implement something like this, but if there is any testing I can do or help in any other way, please let me know.

[goanpeca]

This was a one liner (using https://github.com/ColinDuquesnoy/QDarkStyleSheet)!

It would need a bit of tweaking to get it to work with the rest ... but what do you guys think?

@ccordoba12, @blink1073, @Nodd, @SylvainCorlay?

[blink1073]

👍

[ccordoba12]

I really like it and I'm also +1 for it, but:

1. First we need to unify syntax highlighting schemes under a single entry in Preferences.
2. We need to define a dark scheme for the Object Inspector.
3. We need to integrate it with our (FontAwesome) theme.
4. We need to decide if we want to fork QDarkStyleSheet as part of the spyder-ide org to maintain it for the rest of time! :-p I mean, if we add this feature there's no coming back ;-)

[ccordoba12]

It seems like too much work for 3.0. Maybe for 3.1 if @goanpeca wants to tackle it?

[goanpeca]

@ccordoba12:

I agree with all the todos but:

1. I can do this, if we agree on what is the desired functionality.
2. @ccordoba12 has to take care of this
3. @SylvainCorlay has to take care of this
4. It is an external project, why do we need to maintain it?, we can depend on it (either implicitly or explicitly)

[ccordoba12]

(4.) Because it can become unmaintained at any time :-) Well, we'll fork it when that happens :-p

[goanpeca]

@ccordoba12 how are the css/style defined in the object inspector?

[ccordoba12]

They're defined in utils/inspector/css

[SylvainCorlay]

@goanpeca it should be easy to parameterize the qtawesome colors in the new icon manager, but (I think) that you would need to restart Spyder to change themes.

[goanpeca]

Hmmmm I think we should avoid that :p if possible. Also... why do we need to restart spyder to change themes?

[SylvainCorlay]

In you screenshot, the icons having grey components don't show well.

• In file icon_manager.py, we can certainly fetch the colors in a dictionary.
• But when changing the theme, we would need to ask all the icons to be re-rendered. I was just wondering whether it is the case already, or if we could trigger it.

[goanpeca]

We should be able to trigger it if it is not the case already.

[SylvainCorlay]

Yes, except that in our case this would be re-instantiating all the QIcons. I hope it works though.

[ccordoba12]

you would need to restart Spyder to change themes

I think that's unavoidable :-) I really doubt Qt qss stylesheets could be changed on the fly.

[goanpeca]

@ccordoba12 Yes you can, not directly, but what I have done is overload the paint method so that if it detects that the style has change it will repaint (using the new css you select).

This could be added as a decorator on the paint method to avoid a lot of code repetition.

This is how I managed to get the new global directory combobox to update based on style change

[goanpeca]

Here and here

[ccordoba12]

Ok, didn't know that :-)

[SylvainCorlay]

But it seems that it would not recompute the QIcons?

[goanpeca]

Yes they will :-)

[goanpeca]

Hmm yes... maybe not :s will look further into it

[azenin]

Dear @goanpeca,

How can I get rid of this terrible editor and console grey borders and make top tabs looks like bottom tabs on Mac?

I've added lines:

import qdarkstyle
MAIN_APP.setStyleSheet(qdarkstyle.load_stylesheet(pyside=False))

Version and main components

• Spyder Version: 3.0.0b2
• Python Version: 2.7.11
• Qt Versions: 4.8.7, PyQt4 (API v2) 4.11.4 on Darwin

Dependencies

pyflakes >=0.5.0   :  1.2.3 (OK)
pep8 >=0.6         :  1.7.0 (OK)
pygments >=1.6     :  2.1.3 (OK)
IPython >=3.0      :  4.2.0 (OK)
zmq >=13.0.0       :  15.2.0 (OK)
qtconsole >=4.0    :  4.2.1 (OK)
pandas >=0.13.1    :  0.18.1 (OK)
numpy >=1.7        :  1.11.0 (OK)
sphinx >=0.6.6     :  1.4.2 (OK)
psutil >=0.3       :  4.2.0 (OK)
rope >=0.9.4       :  0.9.4-1 (OK)
jedi >=0.8.1;<0.9.0:  0.8.1 (OK)
matplotlib >=1.0   :  1.5.1 (OK)
sympy >=0.7.3      :  1.0 (OK)
pylint >=0.25      :  1.5.5 (OK)

[ccordoba12]

@azenin, there's nothing you can do about it for now, sorry :-(

We use our own style customizations on Mac. We need to adapt them to make Spyder work with qdarkstyle.

[dpizetta]

Here are some results I have using QDarkStyle, some changes in QDarkStyle also can provide better visualization for the dropdown, and textbox. ColinDuquesnoy/QDarkStyleSheet#90

To use QDarkStyle is two line changes in the spyder/app/mainwindow (not the best place, just for testing) highlighted inside the screenshoots. I think it is a nice and simple idea to have this as an option inside the Spyder (window theme selection dropdown menu). It should be a optional package. And now we (QDarkStyle) are using QtPy also. So, no compatibility problems.

I've tested using Spyder 3.3.2-dev, Anaconda 4.4, Python 3.6, Linux Ubuntu 16.04.

The problems reported before in this post may have been corrected. @jnsebgosselin, @olundberg

The most problematic is the new icon package (spyder3) that does not work with the dark background. Using the version Two it is pretty nice. Some adjusts should be make in the editor style to match the backgroud...may providing a QDarkSytle theme for the editors too.

Check these screenshoots, using icon package Spyder v2

Configuration

Editor theme selected, I've changed the background to match

Then using the Icon package Spyder v3

Configuration

Tnksss

[ccordoba12]

@dpizetta, QDarkStyle looks really good in Spyder! I'll assign some resources to implement this solution for Spyder 4 and make it work with the Spyder 3 icon theme.

[dpizetta]

Just a note: I've used an old version call in the screenshot. As I mentioned, we are using qtpy. Thus, you need to use qdarkstyle.load_stylesheet_from_environment(), it gets from the qtpy. No need for qdarkstyle.load_stylesheet_from_pyqt5() as in the example. In the QDarkStyle V3 it would be qdarkstyle.load_stylesheet().

Black themes are the best for the programmers' eyes heheh.

TKs

[ccordoba12]

Black themes are the best for the programmers' eyes heheh.

Totally agreed!

[poojapanil]

I am using Anaconda to launch spyder. I used conda install -c auto qdarkstyle to install qdarkstyle. And have this error.

• python=3
• qdarkstyle -> python=2.7

Please Help!
New to python and Spyder

[max3-2]

To add to this topic: On macOS, there is the option to call
defaults read -g AppleInterfaceStyle
it either prints "Dark" or a an error depending on dark mode. If dark mode is implemented, it might be a good idea to connect it to the OS dark mode setting.

[Wurtzinator]

Hey everyone,

worked perfectly for me. Thanks so much!

The background colour for the code/text, however, did not align with the style sheet and I did not know how to check the background colour in terms of HEX or HTML.

So, if you struggle, try this:

1. Download the free programme "PicPick"
2. Choose ColourPicker and hover over the background of the editor where NO code is
3. Check the HTML code and the RGB values
4. Go to Spyder > Tools > Preferences > SyntaxColoring
5. Select your preferred theme or custom theme
6. Choose "Edit selected"
7. Match values in Background > Background, with the current qdarkstyle sheet it should be "#232629"
8. Enjoy the darkness!

[RicardoDominguez]

As @Wurtzinator said, background color set to #232629 worked for me for the syntax coloring.

[deskomor]

Much,much better.Thanx

[ghost]

Anaconda3 users on Windows 10 (last step makes it chill!!!)

1. Download qdarkstylesheet (from goanpecas link above)
2. Using anaconda prompt or cmd prompt....>>> python
3. at >>> pip install qdarkstyle
4. Next find spyder in your Anaconda installation dir**....\Anaconda3\Lib\site-packages\spyder\app**
5. in /app....find mainwindow.py
6. open that file with text editor(spyder or any other)
7. Where all the import statements are(up top) add to the list import qdarkstyle
8. Scroll on down till you find the MainWindow class section
9. find def init****(self, options=None):
   QMainWindow.init(self)
   add:
   self.setStyleSheet(qdarkstyle.load_stylesheet_pyqt5())
10. save
11. Start Spyder and In Preferences, under 'Syntax coloring' change 'scheme' to Spyder Dark and under 'General' change Icon Theme to Spyder 2.
    12)Almost forgot EPICNESS go back to 'syntax coloring' under 'create new scheme' change 'background' color to #232629 you may have to restart don't remember.

[dpizetta]

self.setStyleSheet(qdarkstyle.load_stylesheet_pyqt5())

It is better to use int he final version

style = qdarkstyle.load_stylesheet_from_environment()

So, it gets the qt_api from QtPy environment variable. Thus, people not get problems with they use pyside2 in place of pyqt5

[Wurtzinator]

Ok people, I need help:

I got the qdarkstyle to work in Spyder 3 for Python 2 and then 3 a while back, but then had to reinstall the entire conda environment.

conda info here:

After a fresh install, I now tried to get it to work again, but it does not work, and I do not know why.The code just seems to break:

When I add the 'import qdarkstyle' line, it is all fine until then and Spyder 3 opens normally.

The moment I add the 'self.setStyleSheet(qdarkstyle.load_stylesheet_pyqt5())' line, Spyder 3 will not start. When I delete that line again, it starts normally.
I have tried several different indentations, but still to no avail.

What am I missing?

@dpizetta I tried your suggestion instead, but do not know where I should put this:
'style = qdarkstyle.load_stylesheet_from_environment()'

I tried it at the same spot as the other command, i.e. under the section of

init****(self, options=None):
QMainWindow.init(self)

[ghost]

@Wurtzinator
I first tried the line changes to mainwindow after finding spyder here.. ...\Anaconda3\pkgs\spyder-3.2.6-py27_0\Lib\site-packages\spyder\app\mainwindow.py
That didn't work....I got nowhere till I did it to mainwindow here...
.....\Anaconda3\Lib\site-packages\spyder\app\mainwindow.py

That second location made the difference for whatever reason be sure to select spyder2 and Spyder dark themes....and a restart.

hope it works.

[Wurtzinator]

@kaneman100

I had the same issue when I changed the file several months ago, and then it worked.

But I made sure this time to change the correct file, i.e. \Anaconda3\Lib\site-packages\spyder\app\mainwindow.py

and it still does not work :(

[dpizetta]

Hi @kaneman100 and @Wurtzinator, did you have some more info from logging from the debug mode?

If not, try to add some

    try:
        os.environ['QT_API'] = 'pyqt5'
        import qdarkstyle
    except Exception as err:
        print("Qdarkstyle not found for using black theme:  %s" % err)
    else:
        style = qdarkstyle.load_stylesheet_from_environment()
        app.setStyleSheet(style)

Note the change: qdarkstyle.load_from_environment(), so it gets the qt api (pyside, pyqt, etc) from the QT_API environment variable, same used for QtPy, so you need to make sure that this variable is set before setting using this function (qdarkstyle.load_from_environment()).

I'm using in spyer/app/mainwindow.py

#==============================================================================
# Utilities to create the 'main' function
#==============================================================================
def initialize():
    """Initialize Qt, patching sys.exit and eventually setting up ETS"""
    # This doesn't create our QApplication, just holds a reference to
    # MAIN_APP, created above to show our splash screen as early as
    # possible
    app = qapplication()

    # --- Set application icon
    app.setWindowIcon(APP_ICON)

    #----Monkey patching QApplication
    class FakeQApplication(QApplication):
        """Spyder's fake QApplication"""
        def __init__(self, args):
            self = app  # analysis:ignore
        @staticmethod
        def exec_():
            """Do nothing because the Qt mainloop is already running"""
            pass
    from qtpy import QtWidgets
    QtWidgets.QApplication = FakeQApplication

    # ----Monkey patching sys.exit
    def fake_sys_exit(arg=[]):
        pass
    sys.exit = fake_sys_exit

    # ----Monkey patching sys.excepthook to avoid crashes in PyQt 5.5+
    if PYQT5:
        def spy_excepthook(type_, value, tback):
            sys.__excepthook__(type_, value, tback)
        sys.excepthook = spy_excepthook

    # Removing arguments from sys.argv as in standard Python interpreter
    sys.argv = ['']

    # Selecting Qt4 backend for Enthought Tool Suite (if installed)
    try:
        from enthought.etsconfig.api import ETSConfig
        ETSConfig.toolkit = 'qt4'
    except ImportError:
        pass

    # <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    try:
        os.environ['QT_API'] = 'pyqt5'  # I've set here to make things easy, but there is a right place
        import qdarkstyle
    except Exception as err:
        print("Qdarkstyle not found for using black theme:  %s" % err)
    else:
        style = qdarkstyle.load_stylesheet_from_environment()
        app.setStyleSheet(style)
    # <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

    return app

[dpizetta]

In the Python 3.6.6, Qt5.9.3, PyQt5.9.2 both your and my code are working, may is something with Py2. I'm waiting for your reply

[ghost]

Mine is working fine. I just had to switch the folder I modified main in. Wurtinator was having a tougher issue.

…

On Mon, Nov 12, 2018, 3:37 PM Daniel Pizetta ***@***.*** wrote: In the Python 3.6.6, Qt5.9.3, PyQt5.9.2 both your and my code are working, may is something with Py2. I'm waiting for your reply — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2350 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Ap57ESdIJxFh-7uFwgEf5TwbqsF7oarAks5uudvrgaJpZM4EG0he> .

[Wurtzinator]

@dpizetta THANK YOU SO MUCH! It finally worked, yeahiiiiiiiii! Thanks also for the code placement, otherwise I would have been lost. :D

I am now wondering whether it is also possible to get the help windows as well as the JupyterNotebook extension dark? Is that possible?

Again, thanks big time!!!

[dpizetta]

Tks. May they are not applying the style sheet in the notebook. It should use the same widget, as they have menus and toolbars. I saw something mentioned here. Some of them I saw they fixed.

[Repligon]

QDarkStyleSheet was a bit too blue for me. I've been trying to recreate Qt Creator's dark flat theme and stumbled on this post
So I copied the code spikespaz provided and put it in darkflat.py in spyder module root (<python dir>/Lib/site-packages/spyder/) then added

    from spyder import darkflat
    palette = darkflat.QDarkPalette()
    palette.set_app(app)

just before the return of initialize function in app/mainwindow.py

It turned out just as I like, but some dark icons became barely visible. So I dug a bit deeper into the code and edited icon function in utils/icon_manager.py

def icon(name, resample=False, icon_path=None):
    theme = CONF.get('main', 'icon_theme')
    if theme == 'spyder 3':
        if not _resource['loaded']:
            qta.load_font('spyder', 'spyder.ttf', 'spyder-charmap.json',
                          directory=_resource['directory'])
            _resource['loaded'] = True
        args, kwargs = _qtaargs[name]
        # <<<<<---------this will make all uncolored icons white------------>>>>>
        if 'color' not in kwargs.keys():
            kwargs['color'] = 'white'
        # <<<<<------------------------------------------------------------->>>>>
        return qta.icon(*args, **kwargs)
    elif theme == 'spyder 2':
        icon = get_icon(name + '.png', resample=resample)
        if icon_path:
            icon_path = osp.join(icon_path, name + '.png')
            if osp.isfile(icon_path):
                icon = QIcon(icon_path)
        return icon if icon is not None else QIcon()

and ended up with this

[ccordoba12]

We already implemented a full dark theme for Spyder 4, and that's going to be available since our next beta (4.0beta2).

For now I'm going to lock this issue because we don't support, endorse, or want people to use hacks against any of our 3.x.x versions because a) they are lost after any update; and b) they could lead to other kinds of problems due to changes in Spyder's internal functionality.

Thanks for understanding!

[ccordoba12]

There are some minor details to be worked out, but I'd say this issue is solved now.