New palette for Spyder's UI

[juanis2112]

We need a new palette for Spyder's interface with new shades of blue and grey that work well together:

To keep:
-Dark blue from background
-Dark grey for most UI elements
-White for text and some icons

To change:
-Blue of selections/hover (Opacity or light grey)
-Blue in the help pane start page
-Blue tiny lines in the pane tabs
-Tooltips #2
-Blue in titles of help pane
-Green in help pane
Theme for help pane: https://bootswatch.com/darkly/

[isabela-pf]

I’ve been working a lot in the background trying to get this right so we can unblock some of other issues on this repo, but so far this has taken more experiments than I anticipated. Thanks for your patience.

A little review on the goals of creating a Spyder color system:

• Bring greater consistency to the UI for a better user experience
• Consolidate the many colors currently spread out in Spyder’s code base
• Create a formalized system of names to identify colors based on their use
• Provide a reference for people working on Spyder to know what is being used and what they should use
• Provide a range of color that provides lots of options for colors to be used together with accessible contrast ratios.
• Adjust existing colors to help them align better with the rest of the palette and have more options to be used accessibly

This isn’t quite done, but this is the direction I’m working on refining for dark mode. It’s a combination of ideas from the current (v4.1.5) UI’s colors, the Darkly palette’s hue and temperature, and Material Design’s value distribution. Since this is long and needs refinement, I can type out all the colors in the next round.

Here is how this might look in the UI. I’m showing it old mockups (because I already had them available to be recolored), so don’t worry about that part.

What needs to be reviewed:

• Colors (Does it look close to current Spyder? Does any part stand out? Are colors missing?)
• Categories they are grouped by
• Naming
• Anything that seems to be missing

Even though I’m starting my design with dark mode (since it is the default), I’m intentionally creating a color system that allows dark and light mode to reflect each other. What does that mean, though? This is the current scale of overall grey I’m experimenting with:

From this, I pull the dark mode base from the dark half of the scale and all dark mode accents (like text) from the opposite half. Light mode should just flip it. The main edits will come in play on the accent and info colors to make sure they have enough contrast to be used on the background colors.

With this color palette, I also think it is worth editing Spyder’s color icons to match the relevant colors we end up choosing.

[isabela-pf]

As promised, I've narrowed down the number of colors proposed for use in each section. It's still based on a larger color scale (updated color names now reflect that), but helps make the choice of what color to use where in the UI a little easier.

Meeting with some Spyder team members identified a few more areas of color I need to include next round, but I still wanted to update here with the more accurate version as I start testing it in the UI and with early contrast review.

List of colors:

How it might look in the UI:

[isabela-pf]

I'm back with another revision of colors. This version is more refined and complete since I looped in the work for colors to differentiate groups of info in Spyder (like the Variable Explorer #7). I also added a color option to the Background and Text sets since experimenting with them and comparing them to colors currently used in Spyder showed they were missing a pre-existing value. Broken down for easier access and documentation, here's the proposed colors for dark mode:

Background Colors

These are the colors that make up the majority of the Spyder UI since they are used to define the different sections of Spyder. All other elements colors rest on these.

Background color 1 #19232D
Background color 2 #262E38
Background color 3 #455364
Background color 4 #60798B
Background color 5 #9DA9B5

Text Colors

Text in Spyder should be in one of these colors. Remember to be cautious of color contrast; as the number for the background color and text color get larger, the color scale converges (Background color 5 and Text color 5 are the same) and those colors should not be used together.

Text color 1 #FFFFFF
Text color 2 #FAFAFA
Text color 3 #EEEEEE
Text color 4 #D9D8D8
Text color 5 #9DA9B5

Accent Colors

Used for highlighting areas of Spyder, usually areas that are selected or are being interacted with. To avoid splitting user focus, apply accent colors thoughtfully and sparingly.

Accent color 1 #3775A9
Accent color 2 #62BFFD
Accent color 3 #DAF0FF

Info Colors

These colors reinforce feedback or roles of parts of Spyder. They are also used sparingly.

Success colors represent a completed action or starting an action (like play icons).
Success color 1 #0A8B65
Success color 2 #20C997
Success color 3 #B0F5E1

Error colors represent errors or stopping an action.
Error color 1 #BD1200
Error color 2 #E74C3C
Error color 3 #FFC3BD

Warn colors report potential problems. They tend to be used the least.
Warn color 1 #DE6B2B
Warn color 2 #F39C12
Warn color 3 #FFDDA7

Icon colors

Matching other parts of the interface, these are the colors that icons in Spyder may use. Whenever possible, use single color icons especially in Icon color 1.

Icon color 1 #FAFAFA
Icon color 2 #3498DB
Icon color 3 #20C997
Icon color 4 #E74C3C
Icon color 5 #F39C12
Icon color 6 #37414F

Border colors

Border colors are used for details that divide the Spyder UI further. They overlap with background colors.

Border color 1 #455364
Border color 2 #455364
Border color 3 #54687A
Border color 4 #60798B
Border color 5 #788D9C

Group colors

This name could still be refined. These are a set of colors designed to provide variety and help sections of Spyder with several items be easier to tell apart. Originally designed for the Variable Explorer's variables, this can also be used to represent different types areas of Code Analysis of Projects as needed. These colors are meant to be used very sparingly and only grouped with others of its set. They should not be used for text as this set is not optimized for high contrast.

Group color 1 #E11C1C
Group color 2 #FF8A00
Group color 3 #88BA00
Group color 4 #2DB500
Group color 5 #3FC6F0
Group color 6 #107EEC
Group color 7 #5C47E0
Group color 8 #7F27C5
Group color 9 #C88AFA
Group color 10 #AF2294
Group color 11 #DB4D8E
Group color 12 #38D4A4

[isabela-pf]

As previously mentioned, I'm also trying to set up a color system that makes

1. a sustainable/adaptable approach
2. accessibility a priority and with a lot of options
3. a cohesive set within a single mode and between light and dark modes

I’m testing a way to represent the system’s relation to itself helpfully. As I mentioned having a full color scale earlier, here it is as a value grid. 0 is always black #000000 and 150 is always white #ffffff. Everything in between is a scale for a selected hue (gray, blue, green, red and orange). Numbers indicate value.

The group set is the exception, as it’s not a scale of a single hue. That’s why it isn’t shown in the grid.

Color names are separate from the scale numbers so that the colors can be switched out without changing the way a color is called in the code (so the definition only needs to be changed in one place in the future).

I didn’t create a full set for each color because it wasn’t needed and I thought it might become overwhelming with the number of choices (similar to how Spyder might feel now). Because I aligned the shorter scales with the same number system as the full grey scale, though, the sets can easily be extended if needed.

I’ve been trying to come up with a way to set the naming of the colors to help people evaluate the accessibility of a color combo (like what IBM’s Carbon does), but so far I have not found an effective way to implement it with the range of colors Spyder needs. I’m noting it because it’s something that I’d love to get more ideas on and return to.

[isabela-pf]

Another revision for the proposed color system! Here’s what’s changed in this round:

• Shifted lighter blues (110 and up) to be less cyan (per meeting feedback)
• Added highlight colors set (per meeting feedback)
• Lowered number of background, text, and border colors by one. This is likely the range that will be used, I’ve just experienced limits around having only four options in the past. With the addition of the highlight colors this might work fine since highlighted areas and disabled buttons are usually the places where I see the need for more contrast than four colors allows.
• Added a light mode proposal (finally 🎉). Many of the colors are the same, some are the inverse of their values (based on the color scales shown previously), and the group colors match what was agreed upon in Design color palette for variable explorer items (Dark and Light themes) #7.

Dark Mode

Light Mode

As usual, here’s how that might look in Spyder:

Dark mode

Light mode

I think light mode still needs some work to make sure it looks as good as it can, and that will reflect on dark mode too.

Most of the reversing of colors is working well enough in light mode, but the main problem I’m having is in the text colors. Specifically, I’m noticing that buttons would be set as having black text (like above) instead of the white text that I think is more legible and familiar (like below).

Since in dark mode buttons can use the same color as the rest of the main text, I have no section set up to separate the uses of text. So to keep the variable names the same across themes and switch definitions alone (what I think might be the easiest way to set up the system in Spyder), I would have to set up something besides just “text.” This can be done, but I’d appreciate feedback on

1. if that system of variables makes sense/seems like a good choice on the code side, and
2. if there is any desired system anyone else has in mind.

[juanis2112]

We need to add colors for matches in find and occurrences.

Cursor position word occurrences:

Matches in find widget:

[isabela-pf]

Here's the latest updates based on in-meeting feedback! Changes are as follows:

• Added inverse text class. These account for the buttons needing to be reversed-out text (white on a color) in both dark and light mode and ensure a smooth flip between modes.
• Updated accent and feedback colors for higher saturation and better contrast. The feedback asked specifically for lighter blues, but this is as close as we can get while keeping sufficient contrast. Making them more true blue blues should make them feel a little lighter. I mildly change the feedback colors to match.
• Added what I'm calling the find colors. They are the set of highlight colors for find and occurrences as requested in the above comment.
• Added back a fifth background color so the grey buttons (or other inverse areas of UI) can change modes accurately. They are intentionally the same color.

As usual, below is all that information color by color and mocked up.

Dark Mode

Light Mode

[ccordoba12]

• Email Qdarkstyle maintainer (Carlos, CC Juanita and Isabella).
• Lists of colors that we'll need to change in Qdarkstyle and colors that we need only in Spyder (Isabella)
• List with places in Spyder that define colors we use (Juanita and Isabella)

[isabela-pf]

When reviewing these last options in meetings, we discussed how Spyder’s colors pulls from multiple sources with the most important distinction (in code) being whether sets of colors are originally from to QDarkStyle or not.

First, below are the proposed colors categories that are closest to, derive from, and would need to replace current QDarkStyle.

• Background
• Text
• Inverse text
• Accent
• Border

The following colors are currently not tied to QDarkStyle and don’t necessarily need to be in the future.

• Info/Feedback
• Icon
• Highlight
• Find
• Group

[dpizetta]

Hi, just to document as you are planning to make some changes in the QDarkStyle, the main palette we use is here. The icons and images were recently improved too (of course not professionally as it is being planned now). So, thank you so much for those improvements.

[juanis2112]

After the meeting:

1. Open an issue on the Qdarkstyle repo linking this issue
2. Collecting all colors in Spyder as constants in a file called "palette.py"
3. PR adding the new colors to the main Qdarkstyle's file (with the new names) and adding the new file with the system scale file.
4. PR with markdown file with the color samples.

[isabela-pf]

I've updated the examples I showed in our last meeting and have them ready to be accessed as needed. There's still details to be worked out, but I gave my best guess of what it should look like based on current QDarkStyle.

• palette.py is updated based on what I think it might look like.
• colorsystem.py is a new file that lists all the constants that make up the color system.
• colorreference.md is the initial form of color docs that allows for easy reference for what they system has to offer and what default light and dark mode are. There might need to be other information, but I don't know what else makes sense yet.

Let me know if you have any feedback or questions. Hope this helps.

[isabela-pf]

It was brought to my attention in a meeting today that I never posted an image of the fully filled out color scales here! For reference, this is what the color system looks like in one non-code place. These will also be recorded in docs as they are implemented.

[isabela-pf]

Based on work in spyder #13963, there was a request to adjust light mode's info colors to make them look softer on the light background but still dark enough to meet contrast requirements for the light text they are often used with.

1 is the set of colors used for inverted text like in the issue, so that is what I will focus on for this post. If we decide to change these colors, I can shift the pattern for each of the constants accordingly.

Current light mode info colors (option 1)

In the full set this looks like

• Success color 1: green 40 #008760
• Error color 1: red 40 #D4140B
• Warn color 1: orange 40 #CE4B01

All these options pass with #FAFAFA text as is often used for buttons or other feedback. Moving the colors even one step lighter (green 50 #019D70, red 50 #DE321F, and orange 50 #E05E15) does not have enough contrast.

Light mode with dark text (option 2)

Personally, I prefer the light text on darker colors option, but since we can't get lighter with white text while keeping contrast I wanted to give another option. Here is the first color on the scales that is light enough to have contrast for #19232Dtext.

In the full set this looks like

• Success color 1: green 80 #44DEB0
• Error color 1: red 80 #F66657
• Warn color 1: orange 80 #FF993B

All my tests

In case you wanted to see the other options I tried, here's a quick overview of the combinations and whether they pass or fail standards for the text color they show for everything not already shown above.

[juanis2112]

Thanks @isabela-pf I don't really like the options with dark text so I would prefer option 1. I think that one looks great. What do you think @ccordoba12 and @steff456?

[juanis2112]

@isabela-pf and I met to discuss about the light theme and we have our first attempt. (Notice that since the code infraestructure is not yet implemented, there are things that are still dark that will not be). We will appreciate your feedback as soon as possible so we can continue iterating.

Main Window (with selection color of editor):

Menus with hover:

Tabs (hover and pressed states):

Files pane (hover and selected item) (Also notice color of hover for the small arrows)

Scrollbar hover:

Tooltip:

Preferences dialog (hover for buttons)

(@isabela-pf looking at this, we might need to move the hover color a bit more)

Hover color for "images" (Radio buttons)

Hover color for "images" (X in tabs)

Pane toolbars (hover and pressed states)

[dpizetta]

Some points to me:

Maybe the color for the menu selection can be darker like the line in the tab selection.

The dark tab (selected) calls me too much attention. Since it has a blue bar indicator we can keep the same color as the other ones. Also, this color reduces the contrast with the tab title. Using a lighter color in the selected tab also improves the blue bar contrast. Check the second image, in which you can't see the details (or if you have myopia like me). Another option is just a lighter tone like the status bar color. Same for scrollbars (chrome example).

The last one, maybe I'm wrong but I think these buttons have different colors/states (at least n1), it seems tricky - without Spyder to check right now.

All the other points seem amazing.

[juanis2112]

Thanks for your feedback @dpizetta I will try to address all your comments.

Maybe the color for the menu selection can be darker like the line in the tab selection.

This color has the same problem we have in dark mode which is that this menu selection color is the same one as it is in the editor so we have to find an equilibrium between dark enough for contrast in menus and light enough that it's not too strong on top of the editor's text.
This is how the editor selection would look if I use the color you are suggesting. I think it is a bit strong. However we are still working on the shades of blue since @ccordoba12 and @steff456 said in our last meeting that they would like to see a more "purplish" blue for all 5 shades of blue that we have.

The dark tab (selected) calls me too much attention. Since it has a blue bar indicator we can keep the same color as the other ones. Also, this color reduces the contrast with the tab title. Using a lighter color in the selected tab also improves the blue bar contrast. Check the second image, in which you can't see the details (or if you have myopia like me). Another option is just a lighter tone like the status bar color. Same for scrollbars (chrome example).

Because of how the system is defined, I think is not possible to make the selected tab and the other ones the same color without assigning two accent colors to the same color, or affecting the dark mode. Right @isabela-pf? Though we can try to see if we can bring these two colors closer to each other. @ccordoba12 suggested to use darker greys in general since he thinks the whole interface looks too light so maybe when making this change the selected tabs won't call that much attention.

The last one, maybe I'm wrong but I think these buttons have different colors/states (at least n1), it seems tricky - without Spyder to check right now.

The "Edit selected scheme" button is supposed to be a hover state. Though it looks very similar to the others so we need to work that out with @isabela-pf. The "Apply" button is deactivated so the text in it is lighter.

[juanis2112]

The following screenshots are to try darker greys in general in the interface. (In these ones, the shades of blue remain the same)

Hover: Pressed:

[juanis2112]

The following screenshots are to try darker greys in general in the interface and also darker blues to show you how they look.

[juanis2112]

@ccordoba12 and @steff456 please let me know if the interface looks dark enough with these new shades of grey. We will rework the tone of blue with @isabela-pf. She is already working on these colors in the color system.

[ccordoba12]

Thanks @juanis2112 for your work on this! I really like the new shades of grey!

What do @isabela-pf and you think about them? Are they ok for you too?

[isabela-pf]

Hello! I've been summoned again! Here's some replies.

Because of how the system is defined, I think is not possible to make the selected tab and the other ones the same color without assigning two accent colors to the same color, or affecting the dark mode. Right @isabela-pf? Though we can try to see if we can bring these two colors closer to each other.

It would definitely take some kind of workaround to make all the tabs the same color without touching dark mode. I don’t know that it is possible at all since that color is used in other places where I don’t think we would want them all to match. We can adjust colors though. This color has once again been a challenge because of its relationship to the various button states, so that’s how it became darker than some of the first passes.

The "Edit selected scheme" button is supposed to be a hover state. Though it looks very similar to the others so we need to work that out with @isabela-pf. The "Apply" button is deactivated so the text in it is lighter.

Noted! Thanks for catching this.

What do @isabela-pf and you think about them? Are they ok for you too?

I can make this work, but I’m not certain why we want the entire interface darker. Already some areas are starting to look lower contrast. The more we move toward a middle range of values, the harder I think it is going to be to find solutions for some of the problem areas we already have. For example, we already are having trouble with finding a selection color that works well on the light mode editor themes (such as the almost white default Spyder one here) compared to the middle grey menus. With the darker overall interface, the selection color still has to work for almost white to an even darker grey. I’m happy to do my best to make this work since I think it’s still possible to find a solution, I just want to warn that we may find ourselves compromising a lot along the way.

[ccordoba12]

I can make this work, but I’m not certain why we want the entire interface darker. Already some areas are starting to look lower contrast

I think you're right and sorry for pushing in that direction. This weekend I made the light theme work on the QDarkstyle repo, so I had a chance of seeing it live on my end:

And I think the theme looks pretty good already!