Dashboard: Design dark theme color palette

[danielromlein]

Background

As part of the Angular migration (#3152), a dark theme is being introduced for Dashboard. This is all custom CSS in one file, and will make it easy to customize Dashboard's color scheme – a feature requested in #1657.

A possible use case for this custom theming would be to distinguish dev / staging / prod environments by color-coding them.

Relevant issues:

• #2618
• #2417
• #1938

Goal

The current dark theme has not had design attention, and as a result 1) Is not aligned with the Kubernetes brand, and 2) Has not been assessed in terms of color connotation (e.g. orange = warning) or accessibility (e.g. contrast). We would like to address these with a comprehensive color palette redesign that identifies key color(s) that can be swapped out to distinguish between Dashboard instances.

[danielromlein]

@maciaszczykm @konryd PTAL and see if this makes sense to you.

[maciaszczykm]

@danielromlein It makes sense but unfortunately there are no volunteers with their ideas yet :) Perhaps you can take a look in free time?

[danielromlein]

@Stritty want to post here anything you think is ready for feedback?

[maciaszczykm]

@danielromlein @stritty Do you have any updates? Migration is finally going forward so it would be nice to change this before release.

[stritt]

Finally got the angular dev build working thanks @maciaszczykm I will have updates for this shortly

[maciaszczykm]

Any update?

[stritt]

Updated styling to be on brand and WCAG accessible, you can see hover color of a card on the 'hello' cron job. Let me know what you guys think and I will go in and make any necessary changes

[danielromlein]

I think this is looking awesome @stritt. Taking a cue from Mojave, I think if the top bar were lighter it would help the blue bar across look less jarring:

Right now I feel like the two dark sections are sort of isolated and my eye is distracted by the top bar.