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] 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 e7d27b5f748..3398d23ce28 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 00000000000..3be10b8ce9b
--- /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 0e627f4af56..efce6b8d1c0 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 cf10a667544..c3b7156eb37 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 d4c6accb234..0924c15a39b 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 bd80a3231ec..6a3e7676034 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 44ca7752e79..3e73c038907 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 386251a3bea..2440534c00e 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 c042e762d76..57eb37e67a9 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 f14a6c99e92..9289559459c 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 b00731772f2..d7b22474acd 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 6853740a17a..b7e368f168c 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 fd40970ab21..75f5610887e 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 7de68fabc95..5fad36b717a 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 0b02fefde48..dc5e2de8329 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 97f715bcd72..00000000000
--- 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 00000000000..014957cf65c
--- /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 c6483f4aaa0..e09918c7143 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") {