Add K6 dark theme.

src-docs/src/components/guide_page/guide_page_chrome.js

@@ -87,15 +87,31 @@ export class GuidePageChrome extends Component {
       </EuiButtonEmpty>
     );
 
-    const themeOptions = ['Light', 'Dark', 'K6'].map(option => (
-      <EuiContextMenuItem
-        key={option}
-        icon={option.toLowerCase() === this.props.selectedTheme ? 'check' : 'empty'}
-        onClick={() => { this.closeThemePopover(); this.props.onToggleTheme(option.toLowerCase()); }}
-      >
-        {`${option}`}
-      </EuiContextMenuItem>
-    ));
+    const themeOptions = [{
+      name: 'Light',
+      value: 'light',
+    }, {
+      name: 'Dark',
+      value: 'dark',
+    }, {
+      name: 'K6',
+      value: 'k6',
+    }, {
+      name: 'K6 dark',
+      value: 'k6_dark',
+    }].map(option => {
+      const { name, value } = option;
+
+      return (
+        <EuiContextMenuItem
+          key={value}
+          icon={value === this.props.selectedTheme ? 'check' : 'empty'}
+          onClick={() => { this.closeThemePopover(); this.props.onToggleTheme(value); }}
+        >
+          {`${name}`}
+        </EuiContextMenuItem>
+      );
+    });
 
     return (
       <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
@@ -114,6 +130,7 @@ export class GuidePageChrome extends Component {
             anchorPosition="downRight"
           >
             <EuiContextMenuPanel
+              style={{ width: '120px' }}
               items={themeOptions}
             />
           </EuiPopover>

src-docs/src/index.js

@@ -21,6 +21,7 @@ import {
 import themeLight from './theme_light.scss';
 import themeDark from './theme_dark.scss';
 import themeK6 from './theme_k6.scss';
+import themeK6Dark from './theme_k6_dark.scss';
 
 registerTheme('light', [
   themeLight
@@ -34,6 +35,10 @@ registerTheme('k6', [
   themeK6
 ]);
 
+registerTheme('k6_dark', [
+  themeK6Dark
+]);
+
 // Set up app
 
 const store = configureStore();

src-docs/src/theme_k6.scss

@@ -1,3 +1,2 @@
 @import "../../src/theme_k6";
 @import "./components/guide_components";
-

src-docs/src/theme_k6_dark.scss

@@ -0,0 +1,2 @@
+@import "../../src/theme_k6_dark";
+@import "./components/guide_components";

src/global_styling/k6/_index.scss

@@ -1,5 +1,4 @@
 @import 'size';
-@import 'colors';
 @import 'typography';
 // @import 'borders';
 // @import 'shadows';

src/global_styling/theme_k6_dark_variables.scss

@@ -0,0 +1,20 @@
+// Dark theme overides
+
+$euiColorEmptyShade: #222;
+$euiColorLightestShade: #272727;
+$euiColorLightShade: #333;
+$euiColorMediumShade: #444;
+$euiColorDarkShade: #D9D9D9;
+$euiColorDarkestShade: #F5F5F5;
+$euiColorFullShade: #FFF;
+$euiColorPrimary: #4da1c0;
+$euiColorDanger: #bf4d4d;
+$euiTextColor: #DDD;
+
+$euiFocusBackgroundColor: #191919;
+
+// K6 custom values
+@import 'k6/index';
+
+// Configuration
+@import 'variables/index';

src/global_styling/theme_k6_variables.scss

@@ -1,3 +1,5 @@
+$euiTextColor: #2D2D2D;
+
 // K6 custom values
 @import 'k6/index';
 

src/theme_k6_dark.scss

@@ -0,0 +1,8 @@
+// Variables
+@import 'global_styling/theme_k6_dark_variables';
+
+// Global styling
+@import 'global_styling/core';
+
+// Components
+@import 'components/index';