From ec1bfbf7883470c936bed97e34475a3c908e25ce Mon Sep 17 00:00:00 2001
From: Ian Bolton <ibolton336@gmail.com>
Date: Thu, 17 Jan 2019 15:56:59 -0500
Subject: [PATCH] feat(example): Add dark theme toggle button & change
 background colort (#1212)

---
 .../src/components/example/liveDemo.js        | 27 +++++++++++++++--
 .../src/components/layouts/index.js           | 30 ++++++++-----------
 .../src/components/page/page.styles.js        |  3 +-
 3 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/packages/patternfly-4/react-docs/src/components/example/liveDemo.js b/packages/patternfly-4/react-docs/src/components/example/liveDemo.js
index 34dab3423ec..438732600c6 100644
--- a/packages/patternfly-4/react-docs/src/components/example/liveDemo.js
+++ b/packages/patternfly-4/react-docs/src/components/example/liveDemo.js
@@ -12,6 +12,7 @@ import { LiveProvider, LiveEditor, LiveError, LivePreview, withLive } from 'reac
 import { transform } from 'babel-standalone';
 import Section from '../section';
 import copy from 'clipboard-copy';
+import classNames from 'classnames';
 
 const propTypes = {
   className: PropTypes.string,
@@ -56,7 +57,14 @@ const transformCode = code => {
 class LiveDemo extends React.Component {
   state = {
     codeOpen: false,
-    showCopyMessage: false
+    showCopyMessage: false,
+    isDarkTheme: false
+  };
+
+  handleToggleDarkTheme = () => {
+    this.setState({
+      isDarkTheme: !this.state.isDarkTheme
+    });
   };
 
   handleClickCodeOpen = () => {
@@ -79,7 +87,7 @@ class LiveDemo extends React.Component {
 
   render() {
     const { className, raw, images, live, liveScope, path } = this.props;
-    const { codeOpen, showCopyMessage } = this.state;
+    const { codeOpen, showCopyMessage, isDarkTheme } = this.state;
 
     const GITHUB_BASE = 'https://github.com/patternfly/patternfly-react/blob/master/packages/patternfly-4';
     const examplePath = `${GITHUB_BASE}${path.substr(5)}`;
@@ -96,11 +104,15 @@ class LiveDemo extends React.Component {
         scope[importName] = image.file;
       }
     }
+    const darkThemeClasses =
+      classNames({
+        'pf-t-dark pf-m-opaque-200': isDarkTheme,
+      })
 
     return (
       <Section>
         <LiveProvider code={raw} scope={scope} transformCode={transformCode}>
-          {live && <LivePreview className={css(className, exampleStyles.example)} />}
+          {live && <LivePreview className={css(className, exampleStyles.example, darkThemeClasses)} />}
           <div className={css(styles.toolbar)}>
             <CoreComponents.Button
               onClick={this.handleClickCodeOpen}
@@ -128,6 +140,15 @@ class LiveDemo extends React.Component {
                 <i className={css('fab fa-github')} />
               </CoreComponents.Button>
             </a>
+            <CoreComponents.Button
+              onClick={this.handleToggleDarkTheme}
+              variant="plain"
+              title="Toggle Dark Theme"
+              aria-label="Toggle Dark Theme"
+            >
+              <CoreIcons.AsleepIcon />
+            </CoreComponents.Button>
+
             <CoreComponents.TextContent className={css(styles.message, showCopyMessage && styles.messageShow)}>
               <CoreComponents.Text component="pre" className={css(styles.messageText)}>
                 Copied to clipboard
diff --git a/packages/patternfly-4/react-docs/src/components/layouts/index.js b/packages/patternfly-4/react-docs/src/components/layouts/index.js
index 20e1ae1b0d5..f1b86d3aa57 100644
--- a/packages/patternfly-4/react-docs/src/components/layouts/index.js
+++ b/packages/patternfly-4/react-docs/src/components/layouts/index.js
@@ -14,10 +14,6 @@ injectGlobal(`
     height: 100%;
   }
 
-  body {
-    background-color: #ececec;
-  }
-
   #___gatsby {
     position: relative;
     width: 100%;
@@ -41,27 +37,27 @@ const DocsLayout = ({ children, data }) => {
   const getPackage = label => DocsFiles[`${label.toLowerCase()}_package`].substr(6);
   const componentRoutes = data.componentPages
     ? data.componentPages.edges.map(e => ({
-        to: e.node.path,
-        label: e.node.fields.label,
-        pkg: getPackage(e.node.fields.label),
-        components: componentMapper(e.node.path, e.node.fields.label)
-      }))
+      to: e.node.path,
+      label: e.node.fields.label,
+      pkg: getPackage(e.node.fields.label),
+      components: componentMapper(e.node.path, e.node.fields.label)
+    }))
     : [];
 
   const layoutRoutes = data.layoutPages
     ? data.layoutPages.edges.map(e => ({
-        to: e.node.path,
-        label: e.node.fields.label,
-        pkg: getPackage(e.node.fields.label),
-        components: componentMapper(e.node.path, e.node.fields.label)
-      }))
+      to: e.node.path,
+      label: e.node.fields.label,
+      pkg: getPackage(e.node.fields.label),
+      components: componentMapper(e.node.path, e.node.fields.label)
+    }))
     : [];
 
   const demoRoutes = data.demoPages
     ? data.demoPages.edges.map(e => ({
-        to: e.node.path,
-        label: e.node.fields.label
-      }))
+      to: e.node.path,
+      label: e.node.fields.label
+    }))
     : [];
 
   return (
diff --git a/packages/patternfly-4/react-docs/src/components/page/page.styles.js b/packages/patternfly-4/react-docs/src/components/page/page.styles.js
index bec464723b1..17fcaf1004b 100644
--- a/packages/patternfly-4/react-docs/src/components/page/page.styles.js
+++ b/packages/patternfly-4/react-docs/src/components/page/page.styles.js
@@ -8,7 +8,8 @@ export default StyleSheet.create({
   },
   nav: {
     position: 'relative',
-    flexShrink: 0
+    flexShrink: 0,
+    borderRight: 'solid 1px #cecece'
   },
   main: {
     position: 'relative',