Design color palette for variable explorer items (Dark and Light themes)

[juanis2112]

@isabela-pf I think there's only 12 different colors. You can find the current ones in the following link https://github.com/spyder-ide/spyder-kernels/blob/f4cd44c718cd04bcc2d8c23520adfd62b4a7184b/spyder_kernels/utils/nsview.py#L204

Here are some screenshots/gifs so you can see how it currently looks like in the dark theme: http://docs.spyder-ide.org/develop/variableexplorer.html

And here are some of the current light theme: http://docs.spyder-ide.org/variableexplorer.html

[isabela-pf]

Here’s my proposal for new variable explorer colors, each set tweaked to fit better with blended light and dark mode, respectively. I tried to emulate how the colors blend with the background in the pane when making these choices, but I’d love to have some feedback on how it actually looks (especially if any of the colors stand out).

Here are the colors listed again for easy copying: Light mode colors are #FF6700 #FFB000 #FFE600 #7FDD05 #00A585 #22BCF2 #1256CC #803AD0 #B568F2 #CC2782 #FF71BF #7EE8C7

Dark mode colors are #E11C1C #FF8A00 #88BA00 #2DB500 #3FC6F0 #107EEC #5C47E0 #7F27C5 #C88AFA #AF2294 #DB4D8E #38D4A4

[juanis2112]

Thanks for the palette suggestions! I tried them both and I really like them. Here are some screenshots of each theme with two different opacities (AlphaF = 0.4 and AlphaF = 0.5) respectively. I think the first one for each is the one that matches your proposal the most.

Light mode:

Dark mode:

[juanis2112]

@ccordoba12 and @isabela-pf let me know what you think about these.

[ccordoba12]

Thanks a lot for doing this @juanis2112! I really like screenshots 1 and 3.

[isabela-pf]

I agree, 1 and 3 (or AlphaF = 0.4) look correct to me and are more legible. Thank you for testing them out!

[CAM-Gerlach]

I suggest a few tweaks to the type -> color mapping to make more sense:

• Matching the colors to the default editor syntax highlighting scheme where practicable
• Picking related colors for related object types, in a logical progression
• Adjusting the types that have the same and different colors; for example the rarely used datetime.timedelta gets its own color, while the very commonly used but quite distinct np.array and pd.DataFrame get the same one

Specifically (going with the color names in order, since the hex codes differ between light and dark themes; the type names are those used in spyder_kernels.utils.nsview where they are currently defined):

Red: bool Yellow: NUMBER_TYPES [int, float, complex] Lime: TEXT_TYPES [str] Green: datetime.(date|time|datetime|timedelta) Cyan: list Blue: set Navy: tuple Indigo: dict Lavender: ndarray, MaskedArray, matrix Violet: DataFrame, Series, Index Magenta: Image Teal: custom class

[isabela-pf]

@CAM-Gerlach I’m in agreement with the idea of making the color choices significant and related to the type of variable. I made these color palettes by focusing on have enough distinct colors with similar contrast, so they should be able to be mapped to variables as makes sense. I don’t have the knowledge to make educated choices on what colors are best suited to what or what types of variables are used often (or not), so I’m happy to defer that to your advice.

For the first suggestion of matching the colors to the default editor syntax highlighting scheme, I understand why that could be a good plan (continuity between panes and clarifying the relationship between the editor and the pane), but I think it might create other problems. If it matches the default, users might expect it to continue matching even if they change editor themes. Or if they already have a different editor theme set, the connection might never be clear. Since I don’t think it’s feasible to support the many possibly editor themes, I don’t know if we want to set that expectation.

[CAM-Gerlach]

Sorry for the long delay in getting back to you, and thanks for your detailed response @isabela-pf . We all really appreciate your time helping making Spyder dramatically easier, more pleasant and more efficient to use.

For the first suggestion of matching the colors to the default editor syntax highlighting scheme,

Yup, excellent points. My initial idea was to base the choices more directly on the default syntax highlighting scheme, but in fact only numeric and strings are highlighted differently, so it ended up basically being the latter two priorities instead. Yellow was the proposed numeric color already in the example and made sense in the progression, so I left it, and a green or lime color for strings is common generally, including amongst most of the popular themes Spyder includes and also fit right in to the progression, so I used that as well. Other than that, the colors are just chosen to be related for related variables, in rough order of complexity/commonality.

[juanis2112]

We agree with rearranging colors per @CAM-Gerlach suggestion. Apart form that, this one is ready to go.