Switching system theme style

Background management system designed many sets theme skin, hoping to freely switch themes style.

In only one set of themes when it is introduced on the main page of the theme style:

<link href="/public/themes/default/css/main.css" rel="stylesheet" type="text/css" />

Switch themes, in fact, switching css path default value of different topics. Switch to the block as the theme, simply amended as follows:

<link href="/public/themes/block/css/main.css" rel="stylesheet" type="text/css" />

Each time you switch the theme to modify the code here, then obviously not a Good idea.

 

Under the following two record their thoughts:

First, by providing the spring project.theme configuration file;

project.theme = block

　　@Value read by the background or the like;

@Value("${project.theme}")
    private String projectTheme;

　　SpringMVC then the Model, Map, ModelMap ModelAndView or spread distal end main page;

model.addAttribute("projectTheme", projectTheme);

　　The main page to save this theme by input value;

<input type="hidden" id="theme" th:value="${projectTheme}" >

　　Js then get the value of the input, creating the link tag, set its href attribute value, appended to the head of the main page,

var theme = $("#theme").val();
loadTheme(theme);

function loadTheme(theme){
    var link = document.createElement('link');
        link.type = 'text/css';
        link.rel = 'stylesheet';
        if(theme)
            link.href = '/public/themes/'+theme+'/css/main.css';
        else
            link.href = '/public/themes/default/css/main.css';
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(link);
}

　　Theme achieved by switching profiles.

 

Second, by increasing the switching button on the theme page, change the value of the Subject field of the database click;

　　Background value of the field is read, passed to the front end of the main page;

　　You can refer to the above subsequent step.

　　On the page, click the toggle button, modify the theme style.

 

Note: In fact, such a start is to be modified, but without success:

<link href="/public/themes/${theme}/css/main.css" rel="stylesheet" type="text/css" />

　　

Education chiefs welcomed the guidance!