add base theme switcher that uses the component state

embark-ui/package.json

@@ -76,7 +76,7 @@
   "scripts": {
     "react-start": "node scripts/start.js",
     "start": "npm-run-all --parallel css-compile react-start watch-css",
-    "build": "node scripts/build.js",
+    "build": "npm run css-compile && node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom",
     "css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 src/dark-theme/coreui.scss src/css/coreui.css",
     "watch-css": "nodemon --ignore dist/ -e scss -x \"npm run css-compile\""

embark-ui/src/components/Layout.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DropdownItem, DropdownMenu, DropdownToggle, Nav, Container } from 'reactstrap';
+import { UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, Container } from 'reactstrap';
 
 import {
   AppAside,
@@ -38,7 +38,7 @@ const sidebarNavItems = {items: [
   ]},
 ]};
 
-const Layout = ({children, logout, credentials, location}) => (
+const Layout = ({children, logout, credentials, location, changeTheme}) => (
   <div className="app">
     <AppHeader fixed>
       <AppSidebarToggler className="d-lg-none" display="md" mobile />
@@ -75,6 +75,16 @@ const Layout = ({children, logout, credentials, location}) => (
       </AppAside>
     </div>
     <AppFooter>
+      <UncontrolledDropdown direction="up">
+        <DropdownToggle caret>
+          Theme
+        </DropdownToggle>
+        <DropdownMenu>
+          <DropdownItem onClick={() => changeTheme('dark')}>Dark</DropdownItem>
+          <DropdownItem onClick={() => changeTheme('light')}>Light</DropdownItem>
+        </DropdownMenu>
+      </UncontrolledDropdown>
+
       <span className="ml-auto">
         Embark&nbsp;
         <a href="https://embark.status.im" title="Documentation" rel="noopener noreferrer" target="_blank">Documentation</a>
@@ -89,7 +99,9 @@ Layout.propTypes = {
   children: PropTypes.element,
   tabs: PropTypes.arrayOf(PropTypes.object),
   credentials: PropTypes.object,
-  logout: PropTypes.func
+  location: PropTypes.object,
+  logout: PropTypes.func,
+  changeTheme: PropTypes.func
 };
 
 export default Layout;

embark-ui/src/containers/AppContainer.js

@@ -22,6 +22,10 @@ class AppContainer extends Component {
     super(props);
 
     this.queryStringAuthenticate();
+
+    this.state = {
+      theme: 'dark'
+    };
   }
 
   queryStringAuthenticate() {
@@ -59,18 +63,22 @@ class AppContainer extends Component {
     return this.props.authenticationError || !this.props.credentials.authenticated;
   }
 
+  changeTheme(theme) {
+    this.setState({theme});
+  }
+
   render() {
     return (
-      <React.Fragment>
+      <div className={this.state.theme + "-theme"}>
         {this.shouldRenderLogin() ?
           <Login credentials={this.props.credentials} authenticate={this.props.authenticate} error={this.props.authenticationError} />
           :
-          <Layout location={this.props.location} logout={this.props.logout} credentials={this.props.credentials}>
+          <Layout location={this.props.location} logout={this.props.logout} credentials={this.props.credentials} changeTheme={(v) => this.changeTheme(v)}>
             <React.Fragment>{routes}</React.Fragment>
           </Layout>
         }
-      </React.Fragment>
-    )
+      </div>
+    );
   }
 }
 

embark-ui/src/dark-theme/_layout.scss

@@ -29,6 +29,7 @@ app-root {
   flex-direction: row;
   flex-grow: 1;
   overflow-x: hidden;
+  margin-top: 0;
 
   .main {
     flex: 1;

embark-ui/src/dark-theme/bootstrap/_reboot.scss

@@ -54,7 +54,7 @@ article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
 // 3. Set an explicit initial text-align value so that we can later use the
 //    the `inherit` value on things like `<th>` elements.
 
-body {
+.dark-theme {
   margin: 0; // 1
   font-family: $font-family-base;
   font-size: $font-size-base;

embark-ui/src/dark-theme/bootstrap/bootstrap.scss

@@ -10,6 +10,8 @@
 @import "mixins";
 @import "root";
 @import "reboot";
+
+.dark-theme {
   @import "type";
   @import "images";
   @import "code";
@@ -40,3 +42,4 @@
   @import "carousel";
   @import "utilities";
   @import "print";
+}

embark-ui/src/dark-theme/coreui.scss

@@ -5,22 +5,18 @@
  * Copyright (c) 2018 creativeLabs Łukasz Holeczek
  * Licensed under MIT (https://coreui.io/license)
  */
-
 // Override Boostrap variables
 @import "variables";
-
 // Import Bootstrap source files
 @import "./bootstrap.scss";
-
 // Mixins
 @import "mixins";
-
 // Animations
 @import "animate";
-
 // Vendors
 @import "vendors";
 
+.dark-theme {
   // Components
   @import "aside";
   @import "avatars";
@@ -62,3 +58,4 @@
 
   // Custom Properties support for Internet Explorer
   @import "ie-custom-properties";
+}

embark-ui/src/index.js

@@ -4,8 +4,8 @@ import ReactDOM from 'react-dom';
 import {Provider} from 'react-redux';
 
 import 'font-awesome/css/font-awesome.min.css';
+import '@coreui/coreui/dist/css/coreui.min.css';
 import './css/coreui.css';
-// import '@coreui/coreui/dist/css/coreui.min.css';
 import './index.css';
 
 import AppContainer from './containers/AppContainer';