Improve "Spyder Dark" syntax highlighting theme

Overview

Currently, the text colors of Spyder-Dark don’t look too good, mostly because the color choices were designed around the light background and don’t look good in the dark one. Furthermore, a major user desire on #2350 for their dark syntax theme to match the colors in the rest of the UI, etc. match those elsewhere in the UI so Spyder maintained a cohesive and seamless look. None of the built-in themes come even close, and have a number of related and other problems as well (full rationale reproduced below, for posterity’s sake and to keep #8266 cleaner).

Therefore, I’d recommend replacing the current Spyder Dark colors with a much better set tuned to its new dark UI theme. As a matter of fact, I already have such a theme that I have been using across many different editors (Spyder, Rstudio, Notepad++, etc) and a myriad of document types for the past year and a half, and only needed a few minor tweaks to strategically pick up the appropriate colors from the rest of the UI for the new Spyder Dark theme.

What do you think about that as a starting point for replacing the current colors of the Spyder dark theme? Feedback or suggestions about where we should iterate from here @jnsebgosselin ?

---

Details

The overall design is a sequence of red for keywords, orange for builtins, yellow for class and function definitions, light tan for instances, and finally white for variables and function calls, to create a conceptual hierarchy from fundamental constructs down to individual variables. Numeric literals are cyan and string literals are green for strings (to contrast well, and with colors matching their appearance in other themes and their conceptual “feel”), and comments are a desaturated mauve to look “lighter” than and clearly distinct from the rest of the executable content but still be very legible. Most of these colors also, incidentally, echo lighter versions of the ones used for the value column in the Variable Explorer.

Meanwhile, the background matches the pane background color, the side panels match the dark gray variable explorer name (and df index) column color (vs the standard foreground UI color) for a more subtle, modern look and better contrast with the line numbers, while the current line color matches the lighter gray in the type/size column and used for the background of objects, true/false in the VarExp Editors for something more visible at a glance that doesn’t overly distract or reduce contrast on the text too much.

The occurrence color is a lighter and more cyan version of the standard selection color, to balance contrast with the dark background and with the light text colors, and balance distinctness and conceptual linkage with the main selection color. The cell color is a slightly darker and purpler version of the background, to both increase contrast and subtly draw the eye to the active cell, while maintaining a conceptual link to the purple-colored cell separator comments and horizontal rules. Finally, the matched and unmatched paren and link colors are just modestly lighter variations of what they are in the current dark theme, for easier visibility.

Here is the full theme, which can be pasted in your config file:

custom-1/background = #1a222f
custom-1/currentline = #31363b
custom-1/currentcell = #17172d
custom-1/occurrence = #509ea5
custom-1/ctrlclick = #179ae0
custom-1/sideareas = #222b35
custom-1/matched_p = #0bbe0b
custom-1/unmatched_p = #ff4340
custom-1/normal = ('#ffffff', False, False)
custom-1/keyword = ('#ff5855', False, False)
custom-1/builtin = ('#ffc341', False, False)
custom-1/definition = ('#ffff7f', True, False)
custom-1/comment = ('#aaaaff', False, False)
custom-1/string = ('#50ff50', False, True)
custom-1/number = ('#88ffff', False, False)
custom-1/instance = ('#dcb886', False, True)
custom-1/name = Spyder-Dark-V2

---

Comparison Screenshots

I encourage you to test each theme for yourself, since these small screenshots obscure a lot of smaller issues with each theme and make it difficult to fully grasp how they’d look full-size and full-screen.

Current Spyder-Dark:

This Proposal:

Emacs:

Monokai:

Solarized Dark:

Zenburn:

---

Full Rationale (for reference)

• Their colors look really out of place with the Spyder UI’s own dark theme—Monokai and especially Zenburn are much too light and have a very warm hue, Zenburn is bright cyan, and Emacs is pure black, while the Spyder UI is a mild bluish-gray. None of the colors, synchronize with or even really complement the UI colors. Furthermore, in #2350 users have expressed a clear preference for a default Editor BG matching the standard panel BG.
• Each of the various themes have different contrast issues when implemented within Spyder’s dark UI theme, making some text in each (comments/cell names, line numbers, etc) very hard to read, even with a good display and glasses
• Most proper editors and IDEs I’m aware of usually come with their own stock syntax theme that meshes with their UI colors—e.g. Rstudio, VSCode, Atom…—all their dark themes look like a natural part of the UI and pick up many of the same colors, not a bolted-on, stylized third party choice
• The proposed theme (and even Spyder-Dark) looks much closer to the default dark themes of those other editors than any of the third-party ones, irrespective of UI color
• We want the default look to be as “neutral” as possible, so it attracts the widest range of users (who might be put off by more heavily stylized look one way or another) as well as doesn’t distract from the rest of the Spyder UI
• It gives users an easy and obvious way to switch back and forth between dark and light syntax themes, without having to manually flip through ones checking if they are dark or light, and prevents users being dissatisfied if they switch to the current bad Spyder Dark
• The low contrast overall of all the themes but Emacs can make text more difficult to read, particularly for users with colorblindness, vision or other accessibility problems and those with less expensive monitors. At least our default theme should be relatively accessible to a wide variety of users.
• Not picking one of the big, popular, stylized themes over the others as a default doesn’t get people riled up who prefer one of the others or think we’re favoring one
• If our own dark theme looks bad enough to not be considered for the default, why even bother including it without improving it?

[CAM-Gerlach]

I think your proposed changes are very similar to the Atom theme:

Interesting coincidence, I’d never even heard of Atom when I originally came up with them and I’ve never actually seen Atom’s native theme before you showed me that (since all I could readily find on their website was Atom skinned in various different colors). However, the basic design is indeed similar, although many of the specific color choices are different and Spyder’s syntax highlighting likely behaves somewhat differently, at least from what I can see there. Its a good sign that its similar, since we want to it be pretty comparable to other modern editors/IDEs (Atom, VSCode, etc).

so I’d prefer that one instead.

Are you saying we should switch full-on, or just those two colors? If the former, any particular reason why we should switch full-on, other than the green and yellow being too intense (which I’m happy to fix)? For starters, if you can point me to some canonical source of the default theme colors for everything, I can create a Spyder theme based on those basic colors for us to look at and compare. As it stands, despite some Googling I can’t find a clear resource that states them so I have no way of properly evaluating, never mind fully implementing this suggestion. Thanks!

This is because the green and yellow you’re using are too strong for my taste, whereas the Atom theme ones are lighter.

Sure. The above image was a JPEG and so the colors aren’t exact, but I could could measure them pretty closely with Photoshop and attempted to reproduce something similar in the current proposed theme. For the green, I dropped the saturation to near their lower value, and pushed the hues to something closer to their yellower tone. I didn’t reduce the brightness down to their level, since it became a little hard to read.

As for the yellow, theirs actually had a higher saturation than those here, but I dropped the latter even further as well as a modest reduction in the brightness close to theirs. I only made a more modest shift in the hue (theirs is much closer to orange) because as you can see in the above screenshot, it is quite difficult to distinguish between that and orange, especially if they weren’t right next to each other.

Let me know what you think:

[ccordoba12]

On a second thought, @dalthviz please work on top of the “Spyder dark” theme, i.e. don’t remove it or rename it to “One dark”.