Moving the theme loading method to a common place

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);

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.insertThemingScripts(this.scriptId);
-            (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);
-
-        });
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("application-create");
+        Theme.removeThemingScripts(this.scriptId);
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
     }
 
     /**

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.insertThemingScripts(this.scriptId);
-            (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);
-        });
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("application-listing");
+        Theme.removeThemingScripts(this.scriptId);
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
     }
 
 

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.insertThemingScripts(this.scriptId);
-            (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);
-        });
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("application-create-step1");
+        Theme.removeThemingScripts(this.scriptId);
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
     }
 
     /**

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.insertThemingScripts(this.scriptId);
-            (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;
-
-        });
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("application-create-step2");
+        Theme.removeThemingScripts(this.scriptId);
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
     }
 
     /**

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.insertThemingScripts(this.scriptId);
-            (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);
-        });
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("application-create-step3");
+        Theme.removeThemingScripts(this.scriptId);
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
     }
 
     /**

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);
+        Theme.insertThemingScripts(this.scriptId);
-        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);
-        });
-
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("basic-layout");
+        Theme.removeThemingScripts(this.scriptId)
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
     }
 
     handleApplicationClick() {

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.insertThemingScripts(this.scriptId);
-            (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);
-        });
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("platform-create");
+        Theme.removeThemingScripts(this.scriptId);
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
     }
 
     /**

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.insertThemingScripts(this.scriptId);
-            (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);
-        });
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("platform-listing");
+        Theme.removeThemingScripts(this.scriptId);
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
     }
 
     /**

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.insertThemingScripts(this.scriptId);
-            (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);
-        });
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("data-table");
+        Theme.removeThemingScripts(this.scriptId);
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
     }
 
     shouldComponentUpdate(nextProps, nextState) {

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.insertThemingScripts(this.scriptId);
-            (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);
-        });
-
-
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("data-table");
+        Theme.removeThemingScripts(this.scriptId);
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
     }
 
     /**

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.insertThemingScripts(this.scriptId);
-            (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);
-        });
     }
 
     componentWillUnmount() {
-        let styleSheet = document.getElementById("data-table");
+        Theme.removeThemingScripts(this.scriptId);
-        if (styleSheet !== null) {
-            styleSheet.disabled = true;
-            styleSheet.parentNode.removeChild(styleSheet);
-        }
     }
 
     /**

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);