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

dalthviz · 2018-10-06T15:53:55Z

Pull Request Checklist

Read and followed this repo's Contributing Guidelines
Based this PR on the latest version of the correct branch (master or 3.x)
Described the changes and the motivation for them below
Noted what issue(s) this pull request resolves, creating one if needed
Included a screenshot, if this PR makes any visible changes to the UI

Developer Certificate of Origin Affirmation

By submitting this Pull Request or typing my name below, I affirm the
Developer Certificate of Origin
with respect to both the content of the contribution itself and this post,
and understand I am releasing it under Spyder's MIT (Expat) license.

I certify the above statement is true and correct: dalthviz

Description of Changes

Add initial support for Spyder's dark theme settings

Preview using Monokai color scheme

Issue(s) Resolved

pep8speaks · 2018-10-06T15:53:59Z

Hello @dalthviz! Thanks for updating the PR.

There are no PEP8 issues in the file setup.py !
In the file spyder/app/mainwindow.py, following are the PEP8 issues :

Line 168:1: E402 module level import not at top of file
Line 190:1: E265 block comment should start with '# '
Line 192:1: E265 block comment should start with '# '
Line 193:1: E402 module level import not at top of file

There are no PEP8 issues in the file spyder/config/gui.py !
There are no PEP8 issues in the file spyder/config/main.py !
There are no PEP8 issues in the file spyder/preferences/configdialog.py !
In the file spyder/utils/icon_manager.py, following are the PEP8 issues :

Line 67:80: E501 line too long (211 > 79 characters)
Line 68:80: E501 line too long (213 > 79 characters)
Line 71:80: E501 line too long (296 > 79 characters)
Line 81:80: E501 line too long (186 > 79 characters)
Line 81:81: E231 missing whitespace after ':'
Line 82:80: E501 line too long (186 > 79 characters)
Line 82:81: E231 missing whitespace after ':'
Line 83:80: E501 line too long (85 > 79 characters)
Line 85:80: E501 line too long (115 > 79 characters)
Line 87:80: E501 line too long (134 > 79 characters)
Line 87:91: E231 missing whitespace after ','
Line 94:80: E501 line too long (80 > 79 characters)
Line 98:80: E501 line too long (84 > 79 characters)
Line 102:80: E501 line too long (88 > 79 characters)
Line 110:80: E501 line too long (169 > 79 characters)
Line 113:80: E501 line too long (83 > 79 characters)
Line 116:80: E501 line too long (80 > 79 characters)
Line 124:80: E501 line too long (215 > 79 characters)
Line 127:80: E231 missing whitespace after ':'
Line 127:80: E501 line too long (201 > 79 characters)
Line 128:78: E231 missing whitespace after ':'
Line 128:80: E501 line too long (199 > 79 characters)
Line 138:80: E501 line too long (87 > 79 characters)
Line 143:80: E501 line too long (85 > 79 characters)
Line 144:80: E501 line too long (85 > 79 characters)
Line 149:80: E501 line too long (80 > 79 characters)
Line 173:80: E501 line too long (80 > 79 characters)
Line 175:80: E501 line too long (170 > 79 characters)
Line 176:80: E501 line too long (187 > 79 characters)
Line 181:80: E501 line too long (219 > 79 characters)
Line 184:80: E501 line too long (80 > 79 characters)
Line 186:80: E501 line too long (85 > 79 characters)
Line 187:80: E501 line too long (83 > 79 characters)
Line 188:80: E501 line too long (85 > 79 characters)
Line 189:80: E501 line too long (86 > 79 characters)
Line 197:80: E501 line too long (80 > 79 characters)
Line 199:80: E501 line too long (85 > 79 characters)
Line 201:80: E501 line too long (80 > 79 characters)
Line 202:80: E501 line too long (80 > 79 characters)
Line 203:80: E501 line too long (82 > 79 characters)
Line 204:80: E501 line too long (80 > 79 characters)
Line 206:80: E501 line too long (81 > 79 characters)
Line 212:80: E501 line too long (82 > 79 characters)
Line 213:80: E501 line too long (81 > 79 characters)
Line 220:80: E501 line too long (83 > 79 characters)
Line 222:80: E501 line too long (85 > 79 characters)
Line 238:80: E501 line too long (81 > 79 characters)
Line 241:80: E501 line too long (80 > 79 characters)
Line 244:80: E501 line too long (147 > 79 characters)

Comment last updated on October 14, 2018 at 21:50 Hours UTC

ccordoba12 · 2018-10-06T19:46:39Z

@dalthviz, please merge with master to fix our tests.

ccordoba12

This looks really, really good!! Thanks @dalthviz!

Now my comments:

Your first screenshot makes obvious that we need to select a dark theme for the Editor when users select the dark theme for the entire application.
This means the new option in Preferences > Global > Appearance is not really necessary, so please remove it.
What we need to do is to directly select the dark application theme when users select a dark Editor theme in Preferences > Syntax coloring (and the same for light themes). This way we'll make both go hand in hand.
A Spyder restart will be required if users change the syntax scheme from light to dark or dark to light. If we go from a dark (light) scheme to another dark (light) scheme, we don't need to inform users that a restart is needed.
This is the way RStudio works, and I think it's very intuitive.

ccordoba12 · 2018-10-07T23:24:36Z

spyder/utils/icon_manager.py

@@ -236,6 +236,220 @@
    'dependency_error':        [('fa.warning',), {'color': 'darkred'}],
 }

+_qtaargsdark = {
+    'log':                     [('fa.file-text-o',), {'color': 'white'}],


Please parametrize color here, like this:

'log': [('fa.file-text-o',), {'color': MAIN_LIGHT_COLOR}],

and the same for all other keys in this dict, so we can check the new scheme with different shades of white.

Please also define MAIN_LIGHT_COLOR = 'white' at the top of this file for this.

CAM-Gerlach · 2018-10-11T06:36:54Z

Fantastic change, of course, and it already looks very good and makes Spyder appear much more modern. If its ready, I can test it more thoroughly on Windows.

In fact, I would favor making the dark theme the default on first run (as IIRC Rstudio, Atom and VSCode do) as it makes a better first impression of Spyder being a modern, clean IDE to new users, and also distinctly new and fresh look vs. Spyder 3 (not to mention, @ccordoba12 can't argue I can't make the dark version our hero screenshot on the website this time, as those three editors have on theirs :) ).

IMO, inexorably linking the overall UI color and the syntax highlighting background color is not the best choice, particularly for Spyder's specific situation vs. Rstudio. TL;DR: Spyder requires a full restart with all its negative repurcussions unlike Rstudio, vastly increasing the penalty of this approach; Spyder users a more conventional and less minimal UI that looks much less odd when in a different color than the code background; Spyder has user-configurable themes and colors which lead to ambiguity, edge cases and loss of user control if the UI theme is determined automatically; and the contrasting color of the core Editor and Console backgrounds help draw visual focus to what's most important, the code, which some users prefer. (See below for full reasoning).

What I suggest to easily obtain the best of both worlds is to have three radio buttons in the unused space below the "scheme" buttons to the right of the syntax highlighting preview, under the heading "UI Theme" or similar, with the options Automatic, Light, and Dark. Automatic could be the default, which would enable the behavior you describe above (automatically switching from light to dark UI theme based on whether the luminence of the background color of the selected theme), with a warning dialog when switching to a syntax theme of a different "default" UI theme (light/dark) asking the user if they'd like to confirm and restart, abort the syntax theme change or confirm the syntax theme change but keep the previous UI color. If the latter, or the user selected them manually, the radio option would switch to "light" or "dark" as appropriate, which would always use a light or dark UI respectively even when switching between different syntax themes. This combines the convenience of the behavior you suggest by default while also retaining all the advantages of having it as a separate setting.

As another minor suggestion, but perhaps not within scope of this PR, it would be really nice to have an icon or other indicator next to each syntax theme indicating whether its light or dark by default, which would be a useful indicator to the user for both picking an appropriate theme they like (light or dark), as well as allowing them to easily determine whether selecting it would require a restart before doing so.

Full reasoning for this does not work so well for Spyder, particularly vs. Rstudio (feel free to skip):

Spyder requires a full restart when changing the UI theme (vs. just the syntax highlighting one) which adds a huge amount of overhead to just changing the syntax highlighting theme, while in Rstudio (as its UI is web/JS-based, other than the menubar which isn't affected) it adds minimal time on top of changing the syntax highlighting theme. Therefore, a user wishing to try out different themes, or wanting to switching between a light and a dark syntax theme temporarily for different purposes (both of which I often do), is forced to sit through the entire restart process and lose quite a bit of state (help window, find in files results, possibly profiler results and static code analysis, scroll and cursor positions in files, any non-stored settings, consoles open and their settings, plot history, specific online help, project explorer and file explorer navigation, and of course any IPython Console sessions and their associated commands, data and output) without having any say in the process. This alone is a pretty huge downside.
Relative to Rstudio, which has a more minimal UI and chrome around each of the panes and is JS-based, Spyder is built on a more "native" UI toolkit which the user is used to seeing in the traditional "light" color scheme, and who's chosen color theme has much more individual importance independent of the content panes. Therefore, Spyder's UI is generally more "expected" to be in a light theme relative to Rstudio, and doesn't look nearly as unnatural not being the same color as certain panes, while having an independent choice of its color has much more value and makes considerably more sense.
Unlike Rstudio, which has no ability for users to define their own custom syntax colors or themes within the IDE, and even creating, adding or modifying one externally is quite nontrivial, Spyder's syntax highlighting is fully user-configurable in fine-grained detail and numerous custom themes can be created and saved all within the IDE. Therefore, Spyder would need to implement some arbitrary threshold on, e.g., the background color luminience in order to decide whether to theme the UI itself either light or dark. There could be various edge cases or the user could simply disagree with Spyder's choice here for a background color that isn't pure white or black, with no ability to override this; they're stuck with whatever Spyder picks, and this adds extra complexity and attended failure modes to the logic that handles this.
Having the core "programming spaces" (the Editor and the Console) in a contrasting color places the visual focus squarely on the actual code, which is desired in quite a few circumstance for different workflows and user preferences. Some may certainly prefer this and some not, but making this an option is greatly preferable vs. forcing users into one or the other. Furthermore, this allows for optional visual continuity with Spyder 3 that is not otherwise possible, which some users may want initially at least until they've settled in to the new version.

ccordoba12 · 2018-10-11T15:08:10Z

What I suggest to easily obtain the best of both worlds is to have three radio buttons in the unused space below the "scheme" buttons to the right of the syntax highlighting preview, under the heading "UI Theme" or similar, with the options Automatic, Light, and Dark.

This is a very good suggestion, but not using radio buttons but a dropdown menu. This is called RStudio theme in RStudio and this is how it looks:

@dalthviz, please implement this idea too.

CAM-Gerlach · 2018-10-11T18:05:26Z

This is a very good suggestion, but not using radio buttons but a dropdown menu.

If we have no plans to add more UI themes anytime soon, or too many options there, radio buttons are quicker and more obvious to interact with than a dropdown. However, if we do plan to add more UI themes beyond light and dark, or other options to the side, a dropdown makes sense.

This is called RStudio theme in RStudio and this is how it looks

Yeah, I saw that although it was rather confusing there since I didn't notice any difference between "Modern" and "Sky" and it wasn't clear exactly what it was supposed to change (unlike the wording above).

Working off that, we could take that a step further, call that preference pane "Themes", and move the font and window theme/icon theme choices there as well like Rstudio has, since they're also directly theme-related.

…or scheme.

dalthviz · 2018-10-13T18:44:54Z

@ccordoba12 @CAM-Gerlach a new preview:

CAM-Gerlach

I tested it on Windows 8.1 with a clean prefs file.

Regarding the theme itself:

~~Many comboboxes with backgrounds (path bar, pylint, profiler, find/replace) had the text cut off like so:~~ Apparently QDarkStyle

The background color of the Editor and Console pane, as well as the syntax color scheme preview in preferences, does not change as it should with the "Background" color of the syntax highlighting theme, but rather only the background surrounding the actual text characters. This works properly with the light UI theme. The issue reporting dialog editor has the same problem, except that it always uses the light theme so it looks even worse. Separate issue
~~The "Greedy completion" section in IPython console > Advanced Settings was cut off~~ Separate issue
~~Greyed-out text should be lighter, since its almost impossible to even read now; also, links could be a little lighter as well.~~ QDarkStyle
~~Places that need to be "darkified":~~ Future PR
- Help pane (obviously)
- Pylint/Profiler Output window
- Dependencies dialog
- Github authentication dialog
- Interactive tour
- Online help and interactive tours submenus (of Help menu)
~~Places that still have black/dark text:~~ Future PR
- Find in files results
- File switcher file list
- Symbol finder results
- Keyboard shortcuts names column
- LSP Manager Command to Execute column
- Pylint/Profiler date and rating text

~~Icons that need to be white/light grey:~~ Future PR
- "Gear"/pane options icon (completely invisible)
- Regex icon (find in files, find/replace)

Regarding the preference behavior:

The "Color theme" dropdown was on Light by default, not Automatic (as it presumably should be if we take @ccordoba12 's suggestion to behave as Rstudio does at face value).
"Color theme" should read "UI Theme", as "Color theme" is rather confusing while "UI theme" is more clear as to what it affects".
It appears that in terms of asking for a restart, "Dark" is behaving as "Automatic", "Light" is behaving as "Dark", "Automatic" is correct, and there is no setting that behaves as "Light" should. However, their actual effects (once restarted) are correct.

Full behavior description:

The behavior was correct when I switched "Color theme" to "Automatic"; I was prompted to restart when switching to a dark syntax highlighting scheme when the current UI theme was light, while I was not prompted when switching to a light-BG scheme.

However, when "color theme" was set to "Light", the behavior was wrong. When I changed the theme from "Spyder" to "Spyder Dark", I was still presented with a dialog saying that Spyder needed to restart, even though "Color theme" was set to "Light" (and the current UI theme was light). Furthermore, I was even prompted to restart when switching to a light-BG scheme, despite the dropdown, my current UI theme, the selected "Scheme" setting, and the and current syntax highlighting scheme all being light.

Conversely, when set to "Dark", I was not prompted to restart when changing the "Color theme" for the current syntax highlighting scheme, nor when then changing the "Scheme" to a light-BG one, while I was prompted to restart when changing to a dark BG-one.

CAM-Gerlach · 2018-10-13T17:47:02Z

spyder/preferences/configdialog.py

@@ -1171,6 +1174,16 @@ def setup_page(self):
                                                       'selected')
        self.schemes_combobox = schemes_combobox_widget.combobox

+


Extra linebreak here

CAM-Gerlach · 2018-10-13T17:48:52Z

spyder/preferences/configdialog.py

+            self.main.editor.apply_plugin_settings(['color_scheme_name'])
+            if self.main.ipyconsole is not None:
+                self.main.ipyconsole.apply_plugin_settings(
+                                                        ['color_scheme_name'])


Indent looks offf; if its hanging it should be 4 spaces to the right of the previous line.

CAM-Gerlach · 2018-10-13T17:49:04Z

spyder/preferences/configdialog.py

+                                                        ['color_scheme_name'])
+            if self.main.historylog is not None:
+                self.main.historylog.apply_plugin_settings(
+                                                        ['color_scheme_name'])


See above indent comment.

CAM-Gerlach · 2018-10-13T17:50:01Z

spyder/utils/icon_manager.py

 import qtawesome as qta

+# Main color for a dark theme
+MAIN_LIGHT_COLOR = 'white'


This could be described more clearly, since Main color for a dark theme == Main Light Color is confusing. I suggest describing it as a "Foreground color for a dark theme" instead, and consider renaming MAIN_LIGHT_COLOR something like DARK_THEME_FG_COLOR (or LIGHT COLOR) instead.

I think the description I putted is missliding. I will delete it. In that way ´MAIN_LIGHT_COLOR´ is more general concept and maybe could be thought as a property to make the icons look clear or 'light' (in the sens that they contrast with a dark background).

Can't we use this variable to define a single icons dictionary?

In that way ´MAIN_LIGHT_COLOR´ is more general concept and maybe could be thought as a property to make the icons look clear or 'light' (in the sens that they contrast with a dark background).

Okay, sure—that works.

Can't we use this variable to define a single icons dictionary?

It could be possible, then the validations in the icon function will be in the top when defining the variable which then should be called something like MAIN_COLOR.

CAM-Gerlach · 2018-10-13T20:56:55Z

@dalthviz I tested the above before your latest commit of the font color refactor, but just to confirm, a quick retest indicates that all of the above comments/issues still apply, FYI.

Also, just curious, how come you use periods in your commit messages? I thought standard convention dictated they were to never be used, and the first line should be kept at or under 70-74 characters (Github cuts them off at 74)?

ccordoba12 · 2018-10-13T21:00:12Z

Thanks @CAM-Gerlach for your review. My answers:

Many comboboxes with backgrounds (path bar, pylint, profiler, find/replace) had the text cut off

I think this needs to be solved in QDarkStyle, so please report it there.

The background color of the Editor and Console pane, as well as the syntax color scheme preview in preferences, does not change as it should with the "Background" color of the syntax highlighting theme, but rather only the background surrounding the actual text characters

I was expecting this. Please open an issue about it.

The "Greedy completion" section in IPython console > Advanced Settings was cut off

Open a new issue about it with a screenshot because I don't understand what you mean.

Greyed-out text should be lighter, since its almost impossible to even read now; also, links could be a little lighter as well.

Open an issue in QDarkStyle about it.

Places that need to be "darkified"

Sure, that's why the title says Initial support not Full support. Please remove those places from your comment and open a new issue about them.

Places that still have black/dark text

Please remove those from your comment and add them to the same issue as the one above.

Icons that need to be white/light grey

Please do the same as with the two previous two comments.

The "Color theme" dropdown was on Light by default, not Automatic

@dalthviz, please fix that in this PR.

"Color theme" should read "UI Theme"

UI is a term only understood by us, computer geeks. @dalthviz, please rename it to User interface theme.

It appears that in terms of asking for a restart, "Dark" is behaving as "Automatic", "Light" is behaving as "Dark", "Automatic" is correct, and there is no setting that behaves as "Light" should. However, their actual effects (once restarted) are correct.

@dalthviz, pleas review how you implemented this. The logic is the following:

Automatic: It needs to prompt a restart when users move from light editor scheme to dark editor scheme and vice-versa, but not when moving from dark editor scheme to another dark one, or light scheme to another light one.
Dark: It needs to remain in the dark UI scheme irregardless of whatever editor scheme is selected by the user. It needs to prompt a restart when the user moves from Light UI scheme to Dark UI and vice-versa.
Light: The same as Dark.

ccordoba12 · 2018-10-13T21:03:17Z

@CAM-Gerlach, so the purpose of this PR is to add QDarkStyle as a new dep and implement the logic of switching between light and dark UI themes. All the remaining stuff will be covered later.

…ombinatons.

CAM-Gerlach · 2018-10-13T21:15:40Z

so the purpose of this PR is to add QDarkStyle as a new dep and implement the logic of switching between light and dark UI themes. All the remaining stuff will be covered later.

@ccordoba12 Okay, thanks. From the title, I inferred it would be preliminary, but I didn't see anywhere that it actually stated what was in scope and what wasn't for this round, so I figured I'd mention everything in one central place and then separate off what wouldn't be covered here, per your request.

Should we create an Epic or something to keep track of all of this? I made the stuff checkboxes so it would be easy to cut and paste into something like that.

ccordoba12 · 2018-10-13T21:18:57Z

Should we create an Epic or something to keep track of all of this?

Sure, please create one and:

Reference there the QDarkStyle issues you open.
Add there the places and icons that need to be fixed.

Thanks!

CAM-Gerlach · 2018-10-13T21:19:42Z

Will do! That's all in work now.

ccordoba12 · 2018-10-13T21:21:08Z

but I didn't see anywhere that it actually stated what was in scope and what wasn't for this round

That's something I talked to @dalthviz privately, sorry.

dalthviz · 2018-10-13T21:33:05Z

Also, just curious, how come you use periods in your commit messages? I thought standard convention dictated they were to never be used, and the first line should be kept at or under 70-74 characters (Github cuts them off at 74)?

@CAM-Gerlach I'm used to put periods at the end of what I'm typing (although sometimes I don't use them XD). But overall my commit messages could be improved of course. As an example, my last commit hahaha

CAM-Gerlach · 2018-10-13T22:43:18Z

@ccordoba12 @dalthviz What do you think about my preview suggestion, based on your own affinity for Rstudio's system (which this in turn is based off):

We could take that a step further, call [the syntax coloring] preference pane "Themes", and move the font and window theme/icon theme choices there as well like Rstudio has, since they're also directly theme-related.

This would put everything related to UI and syntax themeing in one place, since we've already moved the UI theme there.

Also, a bug related to the preferences pane under direct consideration in this PR: A missing portion of the bounding box where the title used to be:

ccordoba12 · 2018-10-13T23:14:13Z

Also, a bug related to the preferences pane under direct consideration in this PR: A missing portion of the bounding box where the title used to be

It also looks like a QDarkStyle issue.

ccordoba12 · 2018-10-13T23:17:22Z

This would put everything related to UI and syntax themeing in one place, since we've already moved the UI theme there

That's not work for this PR, so please open a new issue to discuss about it.

CAM-Gerlach · 2018-10-13T23:18:09Z

It also looks like a QDarkStyle issue.

Do you know why its just on that section, and not any other one? All of the sections have left-aligned text in the standard theme that is moved to centered in the dark theme, but there's nothing obvious different about that one that would make it behave like that while none of the others do. What should I tell the QDarkStyle people?

That's not work for this PR, so please open a new issue to discuss about it.

Okay, sure.

ccordoba12 · 2018-10-13T23:31:24Z

Do you know why its just on that section, and not any other one?

I thought it was only on all sections. @dalthviz, please try to figure that one out.

CAM-Gerlach · 2018-10-13T23:38:37Z

Directly related to this issue, Spyder theme (if that's what we're going to call it) should go above the Syntax highlighting scheme, since its higher-level in the UI (and as Rstudio has it), and the buttons below relate only to the syntax highlighting scheme, not the UI scheme. Also, the label Scheme is now ambiguous, and should similarly be renamed to "Syntax theme``.

dalthviz · 2018-10-14T13:07:57Z

@ccordoba12 @CAM-Gerlach I think the base funtionality is complete. About the naming of the preferences it would be nice to have a final decision. For me it could be something like Interface theme (as CAM said) and Syntax scheme (for the theme and syntax scheme comboboxes respectively). Maybe we could also change the name of the config page to Interface and Syntax coloring or something like that (to make reference to the new config for the theme).

ccordoba12

@dalthviz, this is looking really good!

My comments:

Please change color_theme for ui_theme wherever necessary.
Please change MAIN_COLOR for MAIN_FG_COLOR (per @CAM-Gerlach's suggestion).

ccordoba12 · 2018-10-14T16:31:12Z

spyder/config/main.py

@@ -465,6 +465,7 @@
              }),
            ('color_schemes',
             {
+              'color_theme': 'automatic',


Please change this option name to ui_theme

ccordoba12 · 2018-10-14T16:31:49Z

spyder/app/mainwindow.py

@@ -553,6 +556,16 @@ def create_toolbar(self, title, object_name, iconsize=24):
    def setup(self):
        """Setup main window"""
        self.debug_print("*** Start of MainWindow setup ***")
+        self.debug_print("  ..theme configuration")
+        color_theme = CONF.get('color_schemes', 'color_theme')


color_theme -> ui_theme

ccordoba12 · 2018-10-14T16:32:33Z

spyder/preferences/configdialog.py

@@ -1171,17 +1171,29 @@ def setup_page(self):
                                                       'selected')
        self.schemes_combobox = schemes_combobox_widget.combobox

-        # Layouts
-        vlayout = QVBoxLayout()
+        color_themes = ['Automatic', 'Light', 'Dark']


color_themes -> ui_themes

ccordoba12 · 2018-10-14T16:33:33Z

spyder/utils/icon_manager.py

+    Get main color for the icons based on the color theme
+    and color scheme currently selected.
+    """
+    color_theme = CONF.get('color_schemes', 'color_theme')


color_theme -> ui_theme

ccordoba12 · 2018-10-14T16:34:11Z

spyder/utils/icon_manager.py

+    return main_color
+
+
+MAIN_COLOR = get_main_color()


MAIN_COLOR -> MAIN_FG_COLOR

ccordoba12 · 2018-10-14T16:34:46Z

spyder/utils/icon_manager.py

 import qtawesome as qta


+def get_main_color():


get_main_color -> get_foreground_color

ccordoba12 · 2018-10-14T16:35:33Z

spyder/utils/icon_manager.py

+    color_theme = CONF.get('color_schemes', 'color_theme')
+    color_scheme = CONF.get('color_schemes', 'selected')
+    if color_theme == 'dark':
+        main_color = 'white'


main_color -> foreground_color

ccordoba12 · 2018-10-14T16:36:13Z

spyder/preferences/configdialog.py

-        # Layouts
-        vlayout = QVBoxLayout()
+        color_themes = ['Automatic', 'Light', 'Dark']
+        color_theme_choices = list(zip(color_themes,


color_theme_choices -> ui_theme_choices

ccordoba12 · 2018-10-14T16:36:42Z

spyder/preferences/configdialog.py

+        color_theme_choices = list(zip(color_themes,
+                                       [color_theme.lower()
+                                        for color_theme in color_themes]))
+        color_theme_combo = self.create_combobox(_('User interface theme:'),


color_theme_combo -> ui_theme_combo

ccordoba12 · 2018-10-14T16:37:10Z

spyder/preferences/configdialog.py

-        self.update_combobox()
-        self.update_preview()
+        color_scheme = self.get_option('selected')
+        color_theme = self.get_option('color_theme')


color_theme -> ui_theme

CAM-Gerlach · 2018-10-14T17:47:44Z

For me it could be something like Interface theme (as CAM said) and Syntax scheme (for the theme and syntax scheme comboboxes respectively).

I really like that, has a nice ring to it :) Only problem is that Interface theme: is just ~2-4 characters too long to fit on one line with a dropdown list as is, but you could just increase the left panel width by that much (and perhaps reduce the dropdown list width by one character), since users can always resize the window if they need more preview pane space.

Maybe we could also change the name of the config page to Interface and Syntax coloring or something like that (to make reference to the new config for the theme).

Too long, IMO, and that's coming from me [laughs in English] :) In #8071 , based off my earlier comments here, I suggested renaming it "Themes" after moving the other theme-related settings (fonts, Qt window theme, icon theme) to this pane as well, but "Colors and Themes" could be a more descriptive alternative.

ccordoba12 · 2018-10-14T20:14:44Z

@CAM-Gerlach, please add more comments to the Epic issue and not here.

ccordoba12

Thanks a lot @dalthviz!! This is really great work!

ccordoba12 · 2018-10-15T22:07:42Z

We'll close issue #2350 when we solve all issues referenced by @CAM-Gerlach in the epic he opened.

Initial support for Spyder's dark theme.

caece8a

dalthviz added the User Interface (UI) label Oct 6, 2018

dalthviz added this to the v4.0beta2 milestone Oct 6, 2018

dalthviz self-assigned this Oct 6, 2018

dalthviz requested a review from ccordoba12 October 6, 2018 15:53

Update load_style method.

2a3f3fe

Merge branch 'master' into fixes_issue_2350

e3353d3

ccordoba12 reviewed Oct 7, 2018

View reviewed changes

dalthviz and others added 3 commits October 12, 2018 22:41

Merge branch 'master' into fixes_issue_2350

f7c88c1

Use constant for light color in the icon_manager.

009435b

DarkTheme: Initial config of dark theme option using the selected col…

6f5984e

…or scheme.

dalthviz changed the title ~~PR: Initial support for Spyder's dark theme~~ PR: [WIP] Initial support for Spyder's dark theme Oct 13, 2018

DarkTheme: refactor of the function to check font color.

deaeeaa

dalthviz changed the title ~~PR: [WIP] Initial support for Spyder's dark theme~~ PR: Initial support for Spyder's dark theme Oct 13, 2018

CAM-Gerlach reviewed Oct 13, 2018

View reviewed changes

DarkTheme: validate and handle restarts for theme and color schemes c…

57ed7d5

…ombinatons.

DarkTheme: Improvements in icons's main color handling

c812580

CAM-Gerlach mentioned this pull request Oct 13, 2018

Text cut off and background color not full width when using comboboxes with a BG color ColinDuquesnoy/QDarkStyleSheet#111

Closed

dalthviz changed the title ~~PR: Initial support for Spyder's dark theme~~ PR: [WIP] Initial support for Spyder's dark theme Oct 13, 2018

CAM-Gerlach mentioned this pull request Oct 13, 2018

Extremely difficult to read "disabled"/"grayed-out" text and embedded hyperlinks due to low contrast ColinDuquesnoy/QDarkStyleSheet#112

Closed

ccordoba12 mentioned this pull request Oct 13, 2018

Spyder dark theme overrides background color set in syntax highlighting theme, except behind text #8069

Closed

CAM-Gerlach mentioned this pull request Oct 13, 2018

Explanatory text for Greedy Completion preferences option cut off only in dark theme #8070

Closed

This was referenced Oct 13, 2018

Centralize remaining theme-related options (like Rstudio does) under a renamed "Themes" pref pane #8071

Closed

Fully implement Spyder's new dark theme #8068

Closed

DarkTheme: refactor of apply_settings. Fix QGroupBox bound

c9f26fd

dalthviz force-pushed the fixes_issue_2350 branch from e53d719 to c9f26fd Compare October 14, 2018 12:52

dalthviz changed the title ~~PR: [WIP] Initial support for Spyder's dark theme~~ PR: Initial support for Spyder's dark theme Oct 14, 2018

ccordoba12 reviewed Oct 14, 2018

View reviewed changes

DarkTheme: Rename of the theme setting and foreground color constant

9ce1c0a

dalthviz force-pushed the fixes_issue_2350 branch from 21178bf to 9ce1c0a Compare October 14, 2018 19:09

CAM-Gerlach mentioned this pull request Oct 14, 2018

Toolbar icons are too large particularly in dark theme #8075

Closed

DarkTheme: Improve layout of comboboxes for theme and scheme

974c2f4

CAM-Gerlach mentioned this pull request Oct 15, 2018

Consider making the dark theme (and corresponding Spyder Dark syntax scheme) the default in Spyder 4 #8080

Closed

ccordoba12 approved these changes Oct 15, 2018

View reviewed changes

ccordoba12 merged commit bdb7543 into spyder-ide:master Oct 15, 2018

ccordoba12 mentioned this pull request Dec 23, 2018

Spyder的HELP界面主题没法变成黑色 #8483

Closed

		@@ -1171,6 +1174,16 @@ def setup_page(self):
		'selected')
		self.schemes_combobox = schemes_combobox_widget.combobox

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

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

Conversation

dalthviz commented Oct 6, 2018 • edited by ccordoba12 Loading

Pull Request Checklist

Developer Certificate of Origin Affirmation

Description of Changes

Issue(s) Resolved

pep8speaks commented Oct 6, 2018 • edited Loading

Comment last updated on October 14, 2018 at 21:50 Hours UTC

ccordoba12 commented Oct 6, 2018

ccordoba12 left a comment • edited Loading

Choose a reason for hiding this comment

ccordoba12 Oct 7, 2018 • edited Loading

Choose a reason for hiding this comment

CAM-Gerlach commented Oct 11, 2018 • edited Loading

ccordoba12 commented Oct 11, 2018

CAM-Gerlach commented Oct 11, 2018 • edited Loading

dalthviz commented Oct 13, 2018

CAM-Gerlach left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dalthviz Oct 13, 2018 • edited Loading

Choose a reason for hiding this comment

CAM-Gerlach commented Oct 13, 2018

ccordoba12 commented Oct 13, 2018

ccordoba12 commented Oct 13, 2018

CAM-Gerlach commented Oct 13, 2018 • edited Loading

ccordoba12 commented Oct 13, 2018 • edited Loading

CAM-Gerlach commented Oct 13, 2018

ccordoba12 commented Oct 13, 2018

dalthviz commented Oct 13, 2018

CAM-Gerlach commented Oct 13, 2018 • edited Loading

ccordoba12 commented Oct 13, 2018

ccordoba12 commented Oct 13, 2018

CAM-Gerlach commented Oct 13, 2018 • edited Loading

ccordoba12 commented Oct 13, 2018 • edited Loading

CAM-Gerlach commented Oct 13, 2018 • edited Loading

dalthviz commented Oct 14, 2018

ccordoba12 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CAM-Gerlach commented Oct 14, 2018 • edited Loading

ccordoba12 commented Oct 14, 2018

ccordoba12 left a comment

Choose a reason for hiding this comment

ccordoba12 commented Oct 15, 2018

dalthviz commented Oct 6, 2018 •

edited by ccordoba12

Loading

pep8speaks commented Oct 6, 2018 •

edited

Loading

ccordoba12 left a comment •

edited

Loading

ccordoba12 Oct 7, 2018 •

edited

Loading

CAM-Gerlach commented Oct 11, 2018 •

edited

Loading

CAM-Gerlach commented Oct 11, 2018 •

edited

Loading

CAM-Gerlach left a comment •

edited

Loading

dalthviz Oct 13, 2018 •

edited

Loading

CAM-Gerlach commented Oct 13, 2018 •

edited

Loading

ccordoba12 commented Oct 13, 2018 •

edited

Loading

CAM-Gerlach commented Oct 13, 2018 •

edited

Loading

CAM-Gerlach commented Oct 13, 2018 •

edited

Loading

ccordoba12 commented Oct 13, 2018 •

edited

Loading

CAM-Gerlach commented Oct 13, 2018 •

edited

Loading

CAM-Gerlach commented Oct 14, 2018 •

edited

Loading