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';