Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add experimental support for dark mode #2018

Merged
merged 1 commit into from
May 5, 2021

Conversation

AlanGreene
Copy link
Member

@AlanGreene AlanGreene commented May 4, 2021

Changes

#1713

Add experimental support for enabling dark mode display of the
Dashboard UI. This doesn't affect the header/nav which are already
using a dark presentation, but updates the rest of the UI to adopt
a dark look and feel using Carbon's gray 90 theme.

For this initial version, dark mode can be enabled by setting a flag
in local storage, e.g. localStorage.setItem('tkn-theme', 'dark')

Supported values are:

  • light which is the default and current theme
  • dark which enables the dark theme
  • system which enables/disables dark theme according to the user's
    OS settings (uses the prefers-color-scheme: dark media query)

Preview:
image

There's some remaining work to test contrast etc. for accessibility before promoting this from experimental,
as well as deciding how (or if?) this should be configured by the user in the UI.

Submitter Checklist

These are the criteria that every PR should meet, please check them off as you
review them:

See the contribution guide
for more details.

@tekton-robot tekton-robot added do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. size/L Denotes a PR that changes 100-499 lines, ignoring generated files. labels May 4, 2021
@skaegi
Copy link
Contributor

skaegi commented May 4, 2021

/approve

@tekton-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: skaegi

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@tekton-robot tekton-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label May 4, 2021
Add experimental support for enabling dark mode display of the
Dashboard UI. This doesn't affect the header/nav which are already
using a dark presentation, but updates the rest of the UI to adopt
a dark look and feel using Carbon's gray 90 theme.

For this initial version, dark mode can be enabled by setting a flag
in local storage, e.g. `localStorage.setItem('tkn-theme', 'dark')`

Supported values are:
- `light` which is the default and current theme
- `dark` which enables the dark theme
- `system` which enables/disables dark theme according to the user's
  OS settings (uses the `prefers-color-scheme: dark` media query)
@AlanGreene AlanGreene force-pushed the experimental_darkmode branch from e3fe072 to 38e2717 Compare May 5, 2021 09:39
@tekton-robot tekton-robot added size/M Denotes a PR that changes 30-99 lines, ignoring generated files. and removed size/L Denotes a PR that changes 100-499 lines, ignoring generated files. labels May 5, 2021
@briangleeson
Copy link
Contributor

/lgtm

@tekton-robot tekton-robot added the lgtm Indicates that a PR is ready to be merged. label May 5, 2021
@AlanGreene AlanGreene marked this pull request as ready for review May 5, 2021 09:50
@tekton-robot tekton-robot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label May 5, 2021
@tekton-robot tekton-robot merged commit bfa79e5 into tektoncd:main May 5, 2021
@AlanGreene AlanGreene deleted the experimental_darkmode branch May 5, 2021 09:58
@AlanGreene AlanGreene mentioned this pull request May 28, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. lgtm Indicates that a PR is ready to be merged. size/M Denotes a PR that changes 30-99 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants