diff --git a/src/components/layout/layout.scss b/src/components/layout/layout.scss
index bd6d7b9b..93829dd6 100644
--- a/src/components/layout/layout.scss
+++ b/src/components/layout/layout.scss
@@ -1,9 +1,15 @@
 @import '../../styles/config';
+@import '../../styles/theme';
 
 .layout {
     overflow: hidden;
+    @include themify($themes) {
+        background-color: themed('background-1');
+    }
     &__loader {
-        background-color: rgba($argo-color-gray-7, 0.4);
+        @include themify($themes) {
+            background-color: themed('layout-loader-bg');
+        }
         position: fixed;
         left: 0;
         top: 0;
diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx
index 41869361..74b7d33b 100644
--- a/src/components/layout/layout.tsx
+++ b/src/components/layout/layout.tsx
@@ -7,12 +7,15 @@ export interface LayoutProps {
     navItems: Array<{ path: string; iconClassName: string; title: string; }>;
     version?: () => React.ReactElement;
     navBarStyle?: NavBarStyle;
+    theme?: string;
     children?: React.ReactNode;
 }
 
 export const Layout = (props: LayoutProps) => (
-    <div className='layout'>
+    <div className={props.theme ? 'theme-' + props.theme : 'theme-light'}>
+        <div className='layout'>
         <NavBar items={props.navItems} version={props.version} style={props.navBarStyle} />
         {props.children}
+        </div>
     </div>
 );
diff --git a/src/components/sliding-panel/sliding-panel.scss b/src/components/sliding-panel/sliding-panel.scss
index ea74dbcb..3f66e44f 100644
--- a/src/components/sliding-panel/sliding-panel.scss
+++ b/src/components/sliding-panel/sliding-panel.scss
@@ -1,6 +1,7 @@
 @import 'node_modules/foundation-sites/scss/util/util';
 
 @import '../../styles/config';
+@import '../../styles/theme';
 
 $sliding-panel-header-height: 50px;
 $sliding-panel-footer-height: 64px;
@@ -50,7 +51,10 @@ $sliding-panel-middle-width: 600px;
         right: 0;
         bottom: 0;
         width: 80%;
-        background-color: #fff;
+        @include themify($themes) {
+            background-color: themed('background-2');                  
+            color: themed('text-2');    
+        }
         transition: right .5s;
 
         @include breakpoint(medium down) {
@@ -97,13 +101,17 @@ $sliding-panel-middle-width: 600px;
         padding: 0 30px;
         line-height: $sliding-panel-header-height;
         color: $argo-color-gray-5;
-        background-color: $argo-color-gray-2;
+        @include themify($themes) {                  
+            background-color: themed('light-argo-gray-2');
+        }
         border-bottom: 1px solid #c6cfd1;
         font-weight: 500;
         font-size: .925em;
 
         .sliding-panel--off-canvas & {
-            background-color: $argo-color-gray-2;
+            @include themify($themes) {                  
+                background-color: themed('light-argo-gray-2');
+            }
         }
 
         strong {
@@ -120,8 +128,9 @@ $sliding-panel-middle-width: 600px;
         position: relative;
         height: 100%;
         overflow: auto;
-        background-color: $argo-color-gray-2;
-
+        @include themify($themes) {                  
+            background-color: themed('light-argo-gray-2');
+        }
         .sliding-panel:not(.sliding-panel--no-padding) & {
             padding: 30px;
         }
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index e7e24fa9..ad925fc9 100644
--- a/src/components/tabs/tabs.scss
+++ b/src/components/tabs/tabs.scss
@@ -1,4 +1,6 @@
 @import '../../styles/config';
+@import '../../styles/theme';
+
 
 .tabs {
     .fixed-width {
@@ -11,7 +13,9 @@
         position: relative;
         z-index: 1;
         padding: 15px 20px 0;
-        background-color: $white-color;
+        @include themify($themes) {                  
+            background-color: themed('background-2');
+        }
         overflow: hidden;
         list-style: none;
         box-shadow: 0 1px 3px rgba(143,164,177,.3);
@@ -55,7 +59,9 @@
                 color: $argo-color-teal-5;
 
                 &.active {
-                    color: $argo-color-gray-8;
+                    @include themify($themes) {              
+                        color: themed('text-2');
+                    }
                 }
             }
         }
diff --git a/src/components/top-bar/top-bar.scss b/src/components/top-bar/top-bar.scss
index b87c276e..ef44c6df 100644
--- a/src/components/top-bar/top-bar.scss
+++ b/src/components/top-bar/top-bar.scss
@@ -1,9 +1,12 @@
 @import '../../styles/config';
 @import 'node_modules/foundation-sites/scss/util/util';
+@import '../../styles/theme';
 
 .top-bar {
     line-height: $top-bar-height;
-    background: $white-color;
+    @include themify($themes) {
+        background: themed('background-2');        
+    }
     transition: right .5s;
     border-bottom: 1px solid $argo-color-gray-2;
 
@@ -52,7 +55,9 @@
         height: $top-bar-height;
         font-weight: 500;
         font-size: .8em;
-        color: $argo-color-gray-8;
+        @include themify($themes) {
+            color: themed('text-2');
+        }
 
         a {
             display: inline-block;
diff --git a/src/styles/config.scss b/src/styles/config.scss
index 9c4cc1b2..cca858ad 100644
--- a/src/styles/config.scss
+++ b/src/styles/config.scss
@@ -30,7 +30,9 @@ $argo-color-teal-7: #006F8A;
 $argo-color-teal-8: #004C67;
 
 $white-color: #ffffff;
-
+$dark-theme-background-1: #100f0f;
+$dark-theme-background-2: #303237;
+$dark-theme-sliding-panel: #28292a;
 // Status colors
 $argo-failed-color: #E96D76;
 $argo-failed-color-dark: #c04b4f;
diff --git a/src/styles/elements/containers.scss b/src/styles/elements/containers.scss
index 677253dd..b047c365 100644
--- a/src/styles/elements/containers.scss
+++ b/src/styles/elements/containers.scss
@@ -1,3 +1,5 @@
+@import '../theme';
+
 .argo-container {
     position: relative;
     width: $basePageWidth + 160;
@@ -35,8 +37,10 @@
     position: relative;
     padding: 30px;
     font-size: 0.8125rem;
-    color: $argo-color-gray-6;
-    background-color: #fff;
+    @include themify($themes) {
+        background-color: themed('background-2');    
+        color: themed('light-argo-gray-6');    
+    }
     border-radius: 4px;
     box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
 
@@ -87,8 +91,9 @@
         }
 
         &-row {
-            color: $argo-color-gray-8;
-
+            @include themify($themes) {                  
+                color: themed('text-2');    
+            }
             .columns {
                 border-bottom: 1px solid $argo-color-gray-3;
                 padding: 0;
diff --git a/src/styles/elements/form-controls.scss b/src/styles/elements/form-controls.scss
index 3f44fe7f..3fb7953a 100644
--- a/src/styles/elements/form-controls.scss
+++ b/src/styles/elements/form-controls.scss
@@ -1,4 +1,5 @@
 @import '../config';
+@import '../theme';
 
 .argo-form-row {
     position: relative;
@@ -8,7 +9,9 @@
 
     label {
         font-size: .9em;
-        color: $argo-color-gray-6;
+        @include themify($themes) {                  
+            color: themed('light-argo-gray-6');
+        }
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -69,6 +72,9 @@
     padding: 8px 0;
     font-size: 15px;
     background-color: transparent;
+    @include themify($themes) {                  
+        color: themed('text-2');
+    }
     border: 0;
     border-bottom: 2px solid #ccc;
     transition: border .2s;
diff --git a/src/styles/elements/table-list.scss b/src/styles/elements/table-list.scss
index 99145901..eaaa62d2 100644
--- a/src/styles/elements/table-list.scss
+++ b/src/styles/elements/table-list.scss
@@ -1,4 +1,5 @@
 @import '../config';
+@import '../theme';
 
 .argo-table-list {
     &__head {
@@ -14,8 +15,10 @@
         margin: 8px 0;
         line-height: 60px;
         font-size: .8125em;
-        color: $argo-color-gray-6;
-        background-color: #fff;
+        @include themify($themes) {
+            background: themed('background-2');
+            color: themed('text-1');
+        }
         border-radius: 4px;
         box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
 
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
new file mode 100644
index 00000000..9bf1732b
--- /dev/null
+++ b/src/styles/theme.scss
@@ -0,0 +1,47 @@
+@import './config.scss';
+
+$themes: (
+    light: (
+        background-1: $argo-color-gray-3,
+        text-1: $argo-color-gray-7,     
+        background-2: $white-color,
+        text-2: $argo-color-gray-8,        
+        light-argo-gray-6: $argo-color-gray-6,
+        light-argo-gray-2: $argo-color-gray-2,
+        light-argo-teal-1: $argo-color-teal-1,
+        pod-cyan: lightcyan,
+        layout-loader-bg: rgba($argo-color-gray-7, 0.4),  
+    ),
+    dark: (
+        background-1: $dark-theme-background-1,
+        text-1: $argo-color-gray-3,        
+        background-2: $dark-theme-background-2,
+        text-2: $white-color,        
+        light-argo-gray-6: $argo-color-gray-2,
+        light-argo-gray-2: $dark-theme-sliding-panel,
+        light-argo-teal-1: $argo-color-gray-6,
+        pod-cyan: $argo-color-teal-8,
+        layout-loader-bg: rgba($argo-color-gray-3, 0.4),
+
+    )
+);
+
+
+@mixin themify($themes) {
+    @each $theme, $map in $themes {
+      .theme-#{$theme} & {
+        $theme-map: () !global;
+        @each $key, $submap in $map {
+          $value: map-get(map-get($themes, $theme), '#{$key}');
+          $theme-map: map-merge($theme-map, ($key: $value)) !global;
+        }
+        @content;
+        $theme-map: null !global;
+      }
+    }
+  }
+  
+  @function themed($key) {
+    @return map-get($theme-map, $key);
+  }
+  
\ No newline at end of file