From bfa79e579e1afd27962acdc9ecef072587d7be0c Mon Sep 17 00:00:00 2001
From: Alan Greene <github.com@alangreene.net>
Date: Thu, 29 Apr 2021 14:29:49 +0100
Subject: [PATCH] Add experimental support for dark mode

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)
---
 src/index.js          |  8 +++++++-
 src/scss/_carbon.scss | 22 +++++++++++++++++++---
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/index.js b/src/index.js
index c6f62cadf..4151b5042 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Tekton Authors
+Copyright 2019-2021 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -11,6 +11,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 /* istanbul ignore file */
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
@@ -32,6 +33,11 @@ const store = configureStore({ webSocket });
 
 store.dispatch(setLocale(navigator.language));
 
+const theme = localStorage.getItem('tkn-theme');
+if (['dark', 'system'].includes(theme)) {
+  document.body.classList.add(`tkn--theme-${theme}`);
+}
+
 ReactDOM.render(
   <Provider store={store}>
     <App onUnload={closeSocket} />
diff --git a/src/scss/_carbon.scss b/src/scss/_carbon.scss
index 0478391b1..e82a485f3 100644
--- a/src/scss/_carbon.scss
+++ b/src/scss/_carbon.scss
@@ -24,13 +24,29 @@ $feature-flags: (
 );
 
 @import '~@carbon/themes/scss/themes';
+@import '~carbon-components/scss/globals/scss/component-tokens';
+@import '~carbon-components/scss/components/notification/tokens';
+@import '~carbon-components/scss/components/tag/tokens';
 
-:root {
+:root, .tkn--theme-light {
   @include carbon--theme($carbon--theme--g10, true);
 }
 
-body.tkn--dark-theme {
-  @include carbon--theme($carbon--theme--g90, true);
+@mixin tkn--theme-dark {
+  @include carbon--theme($carbon--theme--g90, true) {
+    @include emit-component-tokens($notification-colors);
+    @include emit-component-tokens($tag-colors);
+  };
+}
+
+.tkn--theme-dark {
+  @include tkn--theme-dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  .tkn--theme-system {
+    @include tkn--theme-dark;
+  }
 }
 
 @import '~carbon-components/scss/globals/scss/vars';