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,33 +10,36 @@
 @import "mixins";
 @import "root";
 @import "reboot";
-@import "type";
+
-@import "images";
+.dark-theme {
-@import "code";
+  @import "type";
-@import "grid";
+  @import "images";
-@import "tables";
+  @import "code";
-@import "forms";
+  @import "grid";
-@import "buttons";
+  @import "tables";
-@import "transitions";
+  @import "forms";
-@import "dropdown";
+  @import "buttons";
-@import "button-group";
+  @import "transitions";
-@import "input-group";
+  @import "dropdown";
-@import "custom-forms";
+  @import "button-group";
-@import "nav";
+  @import "input-group";
-@import "navbar";
+  @import "custom-forms";
-@import "card";
+  @import "nav";
-@import "breadcrumb";
+  @import "navbar";
-@import "pagination";
+  @import "card";
-@import "badge";
+  @import "breadcrumb";
-@import "jumbotron";
+  @import "pagination";
-@import "alert";
+  @import "badge";
-@import "progress";
+  @import "jumbotron";
-@import "media";
+  @import "alert";
-@import "list-group";
+  @import "progress";
-@import "close";
+  @import "media";
-@import "modal";
+  @import "list-group";
-@import "tooltip";
+  @import "close";
-@import "popover";
+  @import "modal";
-@import "carousel";
+  @import "tooltip";
-@import "utilities";
+  @import "popover";
-@import "print";
+  @import "carousel";
+  @import "utilities";
+  @import "print";
+}

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

@@ -5,60 +5,57 @@
  * 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";
 
-// Components
+.dark-theme {
-@import "aside";
+  // Components
-@import "avatars";
+  @import "aside";
-@import "badge";
+  @import "avatars";
-@import "breadcrumb-menu";
+  @import "badge";
-@import "breadcrumb";
+  @import "breadcrumb-menu";
-@import "brand-card";
+  @import "breadcrumb";
-@import "brand-buttons";
+  @import "brand-card";
-@import "buttons";
+  @import "brand-buttons";
-@import "callout";
+  @import "buttons";
-@import "card";
+  @import "callout";
-@import "charts";
+  @import "card";
-@import "dropdown";
+  @import "charts";
-@import "footer";
+  @import "dropdown";
-@import "grid";
+  @import "footer";
-@import "header";
+  @import "grid";
-@import "input-group";
+  @import "header";
-@import "images";
+  @import "input-group";
-@import "list-group";
+  @import "images";
-@import "modal";
+  @import "list-group";
-@import "nav";
+  @import "modal";
-@import "progress";
+  @import "nav";
-@import "progress-group";
+  @import "progress";
-@import "sidebar";
+  @import "progress-group";
-@import "switches";
+  @import "sidebar";
-@import "tables";
+  @import "switches";
-@import "widgets";
+  @import "tables";
+  @import "widgets";
 
-// Layout Options
+  // Layout Options
-@import "layout";
+  @import "layout";
 
-@import "others";
+  @import "others";
 
-// Utility classes
+  // Utility classes
-@import "utilities";
+  @import "utilities";
 
-// Right-to-left
+  // Right-to-left
-@import "rtl";
+  @import "rtl";
 
-// Custom Properties support for Internet Explorer
+  // Custom Properties support for Internet Explorer
-@import "ie-custom-properties";
+  @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';