Dashboard: Add theming support

[eddycharly]

This issue tracks the addition of theming support to the Tekton Dashboard.

Right now, the Tekton Dashboard uses a somewhat dark theme, it would be nice to be able to switch between light and dark themes.
Ideally, the theme chosen by the user should be recorded so that the Dashboard always show the same theme when started.

There was no previous work around this feature but i'm sure @AlanGreene will have some helpful ideas.

[AlanGreene]

The Carbon Design System which provides the base components used by the Dashboard does not currently have full theme support, not all components are fully using the Carbon colour tokens and there are issues around dynamically switching themes. The theme is built into the component styles and not easily separated. We're using Gray 10 with a Gray 90 side nav (one of the components that doesn't currently have proper support for themeing).

There's some work in progress / planned by the Carbon developers to include improved theme support for the next major release, Carbon 11. There's some experimental support today for CSS custom properties but I'm not sure if that's stable enough for production use yet.

[AlanGreene]

One of the Carbon issues tracking related changes: https://github.com/carbon-design-system/carbon/issues/6223

[tekton-robot]

Issues go stale after 90d of inactivity.
Mark the issue as fresh with /remove-lifecycle stale with a justification.
Stale issues rot after an additional 30d of inactivity and eventually close.
If this issue is safe to close now please do so with /close with a justification.
If this issue should be exempted, mark the issue as frozen with /lifecycle frozen with a justification.

/lifecycle stale

Send feedback to tektoncd/plumbing.

[06kellyjac]

/remove-lifecycle stale

Theming is still important

[AlanGreene]

https://github.com/tektoncd/dashboard/pull/2016 introduces the foundational work required to support theming (CSS custom properties), and includes some previews of how things could look based on our current design token use.

More work required to complete this but it should be a lot simpler for someone to pick up once that PR is merged.

[AlanGreene]

Dark mode is available as an experimental feature since v0.17.0 or nightly builds since 2021/05/05: https://github.com/tektoncd/dashboard/pull/2018

It can be enabled by setting a flag in the browser's localStorage: localStorage.setItem('tkn-theme', 'dark')
Alternatively, to respect the system light/dark theme settings set the value as follows: localStorage.setItem('tkn-theme', 'system')

Refresh the page to see the selected theme take effect.

Remaining work:

• audit colour token usage to ensure correct semantic use, and display on both light and dark theme
• replace any remaining hardcoded colours with Carbon colour tokens
• review colour contrast for accessibility (minimum WCAG AA compliance, i.e. 4.5:1)

Some examples of areas to improve in dark mode:

• link colour on tables, maybe $link-01
• placeholder text in form elements
• container of YAML tab on resource details page is same colour as page background, possibly wrong token used
• label tags on resource details page (maybe remove the additional CSS custom properties for the tag component)

The above should also be checked on the default light theme of course.

We also need to decide:

• should we switch from the current default 'light' theme to using 'system' (i.e. reflect the OS settings for light/dark theme)?
• should there be some UI control to switch between the available options? If so, would this need a new settings page (are we planning additional settings in future?), could it be added to the about page, or maybe put it in the page header (probably not)?