Fully implement Spyder's new dark theme

[CAM-Gerlach]

Problem Description

This issue serves to track the sub-issues related to fully implementing the dark theme across Spyder's various panes, text and icons, as a number of steps, both internal to Spyder's codebase and external in QDarkStyle, are required.

Blocked by #8020 , the initial implementation. Originally spawned from #2350 , the initial issue and discussion thread.

Places that need to be "darkified":

• Add dark theme style to Help pane #8087: Dark css style for Help and Console panes
• Dialogs:
  • Pylint/Profiler Output window
  • Dependencies dialog
  • Github authentication
• Interactive tour and menus:
  • Interactive tour
  • Online help and interactive tours submenus (of Help menu)
• Help minor things
  • Change color of math equations
  • Change style of notes
  • Theme scroll bar
  • Theme table headers
• Undocked windows
• Non-inline plot dialog (not sure if possible) @ccordoba12: This is not possible because that dialog is created by Matplotlib.
• "Information" icon in file switcher isn't themed (opened as a separate issue to close this one out)

Places that still have black/dark colors:

• Find in files results
• Editor widgets:
  • File switcher file list
  • Symbol finder results
• Outline Explorer code cell names
• Preferences table columns:
  • Keyboard shortcuts pref pane names column
  • LSP Manager Command to Execute column
• DataFrameEditor Index column
• Pylint and Profiler panes' date and rating text
• Icons:
  • "Gear"/pane options icon (all panes; dark gray is completely invisible/should be white)
  • Regex icon (find in files, find/replace; black/should be white)
  • About Spyder "i" icon (Help menu; black/should be white)
  • Case sensitivity icon (find in files, find/replace; dark blue is low contrast/try light blue)

Other Spyder Issues/Bugs:

• Spyder dark theme overrides background color set in syntax highlighting theme, except behind text #8069 : Spyder dark theme overrides background color set in syntax highlighting theme, except behind text
• Explanatory text for Greedy Completion preferences option cut off only in dark theme #8070 : Explanatory text for Greedy Completion preferences option cut off only in dark theme
• Centralize remaining theme-related options (like Rstudio does) under a renamed "Themes" pref pane #8071 : Centralize remaining theme-related options (like Rstudio does) under a renamed "Themes" pref pane
• Make internal console respect user's syntax highlighting theme #8072 : Consider making internal console respect user's syntax highlighting theme
• Toolbar icons are too large particularly in dark theme #8075 : Toolbar icons are too large particularly in dark theme
• Consider making the dark theme (and corresponding Spyder Dark syntax scheme) the default in Spyder 4 #8080 : Consider making the dark theme (and corresponding Spyder Dark syntax scheme) the default in Spyder 4
• PR: Remove dockwidget title bars by default and improve dock/undock behavior #8192 Fix options icon being very low contrast and sys.path and environment variables aren't themed
• Improve "Spyder Dark" syntax highlighting theme #8284 : Improve Spyder-Dark syntax highlighting theme
• Outlines around sections, fields, etc are invisible in tabbed preference panes
• Fix SymPy equations being having black rather than white FG color with dark BG (new issue was opened about this).
• Under the dark theme, the right warning display sidebar is not offset to match the scroll bar position #9439 : Right code analysis sidebar does not match scroll bar position (will be deal with separately)

External Issues:

• Text cut off and background color not full width when using comboboxes with a BG color ColinDuquesnoy/QDarkStyleSheet#111 : Text cut off and background color not full width when using comboboxes with a BG color
• Extremely difficult to read "disabled"/"grayed-out" text and embedded hyperlinks due to low contrast ColinDuquesnoy/QDarkStyleSheet#112 : Extremely difficult to read "disabled"/"grayed-out" text and embedded hyperlinks due to low contrast
• Tabs have low contrast with each other and their associated pane, and the close button is much too small ColinDuquesnoy/QDarkStyleSheet#118 : Tab close buttons for Editor and IPython Console are tiny and very difficult to see and click, and the hitboxes don't match the icons. Tabs are very hard to tell apart from one another, especially when not the active tab or adjacent, and tabbar itself is hard to distinguish from the pane its attached to (and hard to tell which pane)
• Fix toggle icons (regex, case sensitive) being impossible to tell whether they are activated or deactivated (better to be solved in QDarkstyle).

[ccordoba12]

@dalthviz, please continue with the Help plugin. For that I think you need three things:

1. Let's leave the background color to be the same as the one of QDarkStyle and the foreground color to be white.
2. Please check this theme: https://bootswatch.com/darkly/ for a good set of colors that can go with a dark background.
3. You need to change Help's rich CSS when the interface theme changes, not the editor one.

[ccordoba12]

@dalthviz, please continue with

• Editor widgets:
  • File switcher file list
  • Symbol finder results

and

• Preferences table columns:
  • Keyboard shortcuts pref pane names column
  • LSP Manager Command to Execute column

Those are very similar.

[ccordoba12]

And this one too

• Find in files results

All of this in the same PR.

[CAM-Gerlach]

@ccordoba12 @dalthviz I just noticed it now, but the DataFrameEditor's Index column is also not dark themed (making the index invisible), in case that should go into the current batch of work.

[dalthviz]

@ccordoba12 @CAM-Gerlach another thing to fix is the setting of the style sheet to detached windows of the plugins:

For example with the Editor:

[ccordoba12]

@dpizetta, keep up the good work!! Things are looking really nice with QDarkStyle 2.6.1:

[dpizetta]

It looks pretty neat! Good job for all of you too! I like minimalist icons :)

May I change more thing this week, it will even better :)
Tabs, tool buttons and some details, v2.6.2.

The rounded corners are trick, hauha...there are many things that look weird mixed with flat ones. In version 3 we will have some options to set it flat, rounded and palette changes. I'm looking for the best implementation.

Thanks :)

[CAM-Gerlach]

Thanks so much @dpizetta !

[ccordoba12]

@CAM-Gerlach, you know style things is something we can't solve here, so please report them directly in the QDarkStyle repo.

It's really a waste of yours and our time (like the issues you open about the icons size, greedy completion text, etc).

[CAM-Gerlach]

...

I responded to you in private chat.

[CAM-Gerlach]

@ccordoba12 @dpizetta Probably the biggest remaining issue (that has a major UX impact to the point of severly harming usability of specific Spyder features) is that its almost impossible to tell if toggle buttons (like regex mode and case-sensitive for the Find and Replace widget and the Find in Files pane, etc) are enabled or disabled, and they appear to be reversed from what a user might expect. Example:

Disabled:

Enabled:

Therefore, it would seem prudent to e.g. outline them in a much thicker, brighter white or blue when enabled, or even color the icon blue to indicate the button is toggled on. Is this something that can be fixed on Spyder's side, or need it be done in the theme itself? Thanks!

[dpizetta]

Hi @CAM-Gerlach those buttons are like in the toolbar, they are transparent, but when activated they change to the background color, which is your color there. Both colors are the same in this case. I think when the pressing event is occurring they appear blue in the border. I've tried to put some color (lighter) when not activate and the other (darker) when activated, but they made the interface ugly.

There are some changes that can be made to improve (Qdarksytle and/or Spyder):

• Change the background color (whole bar) to the same color of the borders. So it will reproduce the toolbar - I need to know which widget is the background where the buttons are. Since there are many borders I think this is a good option. Needs to try the whole interface to see if it is nice.
  Something like this (obs.: the buttons are incorrect)

• I've put the border light when not activated because if there is just text you may think that it is not a button, of course, the problem appears when activated. Your suggestion is nice, we can use a lighter line when not activated, and a darker when activated. We can try the colors from the pushbuttons.

In normal style, they are identical to the push buttons.

Ideas? @ccordoba12 @goanpeca @CAM-Gerlach Tks

[bcolsen]

Talking about transparent button here reminded me that I found this the other day in the editor's tab arrows (on Linux):

To reproduce you need more tabs open than fit in the bar. Does anyone else get this?

[CAM-Gerlach]

@bcolsen I can confirm that's what I see on Windows as well. (Qt 5.9.7).

[dpizetta]

About tabs, it should have been fixed in the latest version 2.6.8. What qdarkstyle versions are you using?

[goanpeca]

I back @CAM-Gerlach concern regarding the toolbar buttons. I think they need to change in a more visible/obious way than just the outline. I find it not clear enough (even if some other tools like VSCode do this)

(I don't think this is clear enough, I want to know I can click on something without having to move the mouse pointer there)

@dpizetta I believe we should start using the power of SASS to add lighter and darker shades besides the basic 9 color palette to address these small tweaks.
https://sass-lang.com/documentation/functions

[CAM-Gerlach]

I find it not clear enough (even if some other tools like VSCode do this)

I agree, although even VSCode's look would be clearer than what we have right now, which is virtually impossible to tell and looks "backwards". Ideally, though, we want the whole button to be a different, ideally darker color to make clear its depressed (which could require lightning the toolbars).

[CAM-Gerlach]

2.6.7 is the latest on spyder-ide, but uninstalling that and installing 2.6.8 from pip indeed resolves the arrow problem. @ccordoba12 can we get 2.6.8 on spyder-ide and require that for Beta 2?

[goanpeca]

You mean add that in conda forge :-p ?

[CAM-Gerlach]

@goanpeca No, its already on 2.6.8 there.

[ccordoba12]

can we get 2.6.8 on spyder-ide

Done.

[CAM-Gerlach]

Another issue I've noticed for a while: The right sidebar that shows error/warning/etc. markers throughout the document is not offset to match the scrollbar, so the latter is not usable as an indicator of which should be visible. Compare the light theme:

With the dark theme:

Presumably, the warning bar needs to be offset by a distance equal to the scroll arrow widget on the top and bottom on the dark theme to avoid this problem.

@dpizetta @ccordoba12 @goanpeca Ideas/opinions on how to handle the toggle icons being impossible to tell if activated? This is probably the most important item on this list to fix, since it has major usability impacts for Find/Replace and Find in FIles.

[ccordoba12]

The right sidebar that shows error/warning/etc. markers throughout the document is not offset to match the scrollbar, so the latter is not usable as an indicator of which should be visible

This has nothing to do with the dark theme. Please open a new issue about it.

[CAM-Gerlach]

@ccordoba12 I opened a new issue, but I am rather confused. Could you explain how a UI problem that occurs only under the dark UI theme has nothing to do with the dark theme?

[ccordoba12]

Because it happens when the editor background is dark, irregardless of the theme, as your screenshot above shows.

[ccordoba12]

Ups, sorry, I didn't read your comment completely. I thought both themes have the problem. In any case. we'll close this bug after we fix the foreground color of Sympy output, so it's better to open new issues.

[CAM-Gerlach]

Ups, sorry, I didn't read your comment completely

No problem, we all miss things. I just wasn't sure if it was me this time.

In any case. we'll close this bug after we fix the foreground color of Sympy output, so it's better to open new issues

Okay, I'd been avoiding that before since you'd told me not to do so. So should also I open new issues for

• "Information" icon in file switcher isn't themed

and, if its determined that the best course of action is to fix it in Spyder, since @dpizetta said it could be solved in either as I understand,

• Fix toggle icons (regex, case sensitive) being impossible to tell whether they are activated or deactivated (Spyder or QDarkstyle)

?

[ccordoba12]

I already edited the description to cover those cases, Please see above.

[CAM-Gerlach]

@ccordoba12 Okay, thanks. I couldn't see that it had been updated while I was editing it myself to similar effect, heh. I already had posted a screenshot here, so I'll just copy that to a new issue.

@dpizetta Do you want me to open an issue over on QDarkStyle for the toggle icons issue with the content from over here, or are you already handling that? Thanks!

[dpizetta]

@dpizetta Do you want me to open an issue over on QDarkStyle for the toggle icons issue with the content from over here, or are you already handling that? Thanks!

Please, @CAM-Gerlach, I'm already working on this. The reasonable option, for now, keeping the border highlighted when checked like the lastest version of vscode. We (@goanpeca) can try other options with scss in the future.

[CAM-Gerlach]

@dpizetta Thanks. Per your direct request, I opened an issue there.

[Lattitude75]

Since the fix for the dark theme will be out with version 4, I thought of a workaround for the current version. The only problem now seems to be the colour of the icons in the window. After going through the source files, I found that the icons for the spyder3 theme are configured in directory_of_spyder/spyder/utils/icon_manager.py. (The directory of spyder is /lib/python3.7/site-packages/ if installed through pip). I changed the variable _qtaargs by adding the parameter colour white wherever necessary. The final result is as shown in the picture below.

The dark mode works perfectly everywhere except some parts of help and Qt documentation. I have attached the modified icon_manager.py file.
icon_manager.py

Cheers!

[ccordoba12]

I thought of a workaround for the current version

No workarounds will be added for the current version, sorry.

[ccordoba12]

With the exception of issue #9545, we can say this is finished.

Thanks to everyone who contributed to making the dark theme for Spyder a reality!

[ccordoba12]

By the way, if you find more problems about the dark theme, please report them as separate issues.