Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a Spyder dark theme #2350

Closed
goanpeca opened this issue Apr 23, 2015 · 106 comments

Comments

Projects
None yet
@goanpeca
Copy link
Member

commented Apr 23, 2015

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...

@goanpeca goanpeca added the Spyder-Gui label Apr 23, 2015

@j9ac9k

This comment has been minimized.

Copy link

commented May 20, 2015

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.

@ccordoba12 ccordoba12 added this to the wishlist milestone Jul 14, 2015

@goanpeca

This comment has been minimized.

Copy link
Member Author

commented Sep 14, 2015

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

darkstyle

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

This comment has been minimized.

Copy link
Member

commented Sep 14, 2015

👍

@ccordoba12

This comment has been minimized.

Copy link
Member

commented Sep 14, 2015

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

This comment has been minimized.

Copy link
Member

commented Sep 14, 2015

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

@goanpeca

This comment has been minimized.

Copy link
Member Author

commented Sep 14, 2015

@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

This comment has been minimized.

Copy link
Member

commented Sep 14, 2015

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

@goanpeca

This comment has been minimized.

Copy link
Member Author

commented Dec 7, 2015

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

@ccordoba12

This comment has been minimized.

Copy link
Member

commented Dec 7, 2015

They're defined in utils/inspector/css

@SylvainCorlay

This comment has been minimized.

Copy link
Member

commented Dec 7, 2015

@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

This comment has been minimized.

Copy link
Member Author

commented Dec 7, 2015

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

@SylvainCorlay

This comment has been minimized.

Copy link
Member

commented Dec 7, 2015

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

This comment has been minimized.

Copy link
Member Author

commented Dec 7, 2015

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

@SylvainCorlay

This comment has been minimized.

Copy link
Member

commented Dec 7, 2015

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

@ccordoba12

This comment has been minimized.

Copy link
Member

commented Dec 7, 2015

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

This comment has been minimized.

Copy link
Member Author

commented Dec 7, 2015

@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

This comment has been minimized.

Copy link
Member Author

commented Dec 7, 2015

Here and here

@ccordoba12

This comment has been minimized.

Copy link
Member

commented Dec 7, 2015

Ok, didn't know that :-)

@SylvainCorlay

This comment has been minimized.

Copy link
Member

commented Dec 7, 2015

But it seems that it would not recompute the QIcons?

@goanpeca

This comment has been minimized.

Copy link
Member Author

commented Dec 7, 2015

Yes they will :-)

@goanpeca

This comment has been minimized.

Copy link
Member Author

commented Dec 8, 2015

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

@goanpeca goanpeca removed the Spyder-Gui label Apr 19, 2016

@azenin

This comment has been minimized.

Copy link

commented Jun 1, 2016

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?

screen shot 2016-06-01 at 17 00 15

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)

@goanpeca goanpeca self-assigned this Jun 1, 2016

@ccordoba12 ccordoba12 modified the milestones: v3.1, wishlist Jun 1, 2016

@ccordoba12 ccordoba12 added the tag:Ui label Jun 1, 2016

@ccordoba12

This comment has been minimized.

Copy link
Member

commented Jun 1, 2016

@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

This comment has been minimized.

Copy link

commented Sep 28, 2018

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

screenshot linux 2018-09-28 11 12 48

Configuration

screenshot linux 2018-09-28 11 13 15

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

screenshot linux 2018-09-28 11 13 37

Then using the Icon package Spyder v3

screenshot linux 2018-09-28 11 16 03

Configuration

screenshot linux 2018-09-28 11 16 19

Tnksss

@ccordoba12

This comment has been minimized.

Copy link
Member

commented Sep 28, 2018

@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.

@ccordoba12 ccordoba12 assigned dalthviz and unassigned goanpeca Sep 28, 2018

@dpizetta

This comment has been minimized.

Copy link

commented Sep 28, 2018

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

This comment has been minimized.

Copy link
Member

commented Sep 28, 2018

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

Totally agreed!

@poojapanil

This comment has been minimized.

Copy link

commented Sep 30, 2018

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

This comment has been minimized.

Copy link

commented Oct 1, 2018

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.

@dalthviz dalthviz referenced this issue Oct 6, 2018

Merged

PR: Initial support for Spyder's dark theme #8020

5 of 5 tasks complete
@Wurtzinator

This comment has been minimized.

Copy link

commented Oct 8, 2018

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

This comment has been minimized.

Copy link

commented Oct 9, 2018

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

@deskomor

This comment has been minimized.

Copy link

commented Oct 23, 2018

Much,much better.Thanx

@ghost

This comment has been minimized.

Copy link

commented Nov 6, 2018

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

This comment has been minimized.

Copy link

commented Nov 6, 2018

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

This comment has been minimized.

Copy link

commented Nov 11, 2018

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:

image

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?

capture

@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

This comment has been minimized.

Copy link

commented Nov 11, 2018

@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

This comment has been minimized.

Copy link

commented Nov 11, 2018

@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

This comment has been minimized.

Copy link

commented Nov 12, 2018

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

This comment has been minimized.

Copy link

commented Nov 12, 2018

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

This comment has been minimized.

Copy link

commented Nov 12, 2018

@Wurtzinator

This comment has been minimized.

Copy link

commented Nov 15, 2018

@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?

image

Again, thanks big time!!!

@dpizetta

This comment has been minimized.

Copy link

commented Nov 20, 2018

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

This comment has been minimized.

Copy link

commented Nov 21, 2018

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
darkspyder

@ccordoba12

This comment has been minimized.

Copy link
Member

commented Nov 21, 2018

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!

@spyder-ide spyder-ide locked as resolved and limited conversation to collaborators Nov 21, 2018

@ccordoba12

This comment has been minimized.

Copy link
Member

commented Dec 6, 2018

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

@ccordoba12 ccordoba12 closed this Dec 6, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.