diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index 1a467fc89fe..10ce27cb4d6 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -5,21 +5,13 @@
 const {opacityIncreaseKeyframes} = require('./animations')
 
 /**
- * Historically this file includes styles with no defined criteria.
- * Imagine this file as a future reference for theming, in a way
- * that each component should be an object wrapping all properties
- * that would change in a dark mode, for example.
- *
- * Valid as well for things that needs to be fully global,
- * i.e. breakpoints, icons and zIndexes.
- *
- * Thus said, please take preference for inlined styles in the component itself.
- * If you really feel repetitve writing the same style for a given component,
- * consider including a variable inside component.
+ * Use this file when the style you need
+ * is applied in more than one element, or depends on it
+ * Use theme.js file to include colors that can be customized
  *
  * TODO:
  * remove unnecessary styles properties (as items get refactored)
- * Remove fully global items and take preference for component properties (@see button)
+ * migrate customizable options to theme.js
  */
 
 const globalStyles = {
diff --git a/app/renderer/components/styles/theme.js b/app/renderer/components/styles/theme.js
new file mode 100644
index 00000000000..eccc58ea5cb
--- /dev/null
+++ b/app/renderer/components/styles/theme.js
@@ -0,0 +1,59 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+ /**
+  * Includes color options for theming
+  * This should be used as a boilerplate for all
+  * future theming, including darkUI.
+  * Note: If an element is not color-related, it should go into global.js
+  */
+  module.exports.theme = {
+    tab: {
+      // mimics chrome hover effect
+      transition: `
+        background-color 200ms cubic-bezier(0.26, 0.63, 0.39, 0.65),
+        color 200ms linear
+      `,
+      background: '#ddd',
+      borderColor: '#bbb',
+      color: '#000',
+      hover: {
+        background: 'rgba(255, 255, 255, 0.4)'
+      },
+      forWindows: {
+        color: '#555'
+      },
+      active: {
+        background: 'rgba(255, 255, 255, 0.8)',
+        private: {
+          background: '#4b3c6e',
+          color: '#fff'
+        }
+      },
+      private: {
+        background: 'rgba(75, 60, 110, 0.2)',
+        color: '#4b3c6e'
+      },
+      content: {
+        icon: {
+          default: {
+            primary: '#fff',
+            secondary: 'rgb(101, 101, 101)'
+          },
+          private: {
+            background: {
+              active: '#fff',
+              notActive: '#000'
+            }
+          },
+          audio: {
+            color: 'lightskyblue'
+          },
+          close: {
+            filter: 'invert(100%) grayscale(1) contrast(0.5) brightness(160%)'
+          }
+        }
+      }
+    }
+  }