Add theme selector to sidenav.

src-docs/src/actions/theme_actions.js

@@ -1,5 +1,8 @@
 import ActionTypes from './action_types';
 
-export const toggleTheme = () => ({
+export const toggleTheme = theme => ({
   type: ActionTypes.TOGGLE_THEME,
+  data: {
+    theme,
+  },
 });

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

@@ -8,10 +8,13 @@ import {
 
 import {
   EuiButtonEmpty,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
   EuiFieldSearch,
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
+  EuiPopover,
   EuiSideNav,
   EuiSpacer,
 } from '../../../../src/components';
@@ -23,6 +26,7 @@ export class GuidePageChrome extends Component {
     this.state = {
       search: '',
       isSideNavOpenOnMobile: false,
+      isThemePopoverOpen: false,
     };
   }
 
@@ -49,6 +53,18 @@ export class GuidePageChrome extends Component {
     this.scrollTo($(`#${id}`).offset().top - 20);
   };
 
+  onThemeButtonClick = () => {
+    this.setState({
+      isThemePopoverOpen: !this.state.isThemePopoverOpen,
+    });
+  };
+
+  closeThemePopover = () => {
+    this.setState({
+      isThemePopoverOpen: false,
+    });
+  };
+
   renderIdentity() {
     const homeLink = (
       <Link
@@ -59,23 +75,48 @@ export class GuidePageChrome extends Component {
       </Link>
     );
 
+    const themeButton = (
+      <EuiButtonEmpty
+        size="s"
+        color="text"
+        iconType="arrowDown"
+        iconSide="right"
+        onClick={this.onThemeButtonClick}
+      >
+        Theme
+      </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>
+    ));
+
     return (
       <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
         <EuiFlexItem grow={false}>
           {homeLink}
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
-            size="xs"
-            onClick={this.props.onToggleTheme}
-            className="euiLink"
-            iconSide="right"
-            color="text"
-            iconType="invert"
+          <EuiPopover
+            id="pageChromeThemePopover"
+            button={themeButton}
+            isOpen={this.state.isThemePopoverOpen}
+            closePopover={this.closeThemePopover}
+            panelPaddingSize="none"
+            withTitle
+            anchorPosition="downRight"
           >
-              Flip theme
-          </EuiButtonEmpty>
+            <EuiContextMenuPanel
+              items={themeOptions}
+            />
+          </EuiPopover>
         </EuiFlexItem>
       </EuiFlexGroup>
     );
@@ -203,6 +244,9 @@ export class GuidePageChrome extends Component {
 
 GuidePageChrome.propTypes = {
   currentRouteName: PropTypes.string.isRequired,
+  onToggleTheme: PropTypes.func.isRequired,
+  selectedTheme: PropTypes.string.isRequired,
+  guidelines: PropTypes.array.isRequired,
   components: PropTypes.array.isRequired,
   sandboxes: PropTypes.array.isRequired,
 };

src-docs/src/index.js

@@ -20,6 +20,7 @@ import {
 
 import themeLight from './theme_light.scss';
 import themeDark from './theme_dark.scss';
+import themeK6 from './theme_k6.scss';
 
 registerTheme('light', [
   themeLight
@@ -29,6 +30,10 @@ registerTheme('dark', [
   themeDark
 ]);
 
+registerTheme('k6', [
+  themeK6
+]);
+
 // Set up app
 
 const store = configureStore();

src-docs/src/store/reducers/theme_reducer.js

@@ -8,7 +8,7 @@ export default function sectionsReducer(state = defaultState, action) {
   switch (action.type) {
     case ActionTypes.TOGGLE_THEME: {
       return {
-        theme: (state.theme === 'light') ? 'dark' : 'light',
+        theme: action.data.theme,
       };
     }
 

src-docs/src/theme_k6.scss

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

src-docs/src/views/app_view.js

@@ -57,10 +57,18 @@ export class AppView extends Component {
   }
 
   renderContent() {
-    if (this.props.isSandbox) {
+    const {
+      children,
+      currentRoute,
+      isSandbox,
+      toggleTheme,
+      theme,
+    } = this.props;
+
+    if (isSandbox) {
       return (
         <div className="guideSandbox">
-          {this.props.children}
+          {children}
         </div>
       );
     } else {
@@ -69,9 +77,9 @@ export class AppView extends Component {
           <EuiPageBody>
             <EuiPageSideBar>
               <GuidePageChrome
-                currentRouteName={this.props.currentRoute.name}
-                onToggleTheme={this.props.toggleTheme}
-                routes={this.props.routes}
+                currentRouteName={currentRoute.name}
+                onToggleTheme={toggleTheme}
+                selectedTheme={theme}
                 guidelines={Routes.guidelines}
                 components={Routes.components}
                 sandboxes={Routes.sandboxes}
@@ -80,7 +88,7 @@ export class AppView extends Component {
 
             <EuiPageContent>
               <EuiPageContentBody>
-                {this.props.children}
+                {children}
               </EuiPageContentBody>
             </EuiPageContent>
           </EuiPageBody>
@@ -101,14 +109,11 @@ export class AppView extends Component {
 AppView.propTypes = {
   children: PropTypes.any,
   currentRoute: PropTypes.object.isRequired,
-  sections: PropTypes.array,
   isSandbox: PropTypes.bool,
-  toggleTheme: PropTypes.func.isRequired,
   theme: PropTypes.string.isRequired,
-  sections: PropTypes.array.isRequired,
+  toggleTheme: PropTypes.func.isRequired,
 };
 
 AppView.defaultProps = {
   currentRoute: {},
-  sections: [],
 };

src/global_styling/theme_k6_variables.scss

@@ -0,0 +1,5 @@
+// K6 custom values
+@import 'k6/index';
+
+// Configuration
+@import 'variables/index';

src/global_styling/theme_light_variables.scss

@@ -1,5 +1,2 @@
-// K6 custom values
-@import 'k6/index';
-
 // Configuration
 @import 'variables/index';

src/theme_k6.scss

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