Make chart background color darker (dark theme)

[thefinaljob]

Changed the code to make the background color darker for the chart. It is now a shade of dark blue.

Contributes towards fixing #282

[MatthewKhouzam]

Hi thefinaljob,

thanks for the patch!

The commit message is kind of unclear. this changes the background color in light and dark theme
Light theme passes from https://duckduckgo.com/?q=color+picker+%23f4f7fb&ia=answer to https://duckduckgo.com/?q=color+picker+%23333f52&ia=answer

I find this not pretty. Maybe just change the dark one?

[MatthewKhouzam]

Here's a quick helper for commit messages.

https://www.freecodecamp.org/news/writing-good-commit-messages-a-practical-guide/

I am not always the best citizen on that front though.

Could look like this

Capitalized, short (50 chars or less) summary

More detailed explanatory text, if necessary. Wrap it to about 72
characters or so. In some contexts, the first line is treated as the
subject of an email and the rest of the text as the body. The blank
line separating the summary from the body is critical (unless you omit
the body entirely); tools like rebase can get confused if you run the
two together.

Write your commit message in the imperative: "Fix bug" and not "Fixed bug"
or "Fixes bug." This convention matches up with commit messages generated
by commands like git merge and git revert.

Further paragraphs come after blank lines.

• Bullet points are okay, too

• Typically a hyphen or asterisk is used for the bullet, followed by a
  single space, with blank lines in between, but conventions vary here

• Use a hanging indent

If you use an issue tracker, add a reference(s) to them at the bottom,
like so:

Resolves: #123

[ebugden]

Requested changes 🌿

• Include the issue that this contributes towards fixing (Make chart and filter field backgrounds a darker colour in dark theme #282) in the commit message and PR description
• For light theme: Change colour back to the the original theme background. The contrast was already good and low in the light theme before this proposed patch.
• For dark theme: Change colour to a neutral grey that is slightly lighter than the tab background (ex. #232323) (neutral grey: same values for red, green and blue). The tab background and the rest of the greys in the UI are often neutral. The chart background should be a shade of the tab background colour (same hue/saturation just different brightness)

If you want more details, you can check out the issue description #282. I just made some additions to clarify the requirements/motivation for the change.

The main goal of these changes is to decrease the contrast between the tab background and chart background. If you convert the colours to HSB you can see that the colour proposed in this PR has a higher difference in brightness with the tab background than the original grey (i.e. the colour proposed here increases the contrast rather than decreasing it).

Current background	Currently proposed background
Difference in Brightness (HSB) between chart and tab: ~13	Difference in Brightness (HSB) between chart and tab: ~20 (higher contrast with tab background than original grey)
Chart background: #3f3f3f Tab background: #1e1e1e	Chart background: #333f52 Tab background: #1e1e1e

---

Light theme should look like this:

[MatthewKhouzam]

@ebugden Could you illustrate that with light theme too? my main issue is that it looks bad with light theme.

[MatthewKhouzam]

Here's what it looks like in light theme.

[ebugden]

@MatthewKhouzam I agree the current changes look really bad in light theme. I just adjusted my change requests to make this more clear. I'm aiming for something like this for light and dark themes:

Current Light Theme	Proposed Adjusted Dark Theme
Difference in brightness (HSB) between chart and tab: ~2	Difference in brightness (HSB) between chart and tab: ~2
Chart background: #f4f7fb Tab background: #ffffff	Chart background: #232323 Tab background: #1e1e1e

[ebugden]

Requested changes:

• Update chartBackgroundColor in updateBackgroundTheme( ) as well. Right now when you switch to light theme and back to dark, it changes back to the light grey (see video below).
• Include the issue that this contributes towards fixing (Make chart and filter field backgrounds a darker colour in dark theme #282) in the commit message and PR description. This PR doesn't make the filter field darker so the issue shouldn't be closed when this PR is merged.
• Write commit title in imperative: "Make chart background color darker"
• Add signoff to commit
• Apply corrections by amending and force pushing the original commit instead of creating a new one. There should be just one commit in the PR. (Let me know if you want some help doing this!)

Thanks for updating the background colour! 🌼 I find this darker background to be less distracting.

Current background	🌈 PR Proposed background

---

Currently the chart background was only updated in the constructor not in updateBackgroundTheme( ). So when you switch to light theme and back to dark theme the colour is still the light grey (see 0:37 in the video):

TraceCompassTutorialTraces.Theia-Trace.Example.Application.-.Google.Chrome.2021-07-21.15-25-12.mp4

[MatthewKhouzam]

please squash the two patches... we can't have both merged. ;)

[MatthewKhouzam]

Hi... er... I think you passed from 2 patches to 0 patches. How is this PR empty. I'm confused.

[MatthewKhouzam]

WHooooooooooooo!

[MatthewKhouzam]

Wasn't there a light theme change too? I guess this is OK.

[ebugden]

Wasn't there a light theme change too? I guess this is OK.

No the light theme was good already. The goal of this change was to have lower contrast between the tab background and chart background in the dark theme (similar to the low contrast already in the light theme) (See #282).

The darker backgrounds in some of the light theme screenshots are because of an update bug that I think was fixed recently by @muddana-satish #407.

Here's what these changes look like in dark and light theme:

TraceCompassTutorialTraces.Theia-Trace.Example.Application.-.Google.Chrome.2021-07-23.11-57-06.mp4

[ebugden]

• Reference the issue Make chart and filter field backgrounds a darker colour in dark theme #282 in the commit message (instead of the PR Make chart background color darker (dark theme) #382) 🍰

One last change!

[ebugden]

Looks good to me! 🌵 @thefinaljob We can merge after approval from a second committer. I just sent the additional review request so it can take a little while.

[bhufmann]

Looks good to me. Thanks!

[IbrahimFradj]

Looks good to me, thank you.