From 9c490d1989fe63a9091778534f45a1670b45e803 Mon Sep 17 00:00:00 2001
From: megala21 <ktumegala@yahoo.com>
Date: Tue, 12 Sep 2017 16:55:15 +0530
Subject: [PATCH 1/8] Adding the flexibility to change the css files

---
 .../src/main/resources/publisher/src/App.jsx  |  13 +-
 .../Application/ApplicationCreate.jsx         |  24 +++-
 .../Application/ApplicationListing.jsx        |  22 +++-
 .../Application/CreateSteps/Step1.jsx         |  19 ++-
 .../Application/CreateSteps/Step2.jsx         |  83 ++++++------
 .../Application/CreateSteps/Step3.jsx         |  28 ++--
 .../src/components/Base/BaseLayout.jsx        |  25 ++--
 .../components/Platform/PlatformCreate.jsx    |  42 +++---
 .../components/Platform/PlatformListing.jsx   |  23 +++-
 .../src/components/UIComponents/DataTable.jsx |  18 ++-
 .../UIComponents/DataTableHeader.jsx          |  28 ++--
 .../components/UIComponents/DataTableRow.jsx  |  16 ++-
 .../main/resources/publisher/src/config.json  |   9 +-
 .../publisher/src/themes/custom-theme.js      |  12 --
 .../src/themes/custom-theme/theme.js          |  39 ++++++
 .../default/application-create-step1.css      |  25 ++++
 .../default/application-create-step2.css      | 120 ++++++++++++++++++
 .../default/application-create-step3.css      |  29 +++++
 .../src/themes/default/application-create.css |  36 ++++++
 .../themes/default/application-listing.css    |  38 ++++++
 .../src/themes/default/basic-layout.css       |  26 ++++
 .../src/themes/default/data-table.css         |  44 +++++++
 .../src/themes/default/platform-create.css    |  68 ++++++++++
 .../src/themes/default/platform-listing.css   |  39 ++++++
 .../resources/publisher/src/themes/theme.js   |  35 +++++
 25 files changed, 721 insertions(+), 140 deletions(-)
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme/theme.js
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step1.css
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step2.css
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step3.css
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create.css
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-listing.css
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/basic-layout.css
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/data-table.css
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-create.css
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-listing.css
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
index 58002cfb62..8859f1897f 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
@@ -31,18 +31,21 @@ import {
     PlatformCreate,
     PlatformListing
 } from './components';
+import Theme from './themes/theme';
+
+
 const history = createHistory({basename: '/publisher'});
 
 /**
- * User can define the themes in the config.json. The themes will be loaded based on the user preference.
+ *Loading the theme files based on the the user-preference.
  */
-const theme = require("./config.json").theme;
 let muiTheme = null;
-if (theme.current === "default") {
-    let defaultTheme = require("material-ui/styles/baseThemes/" + theme.default);
+let selected = Theme.selectedTheme;
+if (Theme.currentTheme === "default") {
+    let defaultTheme = require("material-ui/styles/baseThemes/" + selected);
     muiTheme = getMuiTheme(defaultTheme.default);
 } else {
-    let customTheme = require("./themes/" + theme.custom);
+    let customTheme = require("./themes/" + selected + "/theme.js");
     muiTheme = getMuiTheme(customTheme.default);
 }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
index 86ad0961ff..afb03ffbaa 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
@@ -24,7 +24,7 @@ import {Step1, Step2, Step3} from './CreateSteps';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
-
+import Theme from '../../themes/theme';
 
 /**
  * The App Create Component.
@@ -51,6 +51,20 @@ class ApplicationCreate extends Component {
         };
     }
 
+    componentWillMount() {
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/application-create.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/application-create.css");
+            } catch (ex){
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/application-create.css");
+            }
+        }
+    }
+
     /**
      * Handles next button click event.
      * */
@@ -179,15 +193,15 @@ class ApplicationCreate extends Component {
 
 
         return (
-            <div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
-                <Card style={{maxHeight: '700px', overflow: 'auto'}}>
+            <div className="middle createapplicationmiddle">
+                <Card className="creataapplicationcard">
                     <CardTitle title="Create Application"/>
 
                     {/**
                      * The stepper goes here.
                      */}
                     <CardActions>
-                        <div style={{width: '100%', margin: 'auto'}}>
+                        <div className="createapplicationcardaction">
                             <Stepper activeStep={stepIndex}>
                                 <Step>
                                     <StepLabel>Select Application Platform</StepLabel>
@@ -199,7 +213,7 @@ class ApplicationCreate extends Component {
                                     <StepLabel>Release</StepLabel>
                                 </Step>
                             </Stepper>
-                            <div style={contentStyle}>
+                            <div className="createapplicationcontent">
                                 {finished ? (
                                     <div>
                                         <p>Create App?</p>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
index d0df14fb18..2b33e409f2 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
@@ -21,6 +21,7 @@ import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
 import DataTable from '../UIComponents/DataTable';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
+import Theme from '../../themes/theme';
 
 /**
  * The App Create Component.
@@ -112,6 +113,18 @@ class ApplicationListing extends Component {
     componentWillMount() {
         //Fetch all the applications from backend and create application objects.
         this.setState({data: this.data});
+
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/application-listing.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/application-listing.css");
+            } catch (ex) {
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/application-listing.css");
+            }
+        }
     }
 
     /**
@@ -156,12 +169,11 @@ class ApplicationListing extends Component {
 
     render() {
         return (
-            <div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
-                <Card style={{display: 'flex', flexWrap: 'wrap'}}>
-                    <TextField hintText="Search"
-                               style={{float:'right', paddingRight: '2px'}}
+            <div className="middle applicationListingMiddle">
+                <Card className="applicationListingCard">
+                    <TextField hintText="Search" className="applicationListingSearch"
                                onChange={this._searchApplications.bind(this)}/>
-                    <CardTitle title="Applications" style={{display: 'flex', flexWrap: 'wrap'}}/>
+                    <CardTitle title="Applications" className="applicationListTitle"/>
                     <CardActions>
 
                     </CardActions>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
index 971821d063..63ee4eb6b1 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
@@ -22,6 +22,9 @@ import MenuItem from 'material-ui/MenuItem';
 import TextField from 'material-ui/TextField';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
+import Theme from '../../../themes/theme';
+
+
 
 /**
  * The first step of the application creation wizard.
@@ -51,6 +54,17 @@ class Step1 extends Component {
     }
 
     componentWillMount() {
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../../themes/default/application-create-step1.css");
+        } else {
+            try {
+                require("../../../themes/" + selected + "/application-create-step1.css");
+            } catch (ex){
+                // If the particular customized file does not exist, use the default one.
+                require("../../../themes/default/application-create-step1.css");
+            }
+        }
         //Get the list of available platforms and set to the state.
     }
 
@@ -105,10 +119,9 @@ class Step1 extends Component {
     };
 
     render() {
-        const contentStyle = {margin: '0 16px'};
         return (
             <div>
-                <div style={contentStyle}>
+                <div className="creatediv">
                     <div>
                         <div>
                             <SelectField
@@ -134,7 +147,7 @@ class Step1 extends Component {
 
                         <br/>
                         <br/>
-                        <div style={{marginTop: 12}}>
+                        <div className="nextButton">
                             <RaisedButton
                                 label="Next >"
                                 primary={true}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
index 5d0591dd2e..9686cb8967 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
@@ -28,6 +28,7 @@ import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
 import Clear from 'material-ui/svg-icons/content/clear';
 import {GridList, GridTile} from 'material-ui/GridList';
+import Theme from '../../../themes/theme';
 
 /**
  * The Second step of application create wizard.
@@ -66,18 +67,21 @@ class Step2 extends Component {
             screenshots: [],
             icon: []
         };
-
-        this.styles = {
-            chip: {
-                margin: 4,
-            },
-            wrapper: {
-                display: 'flex',
-                flexWrap: 'wrap',
-            },
-        };
     }
 
+    componentWillMount() {
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../../themes/default/application-create-step2.css");
+        } else {
+            try {
+                require("../../../themes/" + selected + "/application-create-step2.css");
+            } catch (ex){
+                // If the particular customized file does not exist, use the default one.
+                require("../../../themes/default/application-create-step2.css");
+            }
+        }
+    }
 
     /**
      * Create a tag on Enter key press and set it to the state.
@@ -142,8 +146,7 @@ class Step2 extends Component {
             <Chip
                 key={data.key}
                 onRequestDelete={() => this._handleRequestDelete(data.key)}
-                style={this.styles.chip}
-            >
+                className="applicationCreateChip">
                 {data.value}
             </Chip>
         );
@@ -299,9 +302,8 @@ class Step2 extends Component {
 
     render() {
         console.log(this.state.visibilityComponent);
-        const contentStyle = {margin: '0 16px'};
         return (
-            <div style={contentStyle}>
+            <div className="createStep2Content">
                 <div>
                     <div>
                         <TextField
@@ -353,7 +355,7 @@ class Step2 extends Component {
                             onChange={this._handleTagChange.bind(this)}
                             onKeyPress={this._addTags.bind(this)}
                         /><br/>
-                        <div style={this.styles.wrapper}>
+                        <div className="applicationCreateWrapper">
                             {this.state.tags.map(this._renderChip, this)}
                         </div>
                         <br/>
@@ -365,18 +367,14 @@ class Step2 extends Component {
                             <MenuItem value={0} primaryText="Business"/>
                         </SelectField> <br/>
                         {/*Platform Specific Properties.*/}
-                        <div style={{border: 'solid #BDBDBD 1px'}}>
-                            <p style={{color: '#BDBDBD'}}>Platform Specific Properties</p>
+                        <div className="platformSpecificPropertyDiv">
+                            <p className="platformSpecificPropertyP">Platform Specific Properties</p>
                         </div>
                         <br/>
                         <div>
-                            <p style={{color: '#f44336'}}>{this.state.errors["Banner"]}</p>
-                            <p style={{color: '#BDBDBD'}}>Banner*:</p>
-                            <GridList style={{
-                                display: 'flex',
-                                flexWrap: 'nowrap',
-                                overflowX: 'auto',
-                            }} cols={1.1}>
+                            <p className="applicationCreateBannerError">{this.state.errors["Banner"]}</p>
+                            <p className="applicationCreateBannerTitle">Banner*:</p>
+                            <GridList className="applicationCreateGrid" cols={1.1}>
                                 {this.state.banner.map((tile) => (
                                     <GridTile key={Math.floor(Math.random() * 1000)}
                                               title={tile.name}
@@ -387,12 +385,11 @@ class Step2 extends Component {
                                         <img src={tile.preview}/></GridTile>
                                 ))}
                                 {this.state.banner.length === 0 ?
-                                    <Dropzone style={{width: '300px', height: '150px', border: 'dashed #BDBDBD 1px'}}
-                                              accept="image/jpeg, image/png"
+                                    <Dropzone className="applicationCreateBannerDropZone" accept="image/jpeg, image/png"
                                               onDrop={(banner, rejected) => {
                                                   this.setState({banner, rejected});
                                               }}>
-                                    <p style={{margin: '70px 40px 40px 150px'}}>+</p>
+                                    <p className="applicationCreateBannerp">+</p>
                                 </Dropzone> : <div />}
 
                             </GridList>
@@ -400,13 +397,9 @@ class Step2 extends Component {
                         </div>
                         <br/>
                         <div>
-                            <p style={{color: '#f44336'}}>{this.state.errors["Screenshots"]}</p>
-                            <p style={{color: '#BDBDBD'}}>Screenshots*:</p>
-                            <GridList style={{
-                                display: 'flex',
-                                flexWrap: 'nowrap',
-                                overflowX: 'auto',
-                            }} cols={1.1}>
+                            <p className="applicationCreateScreenshotError">{this.state.errors["Screenshots"]}</p>
+                            <p className="applicationCreateScreenshotTitle">Screenshots*:</p>
+                            <GridList className = "applicationCreateScreenshotGrid" cols={1.1}>
                                 {this.state.screenshots.map((file) => (
                                     <GridTile key={Math.floor(Math.random() * 1000)}
                                               title={file[0].name}
@@ -417,7 +410,7 @@ class Step2 extends Component {
                                         <img src={file[0].preview}/></GridTile>
                                 ))}
                                 {this.state.screenshots.length < 3 ?
-                                    <Dropzone style={{width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}}
+                                    <Dropzone className="applicationCreateScreenshotDropZone"
                                               accept="image/jpeg, image/png"
                                               onDrop={(screenshots, rejected) => {
                                                   let tmpScreenshots = this.state.screenshots;
@@ -425,19 +418,15 @@ class Step2 extends Component {
                                                   this.setState({
                                                       screenshots: tmpScreenshots});
                                               }}>
-                                    <p style={{margin: '70px 40px 70px 70px'}}>+</p>
+                                    <p className="applicationCreateScreenshotp">+</p>
                                 </Dropzone> : <div />}
                             </GridList>
                         </div>
                         <br/>
                         <div>
-                            <p style={{color: '#f44336'}}>{this.state.errors["Icon"]}</p>
-                            <p style={{color: '#BDBDBD'}}>Icon*:</p>
-                            <GridList style={{
-                                display: 'flex',
-                                flexWrap: 'nowrap',
-                                overflowX: 'auto',
-                            }} cols={1.1}>
+                            <p className="applcationCreateIconError">{this.state.errors["Icon"]}</p>
+                            <p className="applicationCreateIconTitle">Icon*:</p>
+                            <GridList className="applicationCreateIconGrid" cols={1.1}>
                                 {this.state.icon.map((tile) => (
                                     <GridTile key={Math.floor(Math.random() * 1000)}
                                               title={tile.name}
@@ -448,10 +437,10 @@ class Step2 extends Component {
                                         <img src={tile.preview}/></GridTile>
                                 ))}
                                 {this.state.icon.length === 0 ?
-                                    <Dropzone style={{width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}}
+                                    <Dropzone className="applicationCreateIconDropZone"
                                               accept="image/jpeg, image/png"
                                               onDrop={(icon, rejected) => {this.setState({icon, rejected});}}>
-                                    <p style={{margin: '70px 40px 70px 70px'}}>+</p>
+                                    <p className="applicationCreateIconp">+</p>
                                 </Dropzone> : <div />}
                             </GridList>
                         </div>
@@ -460,12 +449,12 @@ class Step2 extends Component {
 
                     <br/>
                     <br/>
-                    <div style={{marginTop: 12}}>
+                    <div className="applicationCreateBackAndNext">
                         <FlatButton
                             label="< Back"
                             disabled={false}
                             onClick={this._handlePrev.bind(this)}
-                            style={{marginRight: 12}}
+                            className="applicationCreateBack"
                         />
                         <RaisedButton
                             label="Next >"
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
index 677f7e309d..88a279e725 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
@@ -24,6 +24,7 @@ import TextField from 'material-ui/TextField';
 import FlatButton from 'material-ui/FlatButton';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
+import Theme from '../../../themes/theme';
 
 /**
  * The Third step of application create wizard. {Application Release Step}
@@ -57,6 +58,20 @@ class Step3 extends Component {
         }
     }
 
+    componentWillMount() {
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../../themes/default/application-create-step3.css");
+        } else {
+            try {
+                require("../../../themes/" + selected + "/application-create-step3.css");
+            } catch (ex){
+                // If the particular customized file does not exist, use the default one.
+                require("../../../themes/default/application-create-step3.css");
+            }
+        }
+    }
+
     /**
      * Handles finish button click.
      * This invokes handleNext function in parent component.
@@ -81,9 +96,8 @@ class Step3 extends Component {
     }
 
     render() {
-        const contentStyle = {margin: '0 16px'};
         return (
-            <div style={contentStyle}>
+            <div className="applicationCreateStepMiddle">
                 <div>
                     <Toggle
                         label="Release the Application"
@@ -110,13 +124,9 @@ class Step3 extends Component {
                         /><br/>
                     </div>}
 
-                    <div style={{marginTop: 12}}>
-                        <FlatButton
-                            label="< Back"
-                            disabled={false}
-                            onClick={this._handlePrev.bind(this)}
-                            style={{marginRight: 12}}
-                        />
+                    <div className="applicationCreateBackAndFinish">
+                        <FlatButton label="< Back" disabled={false} onClick={this._handlePrev.bind(this)}
+                                    className="applicationCreateFinish"/>
                         <RaisedButton
                             label="Finish"
                             primary={true}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
index cc63ca1311..4a18f37c73 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
@@ -31,6 +31,8 @@ import Dashboard from 'material-ui/svg-icons/action/dashboard';
 import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
 import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
 import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
+import Theme from '../../themes/theme';
+
 
 /**
  * Base Layout:
@@ -49,7 +51,17 @@ class BaseLayout extends Component {
     }
 
     componentWillMount() {
-
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+          require("../../themes/default/basic-layout.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/basic-layout.css");
+            } catch (ex){
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/basic-layout.css");
+            }
+        }
     }
 
     handleApplicationClick() {
@@ -142,16 +154,7 @@ class BaseLayout extends Component {
                         </List>
                     </Drawer>
                 </div>
-                <div style=
-                         {
-                             {
-                                 height: 'calc(100% - 64px)',
-                                 marginLeft: '16%',
-                                 width: 'calc(100%-15%)',
-                                 top: 64,
-                                 left: "-100px"
-                             }
-                         }>
+                <div className="basicLayoutDiv">
                     {this.props.children}
                 </div>
             </div>);
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
index c6604187a8..fc6663f7f4 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
@@ -31,6 +31,7 @@ import {GridList, GridTile} from 'material-ui/GridList';
 import Close from 'material-ui/svg-icons/navigation/close';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline';
+import Theme from '../../themes/theme';
 
 /**
  * Platform Create component.
@@ -64,6 +65,20 @@ class PlatformCreate extends Component {
         }
     }
 
+    componentWillMount() {
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/platform-create.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/platform-create.css");
+            } catch (ex) {
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/platform-create.css");
+            }
+        }
+    }
+
     /**
      * Handles toggle button actions.
      * One method is used for all the toggle buttons and, each toggle is identified by the id.
@@ -184,12 +199,12 @@ class PlatformCreate extends Component {
             property} = this.state;
 
         return (
-            <div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
+            <div className="middle createplatformmiddle">
                 <Card>
                     <CardTitle title="Create Platform"/>
 
                     <CardActions>
-                        <div style={{width: '100%', margin: 'auto', paddingLeft: '10px'}}>
+                        <div className="createplatformcardaction">
                             <form>
                                 <TextField
                                     hintText="Enter the Platform Name."
@@ -224,17 +239,17 @@ class PlatformCreate extends Component {
                                     toggled={enabled}
                                 /> <br/>
                                 <div>
-                                    <p style={{color: '#BaBaBa'}}>Platform Properties</p>
+                                    <p className="createplatformproperties">Platform Properties</p>
                                     <div id="property-container">
                                         {platformProperties.map((p) => {
                                             return <div key={p.key}>{p.key} : {p.value}
                                                 <IconButton onClick={this._removeProperty.bind(this, p)}>
-                                                    <Close style={{height: '10px', width: '10px'}}/>
+                                                    <Close className="createplatformpropertyclose"/>
                                                 </IconButton>
                                             </div>
                                         })}
                                     </div>
-                                    <div style={{display: 'flex'}}>
+                                    <div className="createplatformproperty">
                                         <TextField
                                             id="property"
                                             hintText="Property Name"
@@ -244,7 +259,7 @@ class PlatformCreate extends Component {
                                             onChange={this._onTextChange.bind(this)}
                                         /> <em/>
                                         <SelectField
-                                            style={{flex: '1 1 23% 1', margin: '0 1%'}}
+                                            className="createplatformpropertyselect"
                                             floatingLabelText="Property Type"
                                             value={selectedProperty}
                                             floatingLabelFixed={true}
@@ -262,13 +277,8 @@ class PlatformCreate extends Component {
                                     </div>
                                 </div>
                                 <div>
-                                    {/*<p style={{color: '#f44336'}}>{this.state.errors["Icon"]}</p>*/}
-                                    <p style={{color: '#BDBDBD'}}>Platform Icon*:</p>
-                                    <GridList style={{
-                                        display: 'flex',
-                                        flexWrap: 'nowrap',
-                                        overflowX: 'auto',
-                                    }} cols={1.1}>
+                                    <p className="createplatformiconp">Platform Icon*:</p>
+                                    <GridList className="createplatformicon" cols={1.1}>
                                         {this.state.icon.map((tile) => (
                                             <GridTile key={Math.floor(Math.random() * 1000)}
                                                       title={tile.name}
@@ -280,12 +290,10 @@ class PlatformCreate extends Component {
                                             </GridTile>
                                         ))}
                                         {this.state.icon.length === 0 ?
-                                            <Dropzone style={
-                                                {width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}
-                                            }
+                                            <Dropzone className="createplatformdropzone"
                                                       accept="image/jpeg, image/png"
                                                       onDrop={(icon, rejected) => {this.setState({icon, rejected})}}>
-                                                <p style={{margin: '70px 40px 70px 70px'}}>+</p>
+                                                <p className="createplatformdropzonep">+</p>
                                             </Dropzone> : <div />}
                                     </GridList>
                                 </div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
index 6a749d205e..6904d2fc86 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
@@ -21,6 +21,7 @@ import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
 import DataTable from '../UIComponents/DataTable';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
+import Theme from '../../themes/theme';
 
 /**
  * The App Create Component.
@@ -40,6 +41,17 @@ class PlatformListing extends Component {
     }
 
     componentWillMount() {
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/platform-listing.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/platform-listing.css");
+            } catch (ex) {
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/platform-listing.css");
+            }
+        }
         //Fetch all the applications from backend and create application objects.
     }
 
@@ -75,12 +87,11 @@ class PlatformListing extends Component {
 
     render() {
         return (
-            <div className="middle" style={{width: '95%', height: '100%', marginTop: '1%'}}>
-                <Card style={{display: 'flex', flexWrap: 'wrap'}}>
-                    <TextField hintText="Search"
-                               style={{float:'right', paddingRight: '2px'}}
-                               onChange={this._searchApplications.bind(this)}/>
-                    <CardTitle title="Platforms" style={{display: 'flex', flexWrap: 'wrap'}}/>
+            <div className= 'middle listingplatformmiddle'>
+                <Card className='listingplatformcard'>
+                    <TextField hintText="Search" onChange={this._searchApplications.bind(this)}
+                               className='listingplatformsearch'/>
+                    <CardTitle title="Platforms" className='listingplatformTitle'/>
                     <CardActions>
 
                     </CardActions>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
index e82528da08..badc608bcb 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
@@ -22,6 +22,7 @@ import DataTableRow from './DataTableRow';
 import DataTableHeader from './DataTableHeader';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table';
+import Theme from '../../themes/theme';
 
 /**
  * The Custom Table Component.
@@ -60,7 +61,18 @@ class DataTable extends Component {
     };
 
     componentWillMount() {
-        this.setState({data: this.props.data, headers: this.props.headers})
+        this.setState({data: this.props.data, headers: this.props.headers});
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/data-table.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/data-table.css");
+            } catch (ex) {
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/data-table.css");
+            }
+        }
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -95,8 +107,8 @@ class DataTable extends Component {
                              adjustForCheckbox={ false }>
                     <TableRow>
                         {headers.map((header) => {
-                                return (<DataTableHeader key={header.data_id}
-                                                         style={{display: 'flex'}} header={header}/>)
+                                return (<DataTableHeader key={header.data_id} className="datatableRowColumn"
+                                                         header={header}/>)
                             }
                         )}
                     </TableRow>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
index 2f6285a8dd..fda698d911 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import FlatButton from 'material-ui/FlatButton';
 import {TableHeaderColumn} from 'material-ui/Table';
+import Theme from '../../themes/theme';
 
 /**
  * Data Table header component.
@@ -31,6 +32,20 @@ class DataTableHeader extends Component {
         super();
     }
 
+    componentWillMount() {
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/data-table.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/data-table.css");
+            } catch (ex) {
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/data-table.css");
+            }
+        }
+    }
+
     /**
      * The onClick function of the table header.
      * Invokes the function passed in the header object.
@@ -48,20 +63,13 @@ class DataTableHeader extends Component {
          * */
         if (this.props.header.sortable) {
             headerCell = <FlatButton label={this.props.header.label}
-                                    onClick={this._tableHeaderClick.bind(this)}
-                                    style={{color: '#bdbdbd'}}/>;
+                                    onClick={this._tableHeaderClick.bind(this)} className="sortableHeaderCell"/>;
         } else {
-            headerCell = <span style={{position: 'relative',
-                paddingLeft: '16px',
-                paddingRight: '16px',
-                textTransform: 'uppercase',
-                fontWeight: 'normal',
-                color: '#bdbdbd',
-                fontSize: '14px'}}>{this.props.header.label}</span>;
+            headerCell = <span className="notsortableHeaderCell">{this.props.header.label}</span>;
         }
 
         return (
-            <TableHeaderColumn key={this.props.header.id} style={{paddingLeft: '0px'}} >
+            <TableHeaderColumn key={this.props.header.id} className="datatableHeaderColumn" >
                 {headerCell}
             </TableHeaderColumn>
         );
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
index 6a2a0d1e80..8162b900a9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
@@ -19,6 +19,7 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {TableRow, TableRowColumn} from 'material-ui/Table';
+import Theme from '../../themes/theme';
 
 /**
  * Data table row component.
@@ -34,7 +35,18 @@ class DataTableRow extends Component {
     }
 
     componentWillMount() {
-        this.setState({dataItem: this.props.dataItem})
+        this.setState({dataItem: this.props.dataItem});
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/data-table.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/data-table.css");
+            } catch (ex) {
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/data-table.css");
+            }
+        }
     }
 
     /**
@@ -50,7 +62,7 @@ class DataTableRow extends Component {
                 <TableRow key={this.props.key} onClick={this._handleClick.bind(this)} >
                     {Object.keys(dataItem).map((key) => {
                         if (key !== 'id') {
-                            return <TableRowColumn style={{alignItems: 'center'}}
+                            return <TableRowColumn className = "datatableRowColumn"
                                                    key={key}>{dataItem[key]}</TableRowColumn>
                         } else {
                             return <TableRowColumn key={key}/>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json
index cb7ead56b1..6cbee10974 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json
@@ -1,7 +1,6 @@
 {
-  "theme" : {
-    "current" : "default",
-    "default" : "lightBaseTheme",
-    "custom" : "custom-theme"
+  "theme": {
+    "type": "default",
+    "value": "lightBaseTheme"
   }
-}
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js
deleted file mode 100644
index 8342d4da36..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import {
-    indigo500, indigo700, redA200,
-} from 'material-ui/styles/colors';
-
-export default {
-    palette: {
-        primary1Color: indigo500,
-        primary2Color: indigo700,
-        accent1Color: redA200,
-        pickerHeaderColor: indigo500,
-    },
-};
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme/theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme/theme.js
new file mode 100644
index 0000000000..f8cfdff1bf
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme/theme.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * This a sample custom theme file. In config.json, if the following changes are done, this theme will be applied.
+ * {
+ *     "theme" : {
+ *       "type" : "custom",
+ *       "value" : "custom-theme"
+ *     }
+ *   }
+ */
+import {
+    indigo500, indigo700, redA200,
+} from 'material-ui/styles/colors';
+
+export default {
+    palette: {
+        primary1Color: indigo500,
+        primary2Color: indigo700,
+        accent1Color: redA200,
+        pickerHeaderColor: indigo500,
+    },
+};
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step1.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step1.css
new file mode 100644
index 0000000000..166de9e388
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step1.css
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.creatediv {
+    margin: 0 16px;
+}
+
+.nextButton {
+    margin-top: 12px;
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step2.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step2.css
new file mode 100644
index 0000000000..00da1e2e10
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step2.css
@@ -0,0 +1,120 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.applicationCreateChip {
+    margin: 4px;
+}
+
+.createStep2Content {
+    margin: 0 16px;
+}
+
+
+.applicationCreateWrapper {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+
+.platformSpecificPropertyDiv {
+    border: solid #BDBDBD 1px;
+}
+
+.platformSpecificPropertyP {
+    color: #BDBDBD;
+}
+
+.applicationCreateBannerError {
+    color: #f44336;
+}
+
+.applicationCreateBannerTitle {
+    color: #BDBDBD;
+}
+
+.applicationCreateGrid {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+}
+
+.applicationCreateBannerDropZone {
+    width: 300px;
+    height: 150px;
+    border: dashed #BDBDBD 1px
+}
+
+.applicationCreateBannerp {
+    margin: 70px 40px 40px 150px;
+}
+
+.applicationCreateScreenshotError {
+    color: #f44336;
+}
+
+.applicationCreateScreenshotTitle {
+    color: #BDBDBD;
+}
+
+.applicationCreateScreenshotGrid {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+}
+
+.applicationCreateScreenshotDropZone {
+    width: 150px;
+    height: 150px;
+    border: dashed #BDBDBD 1px;
+}
+
+.applicationCreateScreenshotp {
+    margin: 70px 40px 70px 70px;
+}
+
+.applcationCreateIconError {
+    color: #f44336;
+}
+
+.applicationCreateIconTitle {
+    color: #BDBDBD;
+}
+
+.applicationCreateIconGrid {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+}
+
+.applicationCreateIconDropZone {
+    width: 150px;
+    height: 150px;
+    border: dashed #BDBDBD 1px;
+}
+
+.applicationCreateIconp {
+    margin: 70px 40px 70px 70px;
+}
+
+.applicationCreateBackAndNext {
+    margin-top: 12px;
+}
+
+.applicationCreateBack {
+    margin-right: 12px;
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step3.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step3.css
new file mode 100644
index 0000000000..84c798ea42
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step3.css
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.applicationCreateStepMiddle {
+    margin: 0 16px;
+}
+
+.applicationCreateBackAndFinish {
+    margin-top: 12px;
+}
+
+.applicationCreateFinish {
+    margin-right: 12px;
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create.css
new file mode 100644
index 0000000000..27b2a51cae
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create.css
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.createapplicationmiddle {
+    width: 95%;
+    height: 100%;
+    margin-top: 1%;
+}
+
+.creataapplicationcard {
+    max-height: 700px;
+    overflow: auto;
+}
+.createapplicationcardaction {
+    width: 100%;
+    margin: auto;
+}
+
+.createapplicationcontent {
+    margin: 0 16px;
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-listing.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-listing.css
new file mode 100644
index 0000000000..ebf44d33bd
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-listing.css
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.applicationListingMiddle {
+    width: 95%;
+    height: 100%;
+    margin-top: 1%;
+}
+
+.applicationListingCard {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.applicationListingSearch {
+    float:right;
+    padding-right: 2px;
+}
+
+.applicationListTitle {
+    display: flex;
+    flex-wrap: wrap;
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/basic-layout.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/basic-layout.css
new file mode 100644
index 0000000000..360a0eb8db
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/basic-layout.css
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.basicLayoutDiv {
+    height: calc(100% - 64px);
+    margin-left: 16%;
+    width: calc(100% - 15%);
+    top: 64px;
+    left: -100px;
+}
+
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/data-table.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/data-table.css
new file mode 100644
index 0000000000..787c221d6a
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/data-table.css
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.tableRow {
+    display: flex;
+}
+
+.datatableRowColumn {
+    align-items: center;
+}
+
+.sortableHeaderCell {
+    color: #bdbdbd;
+}
+
+.notsortableHeaderCell {
+    position: relative;
+    padding-left: 16px;
+    padding-right: 16px;
+    text-transform: uppercase;
+    font-weight: normal;
+    color: #bdbdbd;
+    font-size: 14px;
+}
+
+.datatableHeaderColumn {
+    padding-left: 0;
+}
+
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-create.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-create.css
new file mode 100644
index 0000000000..234e0937b2
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-create.css
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.createplatformmiddle {
+    width: 95%;
+    height: 100%;
+    margin-top: 1%
+}
+
+.createplatformcardaction {
+    width: 100%;
+    margin: auto;
+    padding-left: 10px;
+}
+
+.createplatformproperties {
+    color: #BaBaBa;
+}
+
+.createplatformpropertyclose {
+    height: 10px;
+    width: 10px;
+}
+
+
+.createplatformproperty {
+    display: flex;
+}
+
+.createplatformpropertyselect {
+    flex: 1 1 23% 1;
+    margin: 0 1%
+}
+
+.createplatformicon {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+}
+
+.createplatformiconp {
+    color: #BDBDBD;
+}
+
+.createplatformdropzone {
+    width: 150px;
+    height: 150px;
+    border: dashed #BDBDBD 1px;
+}
+
+.createplatformdropzonep {
+    margin: 70px 40px 70px 70px
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-listing.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-listing.css
new file mode 100644
index 0000000000..b92a31736f
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-listing.css
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+
+.listingplatformmiddle {
+    width: 95%;
+    height: 100%;
+    margin-top: 1%;
+}
+
+.listingplatformcard {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.listingplatformsearch {
+    float:right;
+    padding-right: 2px;
+}
+
+.listingplatformTitle {
+    display: flex;
+    flex-wrap: wrap;
+}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js
new file mode 100644
index 0000000000..11f0d46f89
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js
@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * This class will read through the configuration file and saves the theme names for the usage in other files.
+ * User can define the themes in the config.json. The themes will be loaded based on the user preference.
+ */
+class Theme {
+    constructor() {
+        const theme = require("../config.json").theme;
+        this.currentTheme = theme.type;
+        if (this.currentTheme === "default") {
+            this.selectedTheme = theme.value;
+        } else {
+            this.selectedTheme = theme.value;
+        }
+    }
+}
+
+export default (new Theme);
\ No newline at end of file

From 5614914efa3af0a8a1e026c0b6aa8d42cddbe781 Mon Sep 17 00:00:00 2001
From: megala21 <ktumegala@yahoo.com>
Date: Tue, 12 Sep 2017 17:01:47 +0530
Subject: [PATCH 2/8] Refactoring the files

---
 .../src/main/resources/publisher/src/config.json                | 2 +-
 .../publisher/src/themes/default/application-create-step1.css   | 2 +-
 .../publisher/src/themes/default/application-create-step3.css   | 2 +-
 .../publisher/src/themes/default/application-create.css         | 2 +-
 .../publisher/src/themes/default/application-listing.css        | 2 +-
 .../resources/publisher/src/themes/default/basic-layout.css     | 1 -
 .../main/resources/publisher/src/themes/default/data-table.css  | 1 -
 .../resources/publisher/src/themes/default/platform-create.css  | 2 +-
 .../resources/publisher/src/themes/default/platform-listing.css | 2 +-
 .../src/main/resources/publisher/src/themes/theme.js            | 2 +-
 10 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json
index 6cbee10974..3be10b8ce9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/config.json
@@ -3,4 +3,4 @@
     "type": "default",
     "value": "lightBaseTheme"
   }
-}
\ No newline at end of file
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step1.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step1.css
index 166de9e388..0fbc5e2be8 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step1.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step1.css
@@ -22,4 +22,4 @@
 
 .nextButton {
     margin-top: 12px;
-}
\ No newline at end of file
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step3.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step3.css
index 84c798ea42..beca46d5dc 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step3.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step3.css
@@ -26,4 +26,4 @@
 
 .applicationCreateFinish {
     margin-right: 12px;
-}
\ No newline at end of file
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create.css
index 27b2a51cae..2fc0e368e9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create.css
@@ -33,4 +33,4 @@
 
 .createapplicationcontent {
     margin: 0 16px;
-}
\ No newline at end of file
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-listing.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-listing.css
index ebf44d33bd..ff6b17bc79 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-listing.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-listing.css
@@ -35,4 +35,4 @@
 .applicationListTitle {
     display: flex;
     flex-wrap: wrap;
-}
\ No newline at end of file
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/basic-layout.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/basic-layout.css
index 360a0eb8db..ccc768c3ca 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/basic-layout.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/basic-layout.css
@@ -23,4 +23,3 @@
     top: 64px;
     left: -100px;
 }
-
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/data-table.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/data-table.css
index 787c221d6a..849d232eb2 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/data-table.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/data-table.css
@@ -41,4 +41,3 @@
 .datatableHeaderColumn {
     padding-left: 0;
 }
-
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-create.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-create.css
index 234e0937b2..483cdedbff 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-create.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-create.css
@@ -65,4 +65,4 @@
 
 .createplatformdropzonep {
     margin: 70px 40px 70px 70px
-}
\ No newline at end of file
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-listing.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-listing.css
index b92a31736f..d9d9d594c3 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-listing.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-listing.css
@@ -36,4 +36,4 @@
 .listingplatformTitle {
     display: flex;
     flex-wrap: wrap;
-}
\ No newline at end of file
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js
index 11f0d46f89..5c8ed89cb6 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js
@@ -32,4 +32,4 @@ class Theme {
     }
 }
 
-export default (new Theme);
\ No newline at end of file
+export default (new Theme);

From 8f3d11fa0eb1553ad84739c1c4aecf2fcb47e269 Mon Sep 17 00:00:00 2001
From: megala21 <ktumegala@yahoo.com>
Date: Tue, 12 Sep 2017 22:37:45 +0530
Subject: [PATCH 3/8] refactoring theming support

---
 .../src/main/resources/publisher/src/App.jsx  |  6 ++---
 .../Application/ApplicationCreate.jsx         | 22 ++++++++---------
 .../Application/ApplicationListing.jsx        | 22 ++++++++---------
 .../Application/CreateSteps/Step1.jsx         | 24 +++++++++----------
 .../Application/CreateSteps/Step2.jsx         | 22 ++++++++---------
 .../Application/CreateSteps/Step3.jsx         | 22 ++++++++---------
 .../src/components/Base/BaseLayout.jsx        | 22 ++++++++---------
 .../components/Platform/PlatformCreate.jsx    | 22 ++++++++---------
 .../components/Platform/PlatformListing.jsx   | 22 ++++++++---------
 .../src/components/UIComponents/DataTable.jsx | 23 +++++++++---------
 .../UIComponents/DataTableHeader.jsx          | 22 ++++++++---------
 .../components/UIComponents/DataTableRow.jsx  | 23 +++++++++---------
 .../publisher/src/{themes => }/theme.js       | 12 ++++++----
 13 files changed, 133 insertions(+), 131 deletions(-)
 rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/{themes => }/theme.js (75%)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
index 8859f1897f..cf10a66754 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
@@ -31,7 +31,7 @@ import {
     PlatformCreate,
     PlatformListing
 } from './components';
-import Theme from './themes/theme';
+import Theme from './theme';
 
 
 const history = createHistory({basename: '/publisher'});
@@ -40,8 +40,8 @@ const history = createHistory({basename: '/publisher'});
  *Loading the theme files based on the the user-preference.
  */
 let muiTheme = null;
-let selected = Theme.selectedTheme;
-if (Theme.currentTheme === "default") {
+let selected = Theme.currentTheme;
+if (Theme.currentThemeType === "default") {
     let defaultTheme = require("material-ui/styles/baseThemes/" + selected);
     muiTheme = getMuiTheme(defaultTheme.default);
 } else {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
index afb03ffbaa..d4c6accb23 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
@@ -24,7 +24,6 @@ import {Step1, Step2, Step3} from './CreateSteps';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
-import Theme from '../../themes/theme';
 
 /**
  * The App Create Component.
@@ -52,16 +51,17 @@ class ApplicationCreate extends Component {
     }
 
     componentWillMount() {
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../themes/default/application-create.css");
-        } else {
-            try {
-                require("../../themes/" + selected + "/application-create.css");
-            } catch (ex){
-                // If the particular customized file does not exist, use the default one.
-                require("../../themes/default/application-create.css");
-            }
+        //Using the particular style specific to user selected theme.
+        const theme = require("../../theme").default;
+        const selected =
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
+        const applicationCreateCss = "application-create.css";
+
+        try {
+            require("../../" + theme.themeFolder + "/" + selected + "/" + applicationCreateCss);
+        } catch (ex){
+            // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationCreateCss);
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
index 2b33e409f2..bd80a3231e 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
@@ -21,7 +21,6 @@ import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
 import DataTable from '../UIComponents/DataTable';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
-import Theme from '../../themes/theme';
 
 /**
  * The App Create Component.
@@ -114,16 +113,17 @@ class ApplicationListing extends Component {
         //Fetch all the applications from backend and create application objects.
         this.setState({data: this.data});
 
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../themes/default/application-listing.css");
-        } else {
-            try {
-                require("../../themes/" + selected + "/application-listing.css");
-            } catch (ex) {
-                // If the particular customized file does not exist, use the default one.
-                require("../../themes/default/application-listing.css");
-            }
+        //Using the particular style specific to user selected theme.
+        const theme = require("../../theme").default;
+        const selected =
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
+        const applicationListingCss = "application-listing.css";
+
+        try {
+            require("../../" + theme.themeFolder + "/" + selected + "/" + applicationListingCss);
+        } catch (ex){
+            // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationListingCss);
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
index 63ee4eb6b1..44ca7752e7 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
@@ -22,9 +22,6 @@ import MenuItem from 'material-ui/MenuItem';
 import TextField from 'material-ui/TextField';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
-import Theme from '../../../themes/theme';
-
-
 
 /**
  * The first step of the application creation wizard.
@@ -54,16 +51,17 @@ class Step1 extends Component {
     }
 
     componentWillMount() {
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../../themes/default/application-create-step1.css");
-        } else {
-            try {
-                require("../../../themes/" + selected + "/application-create-step1.css");
-            } catch (ex){
-                // If the particular customized file does not exist, use the default one.
-                require("../../../themes/default/application-create-step1.css");
-            }
+        //Using the particular style specific to user selected theme.
+        const theme = require("../../../theme").default;
+        const selected =
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
+        const applicationCreationStepCss = "application-create-step1.css";
+
+        try {
+            require("../../../" + theme.themeFolder + "/" + selected + "/" + applicationCreationStepCss);
+        } catch (ex){
+            // If the particular customized file does not exist, use the default one.
+            require("../../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationCreationStepCss);
         }
         //Get the list of available platforms and set to the state.
     }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
index 9686cb8967..386251a3be 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
@@ -28,7 +28,6 @@ import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
 import Clear from 'material-ui/svg-icons/content/clear';
 import {GridList, GridTile} from 'material-ui/GridList';
-import Theme from '../../../themes/theme';
 
 /**
  * The Second step of application create wizard.
@@ -70,16 +69,17 @@ class Step2 extends Component {
     }
 
     componentWillMount() {
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../../themes/default/application-create-step2.css");
-        } else {
-            try {
-                require("../../../themes/" + selected + "/application-create-step2.css");
-            } catch (ex){
-                // If the particular customized file does not exist, use the default one.
-                require("../../../themes/default/application-create-step2.css");
-            }
+        //Using the particular style specific to user selected theme.
+        const theme = require("../../../theme").default;
+        const selected =
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
+        const applicationCreationStepCss = "application-create-step2.css";
+
+        try {
+            require("../../../" + theme.themeFolder + "/" + selected + "/" + applicationCreationStepCss);
+        } catch (ex){
+            // If the particular customized file does not exist, use the default one.
+            require("../../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationCreationStepCss);
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
index 88a279e725..c042e762d7 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
@@ -24,7 +24,6 @@ import TextField from 'material-ui/TextField';
 import FlatButton from 'material-ui/FlatButton';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
-import Theme from '../../../themes/theme';
 
 /**
  * The Third step of application create wizard. {Application Release Step}
@@ -59,16 +58,17 @@ class Step3 extends Component {
     }
 
     componentWillMount() {
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../../themes/default/application-create-step3.css");
-        } else {
-            try {
-                require("../../../themes/" + selected + "/application-create-step3.css");
-            } catch (ex){
-                // If the particular customized file does not exist, use the default one.
-                require("../../../themes/default/application-create-step3.css");
-            }
+        //Using the particular style specific to user selected theme.
+        const theme = require("../../../theme").default;
+        const selected =
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
+        const applicationCreationStepCss = "application-create-step1.css";
+
+        try {
+            require("../../../" + theme.themeFolder + "/" + selected + "/" + applicationCreationStepCss);
+        } catch (ex){
+            // If the particular customized file does not exist, use the default one.
+            require("../../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationCreationStepCss);
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
index 4a18f37c73..f14a6c99e9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
@@ -31,7 +31,6 @@ import Dashboard from 'material-ui/svg-icons/action/dashboard';
 import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
 import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
 import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
-import Theme from '../../themes/theme';
 
 
 /**
@@ -51,16 +50,17 @@ class BaseLayout extends Component {
     }
 
     componentWillMount() {
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-          require("../../themes/default/basic-layout.css");
-        } else {
-            try {
-                require("../../themes/" + selected + "/basic-layout.css");
-            } catch (ex){
-                // If the particular customized file does not exist, use the default one.
-                require("../../themes/default/basic-layout.css");
-            }
+        //Using the particular style specific to user selected theme.
+        const theme = require("../../theme").default;
+        const selected =
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
+        const basicLayoutCss = "basic-layout.css";
+
+        try {
+            require("../../" + theme.themeFolder + "/" + selected + "/" + basicLayoutCss);
+        } catch (ex){
+            // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + basicLayoutCss);
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
index fc6663f7f4..b00731772f 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
@@ -31,7 +31,6 @@ import {GridList, GridTile} from 'material-ui/GridList';
 import Close from 'material-ui/svg-icons/navigation/close';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline';
-import Theme from '../../themes/theme';
 
 /**
  * Platform Create component.
@@ -66,16 +65,17 @@ class PlatformCreate extends Component {
     }
 
     componentWillMount() {
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../themes/default/platform-create.css");
-        } else {
-            try {
-                require("../../themes/" + selected + "/platform-create.css");
-            } catch (ex) {
-                // If the particular customized file does not exist, use the default one.
-                require("../../themes/default/platform-create.css");
-            }
+        //Using the particular style specific to user selected theme.
+        const theme = require("../../theme").default;
+        const selected =
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
+        const platformCreateCss = "platform-create.css";
+
+        try {
+            require("../../" + theme.themeFolder + "/" + selected + "/" + platformCreateCss);
+        } catch (ex){
+            // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + platformCreateCss);
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
index 6904d2fc86..6853740a17 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
@@ -21,7 +21,6 @@ import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
 import DataTable from '../UIComponents/DataTable';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
-import Theme from '../../themes/theme';
 
 /**
  * The App Create Component.
@@ -41,16 +40,17 @@ class PlatformListing extends Component {
     }
 
     componentWillMount() {
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../themes/default/platform-listing.css");
-        } else {
-            try {
-                require("../../themes/" + selected + "/platform-listing.css");
-            } catch (ex) {
-                // If the particular customized file does not exist, use the default one.
-                require("../../themes/default/platform-listing.css");
-            }
+        //Using the particular style specific to user selected theme.
+        const theme = require("../../theme").default;
+        const selected =
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
+        const platformListingCss = "platform-listing.css";
+
+        try {
+            require("../../" + theme.themeFolder + "/" + selected + "/" + platformListingCss);
+        } catch (ex){
+            // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + platformListingCss);
         }
         //Fetch all the applications from backend and create application objects.
     }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
index badc608bcb..fd40970ab2 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
@@ -22,7 +22,6 @@ import DataTableRow from './DataTableRow';
 import DataTableHeader from './DataTableHeader';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table';
-import Theme from '../../themes/theme';
 
 /**
  * The Custom Table Component.
@@ -62,16 +61,18 @@ class DataTable extends Component {
 
     componentWillMount() {
         this.setState({data: this.props.data, headers: this.props.headers});
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../themes/default/data-table.css");
-        } else {
-            try {
-                require("../../themes/" + selected + "/data-table.css");
-            } catch (ex) {
-                // If the particular customized file does not exist, use the default one.
-                require("../../themes/default/data-table.css");
-            }
+
+        //Using the particular style specific to user selected theme.
+        const theme = require("../../theme").default;
+        const selected =
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
+        const dataTableCss = "data-table.css";
+
+        try {
+            require("../../" + theme.themeFolder + "/" + selected + "/" + dataTableCss);
+        } catch (ex){
+            // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + dataTableCss);
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
index fda698d911..7de68fabc9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
@@ -20,7 +20,6 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import FlatButton from 'material-ui/FlatButton';
 import {TableHeaderColumn} from 'material-ui/Table';
-import Theme from '../../themes/theme';
 
 /**
  * Data Table header component.
@@ -33,16 +32,17 @@ class DataTableHeader extends Component {
     }
 
     componentWillMount() {
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../themes/default/data-table.css");
-        } else {
-            try {
-                require("../../themes/" + selected + "/data-table.css");
-            } catch (ex) {
-                // If the particular customized file does not exist, use the default one.
-                require("../../themes/default/data-table.css");
-            }
+        //Using the particular style specific to user selected theme.
+        const theme = require("../../theme").default;
+        const selected =
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
+        const dataTableCss = "data-table.css";
+
+        try {
+            require("../../" + theme.themeFolder + "/" + selected + "/" + dataTableCss);
+        } catch (ex){
+            // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + dataTableCss);
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
index 8162b900a9..0b02fefde4 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
@@ -19,7 +19,6 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {TableRow, TableRowColumn} from 'material-ui/Table';
-import Theme from '../../themes/theme';
 
 /**
  * Data table row component.
@@ -36,16 +35,18 @@ class DataTableRow extends Component {
 
     componentWillMount() {
         this.setState({dataItem: this.props.dataItem});
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../themes/default/data-table.css");
-        } else {
-            try {
-                require("../../themes/" + selected + "/data-table.css");
-            } catch (ex) {
-                // If the particular customized file does not exist, use the default one.
-                require("../../themes/default/data-table.css");
-            }
+
+        //Using the particular style specific to user selected theme.
+        const theme = require("../../theme").default;
+        const selected =
+            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
+        const dataTableCss = "data-table.css";
+
+        try {
+            require("../../" + theme.themeFolder + "/" + selected + "/" + dataTableCss);
+        } catch (ex){
+            // If the particular customized file does not exist, use the default one.
+            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + dataTableCss);
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
similarity index 75%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
index 5c8ed89cb6..97f715bcd7 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
@@ -22,12 +22,14 @@
  */
 class Theme {
     constructor() {
-        const theme = require("../config.json").theme;
-        this.currentTheme = theme.type;
-        if (this.currentTheme === "default") {
-            this.selectedTheme = theme.value;
+        const theme = require("./config.json").theme;
+        this.currentThemeType = theme.type;
+        this.defaultThemeType = "default";
+        this.themeFolder = "themes";
+        if (this.currentThemeType === this.defaultThemeType) {
+            this.currentTheme = theme.value;
         } else {
-            this.selectedTheme = theme.value;
+            this.currentTheme = theme.value;
         }
     }
 }

From aae017d6f40eafd6f7784e701506fd21568a7911 Mon Sep 17 00:00:00 2001
From: megala21 <ktumegala@yahoo.com>
Date: Thu, 14 Sep 2017 14:30:22 +0530
Subject: [PATCH 4/8] Moving the css files to public folder

---
 .../pom.xml                                   | 37 +++------
 .../resources/publisher/public/config.json    |  6 ++
 .../resources/publisher/public/index.html     |  2 +-
 .../default/application-create-step1.css      |  0
 .../default/application-create-step2.css      |  0
 .../default/application-create-step3.css      |  0
 .../themes/default/application-create.css     |  0
 .../themes/default/application-listing.css    |  0
 .../themes/default/basic-layout.css           |  0
 .../themes/default/data-table.css             |  0
 .../themes/default/platform-create.css        |  0
 .../themes/default/platform-listing.css       |  0
 .../src/main/resources/publisher/src/App.jsx  | 54 ++++++++++++-
 .../Application/ApplicationCreate.jsx         | 64 ++++++++++++---
 .../Application/ApplicationListing.jsx        | 62 ++++++++++++---
 .../Application/CreateSteps/Step1.jsx         | 67 +++++++++++++---
 .../Application/CreateSteps/Step2.jsx         | 64 ++++++++++++---
 .../Application/CreateSteps/Step3.jsx         | 62 ++++++++++++---
 .../src/components/Base/BaseLayout.jsx        | 64 ++++++++++++---
 .../components/Platform/PlatformCreate.jsx    | 60 ++++++++++++--
 .../components/Platform/PlatformListing.jsx   | 62 ++++++++++++---
 .../src/components/UIComponents/DataTable.jsx | 59 +++++++++++---
 .../UIComponents/DataTableHeader.jsx          | 61 +++++++++++++--
 .../components/UIComponents/DataTableRow.jsx  | 59 ++++++++++++--
 .../src/main/resources/publisher/src/theme.js | 37 ---------
 .../theme.js => custom-theme.js}              |  0
 .../resources/publisher/src/themes/theme.js   | 78 +++++++++++++++++++
 .../resources/publisher/webpack.config.js     |  5 ++
 28 files changed, 732 insertions(+), 171 deletions(-)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/config.json
 rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/{src => public}/themes/default/application-create-step1.css (100%)
 rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/{src => public}/themes/default/application-create-step2.css (100%)
 rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/{src => public}/themes/default/application-create-step3.css (100%)
 rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/{src => public}/themes/default/application-create.css (100%)
 rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/{src => public}/themes/default/application-listing.css (100%)
 rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/{src => public}/themes/default/basic-layout.css (100%)
 rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/{src => public}/themes/default/data-table.css (100%)
 rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/{src => public}/themes/default/platform-create.css (100%)
 rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/{src => public}/themes/default/platform-listing.css (100%)
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
 rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/{custom-theme/theme.js => custom-theme.js} (100%)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/pom.xml b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/pom.xml
index e7d27b5f74..3398d23ce2 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/pom.xml
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/pom.xml
@@ -31,32 +31,6 @@
 
     <build>
         <plugins>
-            <plugin>
-                <groupId>org.wso2.maven</groupId>
-                <artifactId>carbon-p2-plugin</artifactId>
-                <version>${carbon.p2.plugin.version}</version>
-                <executions>
-                    <execution>
-                        <id>4-p2-feature-generation</id>
-                        <phase>package</phase>
-                        <goals>
-                            <goal>p2-feature-gen</goal>
-                        </goals>
-                        <configuration>
-                            <id>org.wso2.carbon.device.application.mgt</id>
-                            <propertiesFile>../../etc/feature.properties</propertiesFile>
-                            <adviceFile>
-                                <properties>
-                                    <propertyDef>org.wso2.carbon.p2.category.type:server
-                                    </propertyDef>
-                                    <propertyDef>org.eclipse.equinox.p2.type.group:false
-                                    </propertyDef>
-                                </properties>
-                            </adviceFile>
-                        </configuration>
-                    </execution>
-                </executions>
-            </plugin>
             <plugin>
                 <groupId>org.codehaus.mojo</groupId>
                 <artifactId>exec-maven-plugin</artifactId>
@@ -96,8 +70,15 @@
                     <workingDirectory>${npm.working.dir}</workingDirectory>
                 </configuration>
             </plugin>
-
         </plugins>
+        <resources>
+            <resource>
+                <directory>${project.build.directory}/target</directory>
+            </resource>
+            <resource>
+                <directory>src/main/resources</directory>
+            </resource>
+        </resources>
     </build>
     <profiles>
         <profile>
@@ -116,7 +97,7 @@
     <properties>
         <maven.test.skip>false</maven.test.skip>
         <npm.executable>npm</npm.executable>
-        <npm.build.command>build_prod</npm.build.command>
+        <npm.build.command>build_dev</npm.build.command>
         <npm.working.dir>./src/main/</npm.working.dir>
     </properties>
 </project>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/config.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/config.json
new file mode 100644
index 0000000000..3be10b8ce9
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/config.json
@@ -0,0 +1,6 @@
+{
+  "theme": {
+    "type": "default",
+    "value": "lightBaseTheme"
+  }
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/index.html b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/index.html
index 0e627f4af5..efce6b8d1c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/index.html
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/index.html
@@ -39,11 +39,11 @@
     <title>WSO2 IoT App Publisher</title>
   </head>
   <body>
-    <script src='./dist/index.js'></script>
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
+    <script src='./dist/index.js'></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step1.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step1.css
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step1.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step1.css
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step2.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step2.css
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step2.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step2.css
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step3.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step3.css
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create-step3.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step3.css
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create.css
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-create.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create.css
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-listing.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-listing.css
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/application-listing.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-listing.css
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/basic-layout.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/basic-layout.css
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/basic-layout.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/basic-layout.css
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/data-table.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/data-table.css
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/data-table.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/data-table.css
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-create.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-create.css
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-create.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-create.css
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-listing.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-listing.css
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/default/platform-listing.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-listing.css
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
index cf10a66754..c3b7156eb3 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
@@ -31,23 +31,26 @@ import {
     PlatformCreate,
     PlatformListing
 } from './components';
-import Theme from './theme';
+import Theme from './themes/theme';
 
 
 const history = createHistory({basename: '/publisher'});
 
+<<<<<<< HEAD
+=======
 /**
  *Loading the theme files based on the the user-preference.
  */
 let muiTheme = null;
-let selected = Theme.currentTheme;
-if (Theme.currentThemeType === "default") {
+let selected = Theme.selectedTheme;
+if (Theme.currentTheme === "default") {
     let defaultTheme = require("material-ui/styles/baseThemes/" + selected);
     muiTheme = getMuiTheme(defaultTheme.default);
 } else {
     let customTheme = require("./themes/" + selected + "/theme.js");
     muiTheme = getMuiTheme(customTheme.default);
 }
+>>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * This component defines the layout and the routes for the app.
@@ -104,10 +107,53 @@ class Base extends Component {
  *
  * */
 class Publisher extends Component {
+    constructor() {
+        super();
+        this.state = {
+            muiTheme: null,
+            selectedType: null,
+            selectedTheme: null
+        };
+        this.setTheme = this.setTheme.bind(this);
+    }
+
+    componentDidMount() {
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        let promisedConfig = Theme.loadThemeProperties();
+        promisedConfig.then(this.setTheme).catch(function (error) {
+            console.log(error);
+
+        });
+    }
+
+    setTheme(response) {
+        this.setState({
+            selectedType: response.data.theme.type,
+            selectedTheme: response.data.theme.value
+        });
+
+        Theme.currentThemeType = this.state.selectedType;
+        Theme.currentTheme = this.state.selectedTheme;
+
+        if (this.state.selectedType === "default") {
+            let defaultTheme = require("material-ui/styles/baseThemes/" + this.state.selectedTheme);
+            this.setState({
+                muiTheme : getMuiTheme(defaultTheme.default)
+            });
+        } else {
+            let customTheme = require("./themes/" + this.state.selectedTheme);
+            this.setState({
+                muiTheme : getMuiTheme(customTheme.default)
+            });
+        }
+
+    }
     render() {
         return (
             <div className="App">
-                <MuiThemeProvider muiTheme={muiTheme}>
+                <MuiThemeProvider muiTheme={this.state.muiTheme}>
                 <Router basename="publisher" history={history}>
                     <Switch>
                         <Route path="/login" component={Login}/>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
index d4c6accb23..0924c15a39 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
@@ -24,6 +24,11 @@ import {Step1, Step2, Step3} from './CreateSteps';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
+<<<<<<< HEAD
+import Theme from '../../theme';
+=======
+import Theme from '../../themes/theme';
+>>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * The App Create Component.
@@ -51,17 +56,56 @@ class ApplicationCreate extends Component {
     }
 
     componentWillMount() {
-        //Using the particular style specific to user selected theme.
-        const theme = require("../../theme").default;
+<<<<<<< HEAD
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
         const selected =
-            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
-        const applicationCreateCss = "application-create.css";
-
-        try {
-            require("../../" + theme.themeFolder + "/" + selected + "/" + applicationCreateCss);
-        } catch (ex){
-            // If the particular customized file does not exist, use the default one.
-            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationCreateCss);
+            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
+        const applicationCreateStepCss = "application-create.css";
+        const applicationCreateStepId = "application-create";
+        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStepCss;
+        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let styleSheet = document.getElementById(applicationCreateStepId);
+        let head = document.getElementsByTagName("head")[0];
+        let link = document.createElement("link");
+        link.type = Theme.styleSheetType;
+        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+        link.id = applicationCreateStepId;
+        link.rel = Theme.styleSheetRel;
+
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+        }
+        promisedConfig.then(function () {
+            head.appendChild(link);
+        }).catch(function () {
+            // If there is no customized css file, load the default one.
+            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + applicationCreateStepCss;
+            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+            head.appendChild(link);
+
+        });
+    }
+
+    componentWillUnmount() {
+        let styleSheet = document.getElementById("application-create");
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+=======
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/application-create.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/application-create.css");
+            } catch (ex){
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/application-create.css");
+            }
+>>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
index bd80a3231e..6a3e767603 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
@@ -21,6 +21,11 @@ import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
 import DataTable from '../UIComponents/DataTable';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
+<<<<<<< HEAD
+import Theme from '../../theme';
+=======
+import Theme from '../../themes/theme';
+>>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * The App Create Component.
@@ -112,21 +117,60 @@ class ApplicationListing extends Component {
     componentWillMount() {
         //Fetch all the applications from backend and create application objects.
         this.setState({data: this.data});
-
-        //Using the particular style specific to user selected theme.
-        const theme = require("../../theme").default;
+<<<<<<< HEAD
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
         const selected =
-            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
+            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
         const applicationListingCss = "application-listing.css";
+        const applicationListingId = "application-listing";
+        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + applicationListingCss;
+        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let styleSheet = document.getElementById(applicationListingId);
+        let head = document.getElementsByTagName("head")[0];
+        let link = document.createElement("link");
+        link.type = Theme.styleSheetType;
+        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+        link.id = applicationListingId;
+        link.rel = Theme.styleSheetRel;
+
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+        }
+        promisedConfig.then(function () {
+            head.appendChild(link);
+        }).catch(function () {
+            // If there is no customized css file, load the default one.
+            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + applicationListingCss;
+            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+            head.appendChild(link);
+        });
+    }
 
-        try {
-            require("../../" + theme.themeFolder + "/" + selected + "/" + applicationListingCss);
-        } catch (ex){
-            // If the particular customized file does not exist, use the default one.
-            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationListingCss);
+    componentWillUnmount() {
+        let styleSheet = document.getElementById("application-listing");
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+=======
+
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/application-listing.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/application-listing.css");
+            } catch (ex) {
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/application-listing.css");
+            }
+>>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
+
     /**
      * Handles the search action.
      * When typing in the search bar, this method will be invoked.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
index 44ca7752e7..3e73c03890 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
@@ -19,9 +19,15 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import MenuItem from 'material-ui/MenuItem';
-import TextField from 'material-ui/TextField';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
+<<<<<<< HEAD
+import Theme from '../../../theme';
+=======
+import Theme from '../../../themes/theme';
+
+
+>>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * The first step of the application creation wizard.
@@ -51,19 +57,56 @@ class Step1 extends Component {
     }
 
     componentWillMount() {
-        //Using the particular style specific to user selected theme.
-        const theme = require("../../../theme").default;
+<<<<<<< HEAD
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
         const selected =
-            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
-        const applicationCreationStepCss = "application-create-step1.css";
-
-        try {
-            require("../../../" + theme.themeFolder + "/" + selected + "/" + applicationCreationStepCss);
-        } catch (ex){
-            // If the particular customized file does not exist, use the default one.
-            require("../../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationCreationStepCss);
+            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
+        const applicationCreateStep1Css = "application-create-step1.css";
+        const applicationCreateStep1Id = "application-create-step1";
+        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStep1Css;
+        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let styleSheet = document.getElementById(applicationCreateStep1Id);
+        let head = document.getElementsByTagName("head")[0];
+        let link = document.createElement("link");
+        link.type = Theme.styleSheetType;
+        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+        link.id = applicationCreateStep1Id;
+        link.rel = Theme.styleSheetRel;
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+        }
+
+        promisedConfig.then(function () {
+            head.appendChild(link);
+        }).catch(function () {
+            // If there is no customized css file, load the default one.
+            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + applicationCreateStep1Css;
+            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+            head.appendChild(link);
+        });
+    }
+
+    componentWillUnmount() {
+        let styleSheet = document.getElementById("application-create-step1");
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+=======
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../../themes/default/application-create-step1.css");
+        } else {
+            try {
+                require("../../../themes/" + selected + "/application-create-step1.css");
+            } catch (ex){
+                // If the particular customized file does not exist, use the default one.
+                require("../../../themes/default/application-create-step1.css");
+            }
+>>>>>>> parent of 8f3d11f... refactoring theming support
         }
-        //Get the list of available platforms and set to the state.
     }
 
     /**
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
index 386251a3be..2440534c00 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
@@ -28,6 +28,11 @@ import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
 import Clear from 'material-ui/svg-icons/content/clear';
 import {GridList, GridTile} from 'material-ui/GridList';
+<<<<<<< HEAD
+import Theme from '../../../theme';
+=======
+import Theme from '../../../themes/theme';
+>>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * The Second step of application create wizard.
@@ -69,17 +74,56 @@ class Step2 extends Component {
     }
 
     componentWillMount() {
-        //Using the particular style specific to user selected theme.
-        const theme = require("../../../theme").default;
+<<<<<<< HEAD
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
         const selected =
-            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
-        const applicationCreationStepCss = "application-create-step2.css";
-
-        try {
-            require("../../../" + theme.themeFolder + "/" + selected + "/" + applicationCreationStepCss);
-        } catch (ex){
-            // If the particular customized file does not exist, use the default one.
-            require("../../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationCreationStepCss);
+            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
+        const applicationCreateStep2Css = "application-create-step2.css";
+        const applicationCreateStep2Id = "application-create-step2";
+        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStep2Css;
+        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let styleSheet = document.getElementById(applicationCreateStep2Id);
+        let head = document.getElementsByTagName("head")[0];
+        let link = document.createElement("link");
+        link.type = Theme.styleSheetType;
+        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+        link.id = applicationCreateStep2Id;
+        link.rel = Theme.styleSheetRel;
+
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+        }
+
+        promisedConfig.then(function() {
+            head.appendChild(link);
+        }).catch(function () {
+            // If there is no customized css file, load the default one.
+            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + applicationCreateStep2Css;
+            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+
+        });
+    }
+
+    componentWillUnmount() {
+        let styleSheet = document.getElementById("application-create-step2");
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+=======
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../../themes/default/application-create-step2.css");
+        } else {
+            try {
+                require("../../../themes/" + selected + "/application-create-step2.css");
+            } catch (ex){
+                // If the particular customized file does not exist, use the default one.
+                require("../../../themes/default/application-create-step2.css");
+            }
+>>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
index c042e762d7..57eb37e67a 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
@@ -24,6 +24,11 @@ import TextField from 'material-ui/TextField';
 import FlatButton from 'material-ui/FlatButton';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
+<<<<<<< HEAD
+import Theme from '../../../theme';
+=======
+import Theme from '../../../themes/theme';
+>>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * The Third step of application create wizard. {Application Release Step}
@@ -58,17 +63,56 @@ class Step3 extends Component {
     }
 
     componentWillMount() {
-        //Using the particular style specific to user selected theme.
-        const theme = require("../../../theme").default;
+<<<<<<< HEAD
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
         const selected =
-            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
-        const applicationCreationStepCss = "application-create-step1.css";
+            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
+        const applicationCreateStep3Css = "application-create-step3.css";
+        const applicationCreateStep3Id = "application-create-step3";
+        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStep3Css;
+        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let styleSheet = document.getElementById(applicationCreateStep3Id);
+        let head = document.getElementsByTagName("head")[0];
+        let link = document.createElement("link");
+        link.type = Theme.styleSheetType;
+        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+        link.id = applicationCreateStep3Id;
+        link.rel = Theme.styleSheetRel;
 
-        try {
-            require("../../../" + theme.themeFolder + "/" + selected + "/" + applicationCreationStepCss);
-        } catch (ex){
-            // If the particular customized file does not exist, use the default one.
-            require("../../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + applicationCreationStepCss);
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+        }
+
+        promisedConfig.then(function() {
+            head.appendChild(link);
+        }).catch(function () {
+            // If there is no customized css file, load the default one.
+            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + applicationCreateStep3Css;
+            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+            head.appendChild(link);
+        });
+    }
+
+    componentWillUnmount() {
+        let styleSheet = document.getElementById("application-create-step3");
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+=======
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../../themes/default/application-create-step3.css");
+        } else {
+            try {
+                require("../../../themes/" + selected + "/application-create-step3.css");
+            } catch (ex){
+                // If the particular customized file does not exist, use the default one.
+                require("../../../themes/default/application-create-step3.css");
+            }
+>>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
index f14a6c99e9..9289559459 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
@@ -27,10 +27,14 @@ import {List, ListItem} from 'material-ui/List';
 import Apps from 'material-ui/svg-icons/navigation/apps';
 import Add from 'material-ui/svg-icons/content/add-circle';
 import Feedback from 'material-ui/svg-icons/action/feedback';
-import Dashboard from 'material-ui/svg-icons/action/dashboard';
 import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
 import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
 import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
+<<<<<<< HEAD
+import Theme from '../../theme';
+=======
+import Theme from '../../themes/theme';
+>>>>>>> parent of 8f3d11f... refactoring theming support
 
 
 /**
@@ -50,17 +54,58 @@ class BaseLayout extends Component {
     }
 
     componentWillMount() {
-        //Using the particular style specific to user selected theme.
-        const theme = require("../../theme").default;
+<<<<<<< HEAD
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
+        console.log(Theme.currentThemeType);
         const selected =
-            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
+            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
         const basicLayoutCss = "basic-layout.css";
+        const basicLayoutId = "basic-layout";
+        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + basicLayoutCss;
+        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let styleSheet = document.getElementById(basicLayoutId);
+        let head = document.getElementsByTagName("head")[0];
+        let link = document.createElement("link");
+        link.type = Theme.styleSheetType;
+        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+        link.id = basicLayoutId;
+        link.rel = Theme.styleSheetRel;
+
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+        }
+
+        promisedConfig.then(function() {
+            head.appendChild(link);
+        }).catch(function () {
+            // If there is no customized css file, load the default one.
+            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + basicLayoutCss;
+            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+            head.appendChild(link);
+        });
 
-        try {
-            require("../../" + theme.themeFolder + "/" + selected + "/" + basicLayoutCss);
-        } catch (ex){
-            // If the particular customized file does not exist, use the default one.
-            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + basicLayoutCss);
+    }
+
+    componentWillUnmount() {
+        let styleSheet = document.getElementById("basic-layout");
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+=======
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+          require("../../themes/default/basic-layout.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/basic-layout.css");
+            } catch (ex){
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/basic-layout.css");
+            }
+>>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
@@ -98,6 +143,7 @@ class BaseLayout extends Component {
 
     render() {
         return (
+
             <div>
                 <AppBar title="App Publisher"
                         iconElementRight={
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
index b00731772f..d7b22474ac 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
@@ -31,6 +31,11 @@ import {GridList, GridTile} from 'material-ui/GridList';
 import Close from 'material-ui/svg-icons/navigation/close';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline';
+<<<<<<< HEAD
+import Theme from '../../theme';
+=======
+import Theme from '../../themes/theme';
+>>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * Platform Create component.
@@ -65,17 +70,56 @@ class PlatformCreate extends Component {
     }
 
     componentWillMount() {
-        //Using the particular style specific to user selected theme.
-        const theme = require("../../theme").default;
+<<<<<<< HEAD
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
         const selected =
-            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
+            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
         const platformCreateCss = "platform-create.css";
+        const platformCreateId = "application-listing";
+        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + platformCreateCss;
+        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let styleSheet = document.getElementById(platformCreateId);
+        let head = document.getElementsByTagName("head")[0];
+        let link = document.createElement("link");
+        link.type = Theme.styleSheetType;
+        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+        link.id = platformCreateId;
+        link.rel = Theme.styleSheetRel;
 
-        try {
-            require("../../" + theme.themeFolder + "/" + selected + "/" + platformCreateCss);
-        } catch (ex){
-            // If the particular customized file does not exist, use the default one.
-            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + platformCreateCss);
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+        }
+
+        promisedConfig.then(function(){
+            head.appendChild(link);
+        }).catch(function () {
+            // If there is no customized css file, load the default one.
+            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + platformCreateCss;
+            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+            head.appendChild(link);
+        });
+    }
+
+    componentWillUnmount() {
+        let styleSheet = document.getElementById("platform-create");
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+=======
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/platform-create.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/platform-create.css");
+            } catch (ex) {
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/platform-create.css");
+            }
+>>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
index 6853740a17..b7e368f168 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
@@ -21,6 +21,11 @@ import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
 import DataTable from '../UIComponents/DataTable';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
+<<<<<<< HEAD
+import Theme from '../../theme';
+=======
+import Theme from '../../themes/theme';
+>>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * The App Create Component.
@@ -40,19 +45,58 @@ class PlatformListing extends Component {
     }
 
     componentWillMount() {
-        //Using the particular style specific to user selected theme.
-        const theme = require("../../theme").default;
+<<<<<<< HEAD
+        console.log(Theme.currentThemeType);
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
         const selected =
-            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
+            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
         const platformListingCss = "platform-listing.css";
+        const platformListingId = "platform-listing";
+        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + platformListingCss;
+        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let styleSheet = document.getElementById(platformListingId);
+        let head = document.getElementsByTagName("head")[0];
+        let link = document.createElement("link");
+        link.type = Theme.styleSheetType;
+        link.id = platformListingId;
+        link.rel = Theme.styleSheetRel;
 
-        try {
-            require("../../" + theme.themeFolder + "/" + selected + "/" + platformListingCss);
-        } catch (ex){
-            // If the particular customized file does not exist, use the default one.
-            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + platformListingCss);
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+        }
+
+        promisedConfig.then(function () {
+            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+            head.appendChild(link);
+        }).catch(function () {
+            // If there is no customized css file, load the default one.
+            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + platformListingCss;
+            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+            head.appendChild(link);
+        });
+    }
+
+    componentWillUnmount() {
+        let styleSheet = document.getElementById("platform-listing");
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+=======
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/platform-listing.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/platform-listing.css");
+            } catch (ex) {
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/platform-listing.css");
+            }
+>>>>>>> parent of 8f3d11f... refactoring theming support
         }
-        //Fetch all the applications from backend and create application objects.
     }
 
     /**
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
index fd40970ab2..75f5610887 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
@@ -22,6 +22,11 @@ import DataTableRow from './DataTableRow';
 import DataTableHeader from './DataTableHeader';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table';
+<<<<<<< HEAD
+import Theme from '../../theme';
+=======
+import Theme from '../../themes/theme';
+>>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * The Custom Table Component.
@@ -61,18 +66,54 @@ class DataTable extends Component {
 
     componentWillMount() {
         this.setState({data: this.props.data, headers: this.props.headers});
-
-        //Using the particular style specific to user selected theme.
-        const theme = require("../../theme").default;
+<<<<<<< HEAD
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
         const selected =
-            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
+            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
         const dataTableCss = "data-table.css";
+        const dataTableId = "data-table";
+        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + dataTableCss;
+        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let styleSheet = document.getElementById(dataTableId);
+        let head = document.getElementsByTagName("head")[0];
+        let link = document.createElement("link"); link.type = Theme.styleSheetType;
+        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+        link.id = dataTableId;
+        link.rel = Theme.styleSheetRel;
+
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+        }
+        promisedConfig.then(function() {
+            head.appendChild(link);
+        }).catch(function () {
+            // If there is no customized css file, load the default one.
+            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + dataTableCss;
+            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+            head.appendChild(link);
+        });
+    }
 
-        try {
-            require("../../" + theme.themeFolder + "/" + selected + "/" + dataTableCss);
-        } catch (ex){
-            // If the particular customized file does not exist, use the default one.
-            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + dataTableCss);
+    componentWillUnmount() {
+        let styleSheet = document.getElementById("data-table");
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+=======
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/data-table.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/data-table.css");
+            } catch (ex) {
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/data-table.css");
+            }
+>>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
index 7de68fabc9..5fad36b717 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
@@ -20,6 +20,11 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import FlatButton from 'material-ui/FlatButton';
 import {TableHeaderColumn} from 'material-ui/Table';
+<<<<<<< HEAD
+import Theme from '../../theme';
+=======
+import Theme from '../../themes/theme';
+>>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * Data Table header component.
@@ -32,17 +37,57 @@ class DataTableHeader extends Component {
     }
 
     componentWillMount() {
-        //Using the particular style specific to user selected theme.
-        const theme = require("../../theme").default;
+<<<<<<< HEAD
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
         const selected =
-            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
+            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
         const dataTableCss = "data-table.css";
+        const dataTableId = "data-table";
+        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + dataTableCss;
+        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let styleSheet = document.getElementById(dataTableId);
+        let head = document.getElementsByTagName("head")[0];
+        let link = document.createElement("link");
+        link.type = Theme.styleSheetType;
+        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+        link.id = dataTableId;
+        link.rel = Theme.styleSheetRel;
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+        }
+
+        promisedConfig.then(function() {
+            head.appendChild(link);
+        }).catch(function () {
+            // If there is no customized css file, load the default one.
+            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + dataTableCss;
+            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+            head.appendChild(link);
+        });
+
 
-        try {
-            require("../../" + theme.themeFolder + "/" + selected + "/" + dataTableCss);
-        } catch (ex){
-            // If the particular customized file does not exist, use the default one.
-            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + dataTableCss);
+    }
+
+    componentWillUnmount() {
+        let styleSheet = document.getElementById("data-table");
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+=======
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/data-table.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/data-table.css");
+            } catch (ex) {
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/data-table.css");
+            }
+>>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
index 0b02fefde4..dc5e2de832 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
@@ -19,6 +19,11 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {TableRow, TableRowColumn} from 'material-ui/Table';
+<<<<<<< HEAD
+import Theme from '../../theme';
+=======
+import Theme from '../../themes/theme';
+>>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * Data table row component.
@@ -35,18 +40,56 @@ class DataTableRow extends Component {
 
     componentWillMount() {
         this.setState({dataItem: this.props.dataItem});
+<<<<<<< HEAD
 
-        //Using the particular style specific to user selected theme.
-        const theme = require("../../theme").default;
+        /**
+         *Loading the theme files based on the the user-preference.
+         */
         const selected =
-            (theme.currentThemeType === theme.defaultThemeType) ? theme.defaultThemeType : theme.currentTheme;
+            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
         const dataTableCss = "data-table.css";
+        const dataTableId = "data-table";
+        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + dataTableCss;
+        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let styleSheet = document.getElementById(dataTableId);
+        let head = document.getElementsByTagName("head")[0];
+        let link = document.createElement("link");
+        link.type = Theme.styleSheetType;
+        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+        link.id = dataTableId;
+        link.rel = Theme.styleSheetRel;
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+        }
+
+        promisedConfig.then(function() {
+            head.appendChild(link);
+        }).catch(function () {
+            // If there is no customized css file, load the default one.
+            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + dataTableCss;
+            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
+            head.appendChild(link);
+        });
+    }
 
-        try {
-            require("../../" + theme.themeFolder + "/" + selected + "/" + dataTableCss);
-        } catch (ex){
-            // If the particular customized file does not exist, use the default one.
-            require("../../" + theme.themeFolder + "/" + theme.defaultThemeType + "/" + dataTableCss);
+    componentWillUnmount() {
+        let styleSheet = document.getElementById("data-table");
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+=======
+        let selected = Theme.selectedTheme;
+        if (Theme.currentTheme === "default") {
+            require("../../themes/default/data-table.css");
+        } else {
+            try {
+                require("../../themes/" + selected + "/data-table.css");
+            } catch (ex) {
+                // If the particular customized file does not exist, use the default one.
+                require("../../themes/default/data-table.css");
+            }
+>>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
deleted file mode 100644
index 97f715bcd7..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
- *
- * WSO2 Inc. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-/**
- * This class will read through the configuration file and saves the theme names for the usage in other files.
- * User can define the themes in the config.json. The themes will be loaded based on the user preference.
- */
-class Theme {
-    constructor() {
-        const theme = require("./config.json").theme;
-        this.currentThemeType = theme.type;
-        this.defaultThemeType = "default";
-        this.themeFolder = "themes";
-        if (this.currentThemeType === this.defaultThemeType) {
-            this.currentTheme = theme.value;
-        } else {
-            this.currentTheme = theme.value;
-        }
-    }
-}
-
-export default (new Theme);
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme/theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js
similarity index 100%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme/theme.js
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/custom-theme.js
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js
new file mode 100644
index 0000000000..014957cf65
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js
@@ -0,0 +1,78 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import axios from 'axios';
+
+/**
+ * This class will read through the configuration file and saves the theme names for the usage in other files.
+ * User can define the themes in the config.json. The themes will be loaded based on the user preference.
+ */
+class Theme {
+    constructor() {
+<<<<<<< HEAD:components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
+        this.defaultThemeType =  "default";
+        this.currentThemeType =  this.defaultThemeType;
+        this.currentTheme = "lightBaseTheme";
+        this.themeFolder =  "themes";
+        this.styleSheetType = "text/css";
+        this.styleSheetRel = "stylesheet";
+
+        //TODO Need to get the app context properly when the server is ready
+        this.baseURL = window.location.origin;
+        this.appContext = window.location.pathname.split("/")[1];
+        this.loadThemeProperties.bind(this);
+        this.loadThemeFiles.bind(this);
+=======
+        const theme = require("../config.json").theme;
+        this.currentTheme = theme.type;
+        if (this.currentTheme === "default") {
+            this.selectedTheme = theme.value;
+        } else {
+            this.selectedTheme = theme.value;
+        }
+>>>>>>> parent of 8f3d11f... refactoring theming support:components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js
+    }
+
+    loadThemeProperties () {
+        let httpClient = axios.create({
+            baseURL: this.baseURL + "/" + this.appContext + "/config.json",
+            timeout: 2000
+        });
+        httpClient.defaults.headers.post['Content-Type'] = 'application/json';
+        return httpClient.get();
+    }
+
+    loadTheme () {
+        let httpClient = axios.create({
+            baseURL: this.baseURL + "/" + this.appContext + "/themes/custom-theme/theme.js",
+            timeout: 2000
+        });
+        return httpClient.get();
+    }
+
+    loadThemeFiles (path) {
+        let httpClient = axios.create({
+            baseURL: this.baseURL + "/" + this.appContext +  path,
+            timeout: 2000
+        });
+        return httpClient.get();
+    }
+
+}
+
+export default (new Theme);
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js
index c6483f4aaa..e09918c714 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js
@@ -58,7 +58,12 @@ const config = {
                 }]
             }
         ]
+    },
+    resolve: {
+        // you can now require('file') instead of require('file.coffee')
+        extensions: ['.jsx', '.js']
     }
+
 };
 
 if (process.env.NODE_ENV === "development") {

From d2d56a3dac11570cf9625761c8affb76165412ed Mon Sep 17 00:00:00 2001
From: megala21 <ktumegala@yahoo.com>
Date: Thu, 14 Sep 2017 14:32:42 +0530
Subject: [PATCH 5/8] Refactoring

---
 .../src/main/resources/publisher/src/App.jsx  | 17 +----------------
 .../Application/ApplicationCreate.jsx         | 17 -----------------
 .../Application/ApplicationListing.jsx        | 18 ------------------
 .../Application/CreateSteps/Step1.jsx         | 19 -------------------
 .../Application/CreateSteps/Step2.jsx         | 17 -----------------
 .../Application/CreateSteps/Step3.jsx         | 17 -----------------
 .../src/components/Base/BaseLayout.jsx        | 17 -----------------
 .../components/Platform/PlatformCreate.jsx    | 17 -----------------
 .../components/Platform/PlatformListing.jsx   | 17 -----------------
 .../src/components/UIComponents/DataTable.jsx | 17 -----------------
 .../UIComponents/DataTableHeader.jsx          | 17 -----------------
 .../components/UIComponents/DataTableRow.jsx  | 19 +------------------
 .../publisher/src/{themes => }/theme.js       | 10 ----------
 13 files changed, 2 insertions(+), 217 deletions(-)
 rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/{themes => }/theme.js (79%)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
index c3b7156eb3..b3cac96869 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
@@ -31,26 +31,11 @@ import {
     PlatformCreate,
     PlatformListing
 } from './components';
-import Theme from './themes/theme';
+import Theme from './theme';
 
 
 const history = createHistory({basename: '/publisher'});
 
-<<<<<<< HEAD
-=======
-/**
- *Loading the theme files based on the the user-preference.
- */
-let muiTheme = null;
-let selected = Theme.selectedTheme;
-if (Theme.currentTheme === "default") {
-    let defaultTheme = require("material-ui/styles/baseThemes/" + selected);
-    muiTheme = getMuiTheme(defaultTheme.default);
-} else {
-    let customTheme = require("./themes/" + selected + "/theme.js");
-    muiTheme = getMuiTheme(customTheme.default);
-}
->>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * This component defines the layout and the routes for the app.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
index 0924c15a39..6e0d91f93e 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
@@ -24,11 +24,7 @@ import {Step1, Step2, Step3} from './CreateSteps';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
-<<<<<<< HEAD
 import Theme from '../../theme';
-=======
-import Theme from '../../themes/theme';
->>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * The App Create Component.
@@ -56,7 +52,6 @@ class ApplicationCreate extends Component {
     }
 
     componentWillMount() {
-<<<<<<< HEAD
         /**
          *Loading the theme files based on the the user-preference.
          */
@@ -94,18 +89,6 @@ class ApplicationCreate extends Component {
         if (styleSheet !== null) {
             styleSheet.disabled = true;
             styleSheet.parentNode.removeChild(styleSheet);
-=======
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../themes/default/application-create.css");
-        } else {
-            try {
-                require("../../themes/" + selected + "/application-create.css");
-            } catch (ex){
-                // If the particular customized file does not exist, use the default one.
-                require("../../themes/default/application-create.css");
-            }
->>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
index 6a3e767603..f5825bb635 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
@@ -21,11 +21,7 @@ import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
 import DataTable from '../UIComponents/DataTable';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
-<<<<<<< HEAD
 import Theme from '../../theme';
-=======
-import Theme from '../../themes/theme';
->>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * The App Create Component.
@@ -117,7 +113,6 @@ class ApplicationListing extends Component {
     componentWillMount() {
         //Fetch all the applications from backend and create application objects.
         this.setState({data: this.data});
-<<<<<<< HEAD
         /**
          *Loading the theme files based on the the user-preference.
          */
@@ -154,19 +149,6 @@ class ApplicationListing extends Component {
         if (styleSheet !== null) {
             styleSheet.disabled = true;
             styleSheet.parentNode.removeChild(styleSheet);
-=======
-
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../themes/default/application-listing.css");
-        } else {
-            try {
-                require("../../themes/" + selected + "/application-listing.css");
-            } catch (ex) {
-                // If the particular customized file does not exist, use the default one.
-                require("../../themes/default/application-listing.css");
-            }
->>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
index 3e73c03890..1bb540ac0c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
@@ -21,13 +21,7 @@ import React, {Component} from 'react';
 import MenuItem from 'material-ui/MenuItem';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
-<<<<<<< HEAD
 import Theme from '../../../theme';
-=======
-import Theme from '../../../themes/theme';
-
-
->>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * The first step of the application creation wizard.
@@ -57,7 +51,6 @@ class Step1 extends Component {
     }
 
     componentWillMount() {
-<<<<<<< HEAD
         /**
          *Loading the theme files based on the the user-preference.
          */
@@ -94,18 +87,6 @@ class Step1 extends Component {
         if (styleSheet !== null) {
             styleSheet.disabled = true;
             styleSheet.parentNode.removeChild(styleSheet);
-=======
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../../themes/default/application-create-step1.css");
-        } else {
-            try {
-                require("../../../themes/" + selected + "/application-create-step1.css");
-            } catch (ex){
-                // If the particular customized file does not exist, use the default one.
-                require("../../../themes/default/application-create-step1.css");
-            }
->>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
index 2440534c00..8c047853c1 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
@@ -28,11 +28,7 @@ import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
 import Clear from 'material-ui/svg-icons/content/clear';
 import {GridList, GridTile} from 'material-ui/GridList';
-<<<<<<< HEAD
 import Theme from '../../../theme';
-=======
-import Theme from '../../../themes/theme';
->>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * The Second step of application create wizard.
@@ -74,7 +70,6 @@ class Step2 extends Component {
     }
 
     componentWillMount() {
-<<<<<<< HEAD
         /**
          *Loading the theme files based on the the user-preference.
          */
@@ -112,18 +107,6 @@ class Step2 extends Component {
         if (styleSheet !== null) {
             styleSheet.disabled = true;
             styleSheet.parentNode.removeChild(styleSheet);
-=======
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../../themes/default/application-create-step2.css");
-        } else {
-            try {
-                require("../../../themes/" + selected + "/application-create-step2.css");
-            } catch (ex){
-                // If the particular customized file does not exist, use the default one.
-                require("../../../themes/default/application-create-step2.css");
-            }
->>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
index 57eb37e67a..c974c89094 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
@@ -24,11 +24,7 @@ import TextField from 'material-ui/TextField';
 import FlatButton from 'material-ui/FlatButton';
 import SelectField from 'material-ui/SelectField';
 import RaisedButton from 'material-ui/RaisedButton';
-<<<<<<< HEAD
 import Theme from '../../../theme';
-=======
-import Theme from '../../../themes/theme';
->>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * The Third step of application create wizard. {Application Release Step}
@@ -63,7 +59,6 @@ class Step3 extends Component {
     }
 
     componentWillMount() {
-<<<<<<< HEAD
         /**
          *Loading the theme files based on the the user-preference.
          */
@@ -101,18 +96,6 @@ class Step3 extends Component {
         if (styleSheet !== null) {
             styleSheet.disabled = true;
             styleSheet.parentNode.removeChild(styleSheet);
-=======
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../../themes/default/application-create-step3.css");
-        } else {
-            try {
-                require("../../../themes/" + selected + "/application-create-step3.css");
-            } catch (ex){
-                // If the particular customized file does not exist, use the default one.
-                require("../../../themes/default/application-create-step3.css");
-            }
->>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
index 9289559459..8e772a8c63 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
@@ -30,11 +30,7 @@ import Feedback from 'material-ui/svg-icons/action/feedback';
 import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
 import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
 import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
-<<<<<<< HEAD
 import Theme from '../../theme';
-=======
-import Theme from '../../themes/theme';
->>>>>>> parent of 8f3d11f... refactoring theming support
 
 
 /**
@@ -54,7 +50,6 @@ class BaseLayout extends Component {
     }
 
     componentWillMount() {
-<<<<<<< HEAD
         /**
          *Loading the theme files based on the the user-preference.
          */
@@ -94,18 +89,6 @@ class BaseLayout extends Component {
         if (styleSheet !== null) {
             styleSheet.disabled = true;
             styleSheet.parentNode.removeChild(styleSheet);
-=======
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-          require("../../themes/default/basic-layout.css");
-        } else {
-            try {
-                require("../../themes/" + selected + "/basic-layout.css");
-            } catch (ex){
-                // If the particular customized file does not exist, use the default one.
-                require("../../themes/default/basic-layout.css");
-            }
->>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
index d7b22474ac..5d26b067d9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
@@ -31,11 +31,7 @@ import {GridList, GridTile} from 'material-ui/GridList';
 import Close from 'material-ui/svg-icons/navigation/close';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 import AddCircleOutline from 'material-ui/svg-icons/content/add-circle-outline';
-<<<<<<< HEAD
 import Theme from '../../theme';
-=======
-import Theme from '../../themes/theme';
->>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * Platform Create component.
@@ -70,7 +66,6 @@ class PlatformCreate extends Component {
     }
 
     componentWillMount() {
-<<<<<<< HEAD
         /**
          *Loading the theme files based on the the user-preference.
          */
@@ -108,18 +103,6 @@ class PlatformCreate extends Component {
         if (styleSheet !== null) {
             styleSheet.disabled = true;
             styleSheet.parentNode.removeChild(styleSheet);
-=======
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../themes/default/platform-create.css");
-        } else {
-            try {
-                require("../../themes/" + selected + "/platform-create.css");
-            } catch (ex) {
-                // If the particular customized file does not exist, use the default one.
-                require("../../themes/default/platform-create.css");
-            }
->>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
index b7e368f168..8cd4eb358a 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
@@ -21,11 +21,7 @@ import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
 import DataTable from '../UIComponents/DataTable';
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
-<<<<<<< HEAD
 import Theme from '../../theme';
-=======
-import Theme from '../../themes/theme';
->>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * The App Create Component.
@@ -45,7 +41,6 @@ class PlatformListing extends Component {
     }
 
     componentWillMount() {
-<<<<<<< HEAD
         console.log(Theme.currentThemeType);
         /**
          *Loading the theme files based on the the user-preference.
@@ -84,18 +79,6 @@ class PlatformListing extends Component {
         if (styleSheet !== null) {
             styleSheet.disabled = true;
             styleSheet.parentNode.removeChild(styleSheet);
-=======
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../themes/default/platform-listing.css");
-        } else {
-            try {
-                require("../../themes/" + selected + "/platform-listing.css");
-            } catch (ex) {
-                // If the particular customized file does not exist, use the default one.
-                require("../../themes/default/platform-listing.css");
-            }
->>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
index 75f5610887..f3eb9a065c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
@@ -22,11 +22,7 @@ import DataTableRow from './DataTableRow';
 import DataTableHeader from './DataTableHeader';
 import RaisedButton from 'material-ui/RaisedButton';
 import {Table, TableBody, TableHeader, TableRow} from 'material-ui/Table';
-<<<<<<< HEAD
 import Theme from '../../theme';
-=======
-import Theme from '../../themes/theme';
->>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * The Custom Table Component.
@@ -66,7 +62,6 @@ class DataTable extends Component {
 
     componentWillMount() {
         this.setState({data: this.props.data, headers: this.props.headers});
-<<<<<<< HEAD
         /**
          *Loading the theme files based on the the user-preference.
          */
@@ -102,18 +97,6 @@ class DataTable extends Component {
         if (styleSheet !== null) {
             styleSheet.disabled = true;
             styleSheet.parentNode.removeChild(styleSheet);
-=======
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../themes/default/data-table.css");
-        } else {
-            try {
-                require("../../themes/" + selected + "/data-table.css");
-            } catch (ex) {
-                // If the particular customized file does not exist, use the default one.
-                require("../../themes/default/data-table.css");
-            }
->>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
index 5fad36b717..bacd63d5d9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
@@ -20,11 +20,7 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import FlatButton from 'material-ui/FlatButton';
 import {TableHeaderColumn} from 'material-ui/Table';
-<<<<<<< HEAD
 import Theme from '../../theme';
-=======
-import Theme from '../../themes/theme';
->>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * Data Table header component.
@@ -37,7 +33,6 @@ class DataTableHeader extends Component {
     }
 
     componentWillMount() {
-<<<<<<< HEAD
         /**
          *Loading the theme files based on the the user-preference.
          */
@@ -76,18 +71,6 @@ class DataTableHeader extends Component {
         if (styleSheet !== null) {
             styleSheet.disabled = true;
             styleSheet.parentNode.removeChild(styleSheet);
-=======
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../themes/default/data-table.css");
-        } else {
-            try {
-                require("../../themes/" + selected + "/data-table.css");
-            } catch (ex) {
-                // If the particular customized file does not exist, use the default one.
-                require("../../themes/default/data-table.css");
-            }
->>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
index dc5e2de832..98c680789a 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
@@ -19,11 +19,7 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {TableRow, TableRowColumn} from 'material-ui/Table';
-<<<<<<< HEAD
 import Theme from '../../theme';
-=======
-import Theme from '../../themes/theme';
->>>>>>> parent of 8f3d11f... refactoring theming support
 
 /**
  * Data table row component.
@@ -40,13 +36,12 @@ class DataTableRow extends Component {
 
     componentWillMount() {
         this.setState({dataItem: this.props.dataItem});
-<<<<<<< HEAD
 
         /**
          *Loading the theme files based on the the user-preference.
          */
         const selected =
-            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
+            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentThemeType;
         const dataTableCss = "data-table.css";
         const dataTableId = "data-table";
         let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + dataTableCss;
@@ -78,18 +73,6 @@ class DataTableRow extends Component {
         if (styleSheet !== null) {
             styleSheet.disabled = true;
             styleSheet.parentNode.removeChild(styleSheet);
-=======
-        let selected = Theme.selectedTheme;
-        if (Theme.currentTheme === "default") {
-            require("../../themes/default/data-table.css");
-        } else {
-            try {
-                require("../../themes/" + selected + "/data-table.css");
-            } catch (ex) {
-                // If the particular customized file does not exist, use the default one.
-                require("../../themes/default/data-table.css");
-            }
->>>>>>> parent of 8f3d11f... refactoring theming support
         }
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
similarity index 79%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
index 014957cf65..492a623be2 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
@@ -24,7 +24,6 @@ import axios from 'axios';
  */
 class Theme {
     constructor() {
-<<<<<<< HEAD:components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
         this.defaultThemeType =  "default";
         this.currentThemeType =  this.defaultThemeType;
         this.currentTheme = "lightBaseTheme";
@@ -37,15 +36,6 @@ class Theme {
         this.appContext = window.location.pathname.split("/")[1];
         this.loadThemeProperties.bind(this);
         this.loadThemeFiles.bind(this);
-=======
-        const theme = require("../config.json").theme;
-        this.currentTheme = theme.type;
-        if (this.currentTheme === "default") {
-            this.selectedTheme = theme.value;
-        } else {
-            this.selectedTheme = theme.value;
-        }
->>>>>>> parent of 8f3d11f... refactoring theming support:components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/themes/theme.js
     }
 
     loadThemeProperties () {

From 237f4cbc6c4e9a32e6d48d02c1d4cdfc07651e7e Mon Sep 17 00:00:00 2001
From: megala21 <ktumegala@yahoo.com>
Date: Thu, 14 Sep 2017 14:38:01 +0530
Subject: [PATCH 6/8] Refactoring

---
 .../src/main/resources/publisher/src/theme.js   | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
index 492a623be2..02b3f19964 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
@@ -38,6 +38,10 @@ class Theme {
         this.loadThemeFiles.bind(this);
     }
 
+    /**
+     * To load the theme files from the configuration file.
+     * @returns the http response.
+     */
     loadThemeProperties () {
         let httpClient = axios.create({
             baseURL: this.baseURL + "/" + this.appContext + "/config.json",
@@ -47,14 +51,11 @@ class Theme {
         return httpClient.get();
     }
 
-    loadTheme () {
-        let httpClient = axios.create({
-            baseURL: this.baseURL + "/" + this.appContext + "/themes/custom-theme/theme.js",
-            timeout: 2000
-        });
-        return httpClient.get();
-    }
-
+    /**
+     * To load the particular theme file from the path.
+     * @param path Path to load the theme files
+     * @returns Http response from the particular file.
+     */
     loadThemeFiles (path) {
         let httpClient = axios.create({
             baseURL: this.baseURL + "/" + this.appContext +  path,

From e5ca86cc6692b113d590429dd86740fe02fc52de Mon Sep 17 00:00:00 2001
From: megala21 <ktumegala@yahoo.com>
Date: Thu, 14 Sep 2017 14:45:29 +0530
Subject: [PATCH 7/8] Renaming variables and adding comment

---
 .../pom.xml                                               | 2 +-
 .../src/main/resources/publisher/src/App.jsx              | 8 ++++++--
 .../src/components/Application/ApplicationCreate.jsx      | 4 ++--
 .../src/components/Application/ApplicationListing.jsx     | 4 ++--
 .../src/components/Application/CreateSteps/Step1.jsx      | 4 ++--
 .../src/components/Application/CreateSteps/Step2.jsx      | 4 ++--
 .../src/components/Application/CreateSteps/Step3.jsx      | 4 ++--
 .../publisher/src/components/Base/BaseLayout.jsx          | 4 ++--
 .../publisher/src/components/Platform/PlatformCreate.jsx  | 4 ++--
 .../publisher/src/components/Platform/PlatformListing.jsx | 4 ++--
 .../publisher/src/components/UIComponents/DataTable.jsx   | 4 ++--
 .../src/components/UIComponents/DataTableHeader.jsx       | 4 ++--
 .../src/components/UIComponents/DataTableRow.jsx          | 4 ++--
 .../src/main/resources/publisher/src/theme.js             | 6 +++---
 14 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/pom.xml b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/pom.xml
index 3398d23ce2..a95ca6c8dd 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/pom.xml
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/pom.xml
@@ -97,7 +97,7 @@
     <properties>
         <maven.test.skip>false</maven.test.skip>
         <npm.executable>npm</npm.executable>
-        <npm.build.command>build_dev</npm.build.command>
+        <npm.build.command>build_prod</npm.build.command>
         <npm.working.dir>./src/main/</npm.working.dir>
     </properties>
 </project>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
index b3cac96869..4798f122cd 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
@@ -106,13 +106,17 @@ class Publisher extends Component {
         /**
          *Loading the theme files based on the the user-preference.
          */
-        let promisedConfig = Theme.loadThemeProperties();
-        promisedConfig.then(this.setTheme).catch(function (error) {
+        let themeConfig = Theme.loadThemeConfigs();
+        themeConfig.then(this.setTheme).catch(function (error) {
             console.log(error);
 
         });
     }
 
+    /**
+     * To set the theme based on the configuration file.
+     * @param response Configuration file data.
+     */
     setTheme(response) {
         this.setState({
             selectedType: response.data.theme.type,
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
index 6e0d91f93e..48aa9549e0 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
@@ -60,7 +60,7 @@ class ApplicationCreate extends Component {
         const applicationCreateStepCss = "application-create.css";
         const applicationCreateStepId = "application-create";
         let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStepCss;
-        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let themeFilefig = Theme.loadThemeFiles(themePath);
         let styleSheet = document.getElementById(applicationCreateStepId);
         let head = document.getElementsByTagName("head")[0];
         let link = document.createElement("link");
@@ -73,7 +73,7 @@ class ApplicationCreate extends Component {
             styleSheet.disabled = true;
             styleSheet.parentNode.removeChild(styleSheet);
         }
-        promisedConfig.then(function () {
+        themeFilefig.then(function () {
             head.appendChild(link);
         }).catch(function () {
             // If there is no customized css file, load the default one.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
index f5825bb635..60ee588a81 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
@@ -121,7 +121,7 @@ class ApplicationListing extends Component {
         const applicationListingCss = "application-listing.css";
         const applicationListingId = "application-listing";
         let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + applicationListingCss;
-        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let themeFilefig = Theme.loadThemeFiles(themePath);
         let styleSheet = document.getElementById(applicationListingId);
         let head = document.getElementsByTagName("head")[0];
         let link = document.createElement("link");
@@ -134,7 +134,7 @@ class ApplicationListing extends Component {
             styleSheet.disabled = true;
             styleSheet.parentNode.removeChild(styleSheet);
         }
-        promisedConfig.then(function () {
+        themeFilefig.then(function () {
             head.appendChild(link);
         }).catch(function () {
             // If there is no customized css file, load the default one.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
index 1bb540ac0c..d2c615057d 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
@@ -59,7 +59,7 @@ class Step1 extends Component {
         const applicationCreateStep1Css = "application-create-step1.css";
         const applicationCreateStep1Id = "application-create-step1";
         let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStep1Css;
-        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let themeFilefig = Theme.loadThemeFiles(themePath);
         let styleSheet = document.getElementById(applicationCreateStep1Id);
         let head = document.getElementsByTagName("head")[0];
         let link = document.createElement("link");
@@ -72,7 +72,7 @@ class Step1 extends Component {
             styleSheet.parentNode.removeChild(styleSheet);
         }
 
-        promisedConfig.then(function () {
+        themeFilefig.then(function () {
             head.appendChild(link);
         }).catch(function () {
             // If there is no customized css file, load the default one.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
index 8c047853c1..968891111b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
@@ -78,7 +78,7 @@ class Step2 extends Component {
         const applicationCreateStep2Css = "application-create-step2.css";
         const applicationCreateStep2Id = "application-create-step2";
         let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStep2Css;
-        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let themeFilefig = Theme.loadThemeFiles(themePath);
         let styleSheet = document.getElementById(applicationCreateStep2Id);
         let head = document.getElementsByTagName("head")[0];
         let link = document.createElement("link");
@@ -92,7 +92,7 @@ class Step2 extends Component {
             styleSheet.parentNode.removeChild(styleSheet);
         }
 
-        promisedConfig.then(function() {
+        themeFilefig.then(function() {
             head.appendChild(link);
         }).catch(function () {
             // If there is no customized css file, load the default one.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
index c974c89094..548e680658 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
@@ -67,7 +67,7 @@ class Step3 extends Component {
         const applicationCreateStep3Css = "application-create-step3.css";
         const applicationCreateStep3Id = "application-create-step3";
         let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStep3Css;
-        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let themeFilefig = Theme.loadThemeFiles(themePath);
         let styleSheet = document.getElementById(applicationCreateStep3Id);
         let head = document.getElementsByTagName("head")[0];
         let link = document.createElement("link");
@@ -81,7 +81,7 @@ class Step3 extends Component {
             styleSheet.parentNode.removeChild(styleSheet);
         }
 
-        promisedConfig.then(function() {
+        themeFilefig.then(function() {
             head.appendChild(link);
         }).catch(function () {
             // If there is no customized css file, load the default one.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
index 8e772a8c63..b1cf9c5f76 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
@@ -59,7 +59,7 @@ class BaseLayout extends Component {
         const basicLayoutCss = "basic-layout.css";
         const basicLayoutId = "basic-layout";
         let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + basicLayoutCss;
-        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let themeFilefig = Theme.loadThemeFiles(themePath);
         let styleSheet = document.getElementById(basicLayoutId);
         let head = document.getElementsByTagName("head")[0];
         let link = document.createElement("link");
@@ -73,7 +73,7 @@ class BaseLayout extends Component {
             styleSheet.parentNode.removeChild(styleSheet);
         }
 
-        promisedConfig.then(function() {
+        themeFilefig.then(function() {
             head.appendChild(link);
         }).catch(function () {
             // If there is no customized css file, load the default one.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
index 5d26b067d9..a5053e6819 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
@@ -74,7 +74,7 @@ class PlatformCreate extends Component {
         const platformCreateCss = "platform-create.css";
         const platformCreateId = "application-listing";
         let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + platformCreateCss;
-        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let themeFilefig = Theme.loadThemeFiles(themePath);
         let styleSheet = document.getElementById(platformCreateId);
         let head = document.getElementsByTagName("head")[0];
         let link = document.createElement("link");
@@ -88,7 +88,7 @@ class PlatformCreate extends Component {
             styleSheet.parentNode.removeChild(styleSheet);
         }
 
-        promisedConfig.then(function(){
+        themeFilefig.then(function(){
             head.appendChild(link);
         }).catch(function () {
             // If there is no customized css file, load the default one.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
index 8cd4eb358a..bd6325f616 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
@@ -50,7 +50,7 @@ class PlatformListing extends Component {
         const platformListingCss = "platform-listing.css";
         const platformListingId = "platform-listing";
         let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + platformListingCss;
-        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let themeFilefig = Theme.loadThemeFiles(themePath);
         let styleSheet = document.getElementById(platformListingId);
         let head = document.getElementsByTagName("head")[0];
         let link = document.createElement("link");
@@ -63,7 +63,7 @@ class PlatformListing extends Component {
             styleSheet.parentNode.removeChild(styleSheet);
         }
 
-        promisedConfig.then(function () {
+        themeFilefig.then(function () {
             link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
             head.appendChild(link);
         }).catch(function () {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
index f3eb9a065c..461d4790c8 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
@@ -70,7 +70,7 @@ class DataTable extends Component {
         const dataTableCss = "data-table.css";
         const dataTableId = "data-table";
         let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + dataTableCss;
-        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let themeFilefig = Theme.loadThemeFiles(themePath);
         let styleSheet = document.getElementById(dataTableId);
         let head = document.getElementsByTagName("head")[0];
         let link = document.createElement("link"); link.type = Theme.styleSheetType;
@@ -82,7 +82,7 @@ class DataTable extends Component {
             styleSheet.disabled = true;
             styleSheet.parentNode.removeChild(styleSheet);
         }
-        promisedConfig.then(function() {
+        themeFilefig.then(function() {
             head.appendChild(link);
         }).catch(function () {
             // If there is no customized css file, load the default one.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
index bacd63d5d9..1fbf4f9679 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
@@ -41,7 +41,7 @@ class DataTableHeader extends Component {
         const dataTableCss = "data-table.css";
         const dataTableId = "data-table";
         let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + dataTableCss;
-        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let themeFilefig = Theme.loadThemeFiles(themePath);
         let styleSheet = document.getElementById(dataTableId);
         let head = document.getElementsByTagName("head")[0];
         let link = document.createElement("link");
@@ -54,7 +54,7 @@ class DataTableHeader extends Component {
             styleSheet.parentNode.removeChild(styleSheet);
         }
 
-        promisedConfig.then(function() {
+        themeFilefig.then(function() {
             head.appendChild(link);
         }).catch(function () {
             // If there is no customized css file, load the default one.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
index 98c680789a..073a37aacb 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
@@ -45,7 +45,7 @@ class DataTableRow extends Component {
         const dataTableCss = "data-table.css";
         const dataTableId = "data-table";
         let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + dataTableCss;
-        let promisedConfig = Theme.loadThemeFiles(themePath);
+        let themeFilefig = Theme.loadThemeFiles(themePath);
         let styleSheet = document.getElementById(dataTableId);
         let head = document.getElementsByTagName("head")[0];
         let link = document.createElement("link");
@@ -58,7 +58,7 @@ class DataTableRow extends Component {
             styleSheet.parentNode.removeChild(styleSheet);
         }
 
-        promisedConfig.then(function() {
+        themeFilefig.then(function() {
             head.appendChild(link);
         }).catch(function () {
             // If there is no customized css file, load the default one.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
index 02b3f19964..c2a3028b21 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
@@ -34,15 +34,15 @@ class Theme {
         //TODO Need to get the app context properly when the server is ready
         this.baseURL = window.location.origin;
         this.appContext = window.location.pathname.split("/")[1];
-        this.loadThemeProperties.bind(this);
+        this.loadThemeConfigs.bind(this);
         this.loadThemeFiles.bind(this);
     }
 
     /**
-     * To load the theme files from the configuration file.
+     * To load the theme related configurations from the configuration file.
      * @returns the http response.
      */
-    loadThemeProperties () {
+    loadThemeConfigs () {
         let httpClient = axios.create({
             baseURL: this.baseURL + "/" + this.appContext + "/config.json",
             timeout: 2000

From c2789ff9bebedc4ec3c33e8ade38f1b43333571c Mon Sep 17 00:00:00 2001
From: megala21 <ktumegala@yahoo.com>
Date: Thu, 14 Sep 2017 15:56:30 +0530
Subject: [PATCH 8/8] Moving the theme loading method to a common place

---
 .../src/main/resources/publisher/src/App.jsx  |  2 +
 .../Application/ApplicationCreate.jsx         | 35 ++--------------
 .../Application/ApplicationListing.jsx        | 37 +++--------------
 .../Application/CreateSteps/Step1.jsx         | 34 ++-------------
 .../Application/CreateSteps/Step2.jsx         | 35 ++--------------
 .../Application/CreateSteps/Step3.jsx         | 37 ++---------------
 .../src/components/Base/BaseLayout.jsx        | 39 ++----------------
 .../components/Platform/PlatformCreate.jsx    | 37 ++---------------
 .../components/Platform/PlatformListing.jsx   | 38 ++---------------
 .../src/components/UIComponents/DataTable.jsx | 37 +++--------------
 .../UIComponents/DataTableHeader.jsx          | 36 ++--------------
 .../components/UIComponents/DataTableRow.jsx  | 36 ++--------------
 .../src/main/resources/publisher/src/theme.js | 41 +++++++++++++++++++
 13 files changed, 85 insertions(+), 359 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
index 4798f122cd..9dac4fa9c2 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
@@ -125,6 +125,8 @@ class Publisher extends Component {
 
         Theme.currentThemeType = this.state.selectedType;
         Theme.currentTheme = this.state.selectedTheme;
+        Theme.selectedTheme =
+            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
 
         if (this.state.selectedType === "default") {
             let defaultTheme = require("material-ui/styles/baseThemes/" + this.state.selectedTheme);
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
index 48aa9549e0..870ed0cdb9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx
@@ -37,6 +37,7 @@ import Theme from '../../theme';
 class ApplicationCreate extends Component {
     constructor() {
         super();
+        this.scriptId = "application-create";
         this.setStepData.bind(this);
         this.removeStepData.bind(this);
         this.handleSubmit.bind(this);
@@ -55,41 +56,11 @@ class ApplicationCreate extends Component {
         /**
          *Loading the theme files based on the the user-preference.
          */
-        const selected =
-            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
-        const applicationCreateStepCss = "application-create.css";
-        const applicationCreateStepId = "application-create";
-        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStepCss;
-        let themeFilefig = Theme.loadThemeFiles(themePath);
-        let styleSheet = document.getElementById(applicationCreateStepId);
-        let head = document.getElementsByTagName("head")[0];
-        let link = document.createElement("link");
-        link.type = Theme.styleSheetType;
-        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-        link.id = applicationCreateStepId;
-        link.rel = Theme.styleSheetRel;
-
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
-        themeFilefig.then(function () {
-            head.appendChild(link);
-        }).catch(function () {
-            // If there is no customized css file, load the default one.
-            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + applicationCreateStepCss;
-            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-            head.appendChild(link);
-
-        });
+        Theme.insertThemingScripts(this.scriptId);
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("application-create");
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     /**
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
index 60ee588a81..fcceb20ca5 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
@@ -37,7 +37,8 @@ class ApplicationListing extends Component {
         this.state = {
             data: [],
             asc: true
-        }
+        };
+        this.scriptId = "application-listing";
     }
 
     data = [
@@ -113,43 +114,15 @@ class ApplicationListing extends Component {
     componentWillMount() {
         //Fetch all the applications from backend and create application objects.
         this.setState({data: this.data});
+
         /**
          *Loading the theme files based on the the user-preference.
          */
-        const selected =
-            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
-        const applicationListingCss = "application-listing.css";
-        const applicationListingId = "application-listing";
-        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + applicationListingCss;
-        let themeFilefig = Theme.loadThemeFiles(themePath);
-        let styleSheet = document.getElementById(applicationListingId);
-        let head = document.getElementsByTagName("head")[0];
-        let link = document.createElement("link");
-        link.type = Theme.styleSheetType;
-        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-        link.id = applicationListingId;
-        link.rel = Theme.styleSheetRel;
-
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
-        themeFilefig.then(function () {
-            head.appendChild(link);
-        }).catch(function () {
-            // If there is no customized css file, load the default one.
-            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + applicationListingCss;
-            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-            head.appendChild(link);
-        });
+        Theme.insertThemingScripts(this.scriptId);
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("application-listing");
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
+        Theme.removeThemingScripts(this.scriptId);
     }
 
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
index d2c615057d..f414a8c278 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx
@@ -48,46 +48,18 @@ class Step1 extends Component {
             title: "",
             titleError: ""
         };
+        this.scriptId = "application-create-step1";
     }
 
     componentWillMount() {
         /**
          *Loading the theme files based on the the user-preference.
          */
-        const selected =
-            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
-        const applicationCreateStep1Css = "application-create-step1.css";
-        const applicationCreateStep1Id = "application-create-step1";
-        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStep1Css;
-        let themeFilefig = Theme.loadThemeFiles(themePath);
-        let styleSheet = document.getElementById(applicationCreateStep1Id);
-        let head = document.getElementsByTagName("head")[0];
-        let link = document.createElement("link");
-        link.type = Theme.styleSheetType;
-        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-        link.id = applicationCreateStep1Id;
-        link.rel = Theme.styleSheetRel;
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
-
-        themeFilefig.then(function () {
-            head.appendChild(link);
-        }).catch(function () {
-            // If there is no customized css file, load the default one.
-            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + applicationCreateStep1Css;
-            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-            head.appendChild(link);
-        });
+       Theme.insertThemingScripts(this.scriptId);
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("application-create-step1");
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     /**
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
index 968891111b..198055a092 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx
@@ -67,47 +67,18 @@ class Step2 extends Component {
             screenshots: [],
             icon: []
         };
+        this.scriptId = "application-create-step2";
     }
 
     componentWillMount() {
         /**
          *Loading the theme files based on the the user-preference.
          */
-        const selected =
-            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
-        const applicationCreateStep2Css = "application-create-step2.css";
-        const applicationCreateStep2Id = "application-create-step2";
-        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStep2Css;
-        let themeFilefig = Theme.loadThemeFiles(themePath);
-        let styleSheet = document.getElementById(applicationCreateStep2Id);
-        let head = document.getElementsByTagName("head")[0];
-        let link = document.createElement("link");
-        link.type = Theme.styleSheetType;
-        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-        link.id = applicationCreateStep2Id;
-        link.rel = Theme.styleSheetRel;
-
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
-
-        themeFilefig.then(function() {
-            head.appendChild(link);
-        }).catch(function () {
-            // If there is no customized css file, load the default one.
-            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + applicationCreateStep2Css;
-            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-
-        });
+        Theme.insertThemingScripts(this.scriptId);
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("application-create-step2");
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     /**
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
index 548e680658..1245d1df3c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx
@@ -55,48 +55,19 @@ class Step3 extends Component {
             showForm: false,
             releaseChannel: 1,
             errors: {}
-        }
+        };
+        this.scriptId = "application-create-step3";
     }
 
     componentWillMount() {
         /**
          *Loading the theme files based on the the user-preference.
          */
-        const selected =
-            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
-        const applicationCreateStep3Css = "application-create-step3.css";
-        const applicationCreateStep3Id = "application-create-step3";
-        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + applicationCreateStep3Css;
-        let themeFilefig = Theme.loadThemeFiles(themePath);
-        let styleSheet = document.getElementById(applicationCreateStep3Id);
-        let head = document.getElementsByTagName("head")[0];
-        let link = document.createElement("link");
-        link.type = Theme.styleSheetType;
-        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-        link.id = applicationCreateStep3Id;
-        link.rel = Theme.styleSheetRel;
-
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
-
-        themeFilefig.then(function() {
-            head.appendChild(link);
-        }).catch(function () {
-            // If there is no customized css file, load the default one.
-            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + applicationCreateStep3Css;
-            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-            head.appendChild(link);
-        });
+       Theme.insertThemingScripts(this.scriptId);
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("application-create-step3");
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     /**
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
index b1cf9c5f76..da98a075c5 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx
@@ -46,50 +46,19 @@ class BaseLayout extends Component {
         this.state = {
             notifications: 0,
             user: 'Admin'
-        }
+        };
+        this.scriptId = "basic-layout";
     }
 
     componentWillMount() {
         /**
          *Loading the theme files based on the the user-preference.
          */
-        console.log(Theme.currentThemeType);
-        const selected =
-            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
-        const basicLayoutCss = "basic-layout.css";
-        const basicLayoutId = "basic-layout";
-        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + basicLayoutCss;
-        let themeFilefig = Theme.loadThemeFiles(themePath);
-        let styleSheet = document.getElementById(basicLayoutId);
-        let head = document.getElementsByTagName("head")[0];
-        let link = document.createElement("link");
-        link.type = Theme.styleSheetType;
-        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-        link.id = basicLayoutId;
-        link.rel = Theme.styleSheetRel;
-
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
-
-        themeFilefig.then(function() {
-            head.appendChild(link);
-        }).catch(function () {
-            // If there is no customized css file, load the default one.
-            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + basicLayoutCss;
-            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-            head.appendChild(link);
-        });
-
+        Theme.insertThemingScripts(this.scriptId);
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("basic-layout");
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
+        Theme.removeThemingScripts(this.scriptId)
     }
 
     handleApplicationClick() {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
index a5053e6819..3c9c8acabf 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
@@ -62,48 +62,19 @@ class PlatformCreate extends Component {
                 {key: 1, value: 'Number'},
                 {key: 2, value: 'Boolean'},
                 {key: 3, value: 'File'}]
-        }
+        };
+        this.scriptId = "platform-create";
     }
 
     componentWillMount() {
         /**
          *Loading the theme files based on the the user-preference.
          */
-        const selected =
-            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
-        const platformCreateCss = "platform-create.css";
-        const platformCreateId = "application-listing";
-        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + platformCreateCss;
-        let themeFilefig = Theme.loadThemeFiles(themePath);
-        let styleSheet = document.getElementById(platformCreateId);
-        let head = document.getElementsByTagName("head")[0];
-        let link = document.createElement("link");
-        link.type = Theme.styleSheetType;
-        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-        link.id = platformCreateId;
-        link.rel = Theme.styleSheetRel;
-
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
-
-        themeFilefig.then(function(){
-            head.appendChild(link);
-        }).catch(function () {
-            // If there is no customized css file, load the default one.
-            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + platformCreateCss;
-            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-            head.appendChild(link);
-        });
+       Theme.insertThemingScripts(this.scriptId);
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("platform-create");
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     /**
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
index bd6325f616..34387fca7e 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
@@ -37,49 +37,19 @@ class PlatformListing extends Component {
         this.state = {
             data: [],
             asc: true
-        }
+        };
+        this.scriptId = "platform-listing";
     }
 
     componentWillMount() {
-        console.log(Theme.currentThemeType);
         /**
          *Loading the theme files based on the the user-preference.
          */
-        const selected =
-            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
-        const platformListingCss = "platform-listing.css";
-        const platformListingId = "platform-listing";
-        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + platformListingCss;
-        let themeFilefig = Theme.loadThemeFiles(themePath);
-        let styleSheet = document.getElementById(platformListingId);
-        let head = document.getElementsByTagName("head")[0];
-        let link = document.createElement("link");
-        link.type = Theme.styleSheetType;
-        link.id = platformListingId;
-        link.rel = Theme.styleSheetRel;
-
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
-
-        themeFilefig.then(function () {
-            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-            head.appendChild(link);
-        }).catch(function () {
-            // If there is no customized css file, load the default one.
-            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + platformListingCss;
-            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-            head.appendChild(link);
-        });
+        Theme.insertThemingScripts(this.scriptId);
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("platform-listing");
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     /**
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
index 461d4790c8..beb6086b58 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx
@@ -56,48 +56,21 @@ class DataTable extends Component {
         this.state = {
             data: [],
             headers: [],
-        }
-
+        };
+        this.scriptId = "data-table"
     };
 
     componentWillMount() {
         this.setState({data: this.props.data, headers: this.props.headers});
+
         /**
          *Loading the theme files based on the the user-preference.
          */
-        const selected =
-            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
-        const dataTableCss = "data-table.css";
-        const dataTableId = "data-table";
-        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + dataTableCss;
-        let themeFilefig = Theme.loadThemeFiles(themePath);
-        let styleSheet = document.getElementById(dataTableId);
-        let head = document.getElementsByTagName("head")[0];
-        let link = document.createElement("link"); link.type = Theme.styleSheetType;
-        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-        link.id = dataTableId;
-        link.rel = Theme.styleSheetRel;
-
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
-        themeFilefig.then(function() {
-            head.appendChild(link);
-        }).catch(function () {
-            // If there is no customized css file, load the default one.
-            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + dataTableCss;
-            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-            head.appendChild(link);
-        });
+        Theme.insertThemingScripts(this.scriptId);
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("data-table");
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     shouldComponentUpdate(nextProps, nextState) {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
index 1fbf4f9679..8d655c6617 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx
@@ -30,48 +30,18 @@ class DataTableHeader extends Component {
 
     constructor() {
         super();
+        this.scriptId = "data-table";
     }
 
     componentWillMount() {
         /**
          *Loading the theme files based on the the user-preference.
          */
-        const selected =
-            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentTheme;
-        const dataTableCss = "data-table.css";
-        const dataTableId = "data-table";
-        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + dataTableCss;
-        let themeFilefig = Theme.loadThemeFiles(themePath);
-        let styleSheet = document.getElementById(dataTableId);
-        let head = document.getElementsByTagName("head")[0];
-        let link = document.createElement("link");
-        link.type = Theme.styleSheetType;
-        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-        link.id = dataTableId;
-        link.rel = Theme.styleSheetRel;
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
-
-        themeFilefig.then(function() {
-            head.appendChild(link);
-        }).catch(function () {
-            // If there is no customized css file, load the default one.
-            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + dataTableCss;
-            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-            head.appendChild(link);
-        });
-
-
+        Theme.insertThemingScripts(this.scriptId);
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("data-table");
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     /**
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
index 073a37aacb..292f0e4eab 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx
@@ -31,7 +31,8 @@ class DataTableRow extends Component {
         super();
         this.state = {
             dataItem: {}
-        }
+        };
+        this.scriptId = "data-table";
     }
 
     componentWillMount() {
@@ -40,40 +41,11 @@ class DataTableRow extends Component {
         /**
          *Loading the theme files based on the the user-preference.
          */
-        const selected =
-            (Theme.currentThemeType === Theme.defaultThemeType) ? Theme.defaultThemeType : Theme.currentThemeType;
-        const dataTableCss = "data-table.css";
-        const dataTableId = "data-table";
-        let themePath  =  "/" + Theme.themeFolder + "/" + selected + "/" + dataTableCss;
-        let themeFilefig = Theme.loadThemeFiles(themePath);
-        let styleSheet = document.getElementById(dataTableId);
-        let head = document.getElementsByTagName("head")[0];
-        let link = document.createElement("link");
-        link.type = Theme.styleSheetType;
-        link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-        link.id = dataTableId;
-        link.rel = Theme.styleSheetRel;
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
-
-        themeFilefig.then(function() {
-            head.appendChild(link);
-        }).catch(function () {
-            // If there is no customized css file, load the default one.
-            themePath = "/" + Theme.themeFolder + "/" + Theme.defaultThemeType + "/" + dataTableCss;
-            link.href = Theme.baseURL + "/" + Theme.appContext + themePath;
-            head.appendChild(link);
-        });
+       Theme.insertThemingScripts(this.scriptId);
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("data-table");
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
+        Theme.removeThemingScripts(this.scriptId);
     }
 
     /**
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
index c2a3028b21..9243f7713e 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/theme.js
@@ -30,12 +30,15 @@ class Theme {
         this.themeFolder =  "themes";
         this.styleSheetType = "text/css";
         this.styleSheetRel = "stylesheet";
+        this.selectedTheme = this.defaultThemeType;
 
         //TODO Need to get the app context properly when the server is ready
         this.baseURL = window.location.origin;
         this.appContext = window.location.pathname.split("/")[1];
         this.loadThemeConfigs.bind(this);
         this.loadThemeFiles.bind(this);
+        this.insertThemingScripts.bind(this);
+        this.removeThemingScripts.bind(this);
     }
 
     /**
@@ -64,6 +67,44 @@ class Theme {
         return httpClient.get();
     }
 
+    /**
+     * To insert the css files to the document.
+     * @param scriptId ID of the script that need to be inserted
+     */
+    insertThemingScripts(scriptId) {
+        const script = scriptId + ".css";
+        let themePath  =  "/" + this.themeFolder + "/" + this.selectedTheme + "/" + script;
+        let themeFile = this.loadThemeFiles(themePath);
+        let head = document.getElementsByTagName("head")[0];
+        let link = document.createElement("link");
+        link.type = this.styleSheetType;
+        link.href = this.baseURL + "/" + this.appContext + themePath;
+        link.id = scriptId;
+        link.rel = this.styleSheetRel;
+        this.removeThemingScripts(scriptId);
+
+        themeFile.then(function () {
+            head.appendChild(link);
+        }).catch(error => {
+            // If there is no customized css file, load the default one.
+            themePath = "/" + this.themeFolder + "/" + this.defaultThemeType + "/" + script;
+            link.href = this.baseURL + "/" + this.appContext + themePath;
+            head.appendChild(link);
+        });
+    }
+
+    /**
+     * To remove the css scripts that are inserted before.
+     * @param scriptId Id of the script that need to be removed
+     */
+    removeThemingScripts(scriptId) {
+        let styleSheet = document.getElementById(scriptId);
+        if (styleSheet !== null) {
+            styleSheet.disabled = true;
+            styleSheet.parentNode.removeChild(styleSheet);
+        }
+    }
+
 }
 
 export default (new Theme);