Change easyui Theme dynamically

[sky-t]

Hi there,

is there a possibility to change current easy Theme on the fly?

Just switch for example from dark to default and all components are changing to the new theme without reloading the page?


Thanks

[jahangir]

1- First of all give an id to your theme style sheet link.

Code:

<link id="theme_style" rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">

2- Add following javascript code.

Code:

<script>  
        /*declare variable to store theme style sheet links*/
	var theme_styles = {
		'default': 'http://www.jeasyui.com/easyui/themes/default/easyui.css',
		'black': 'http://www.jeasyui.com/easyui/themes/black/easyui.css',
		'gray': 'http://www.jeasyui.com/easyui/themes/gray/easyui.css'        
	};
    
	/*function to change themes*/
	function changetheme(themname){ 
	 $('#theme_style').attr('href', theme_styles[themname]); 
	}       
</script>

3- Calll the changetheme function by passing your theme name as parameter .

Code:

changetheme('black');

Please see attached example file.

[sky-t]

Hi jahangir,

works like a charme - THANK YOU so much and have a nice weekend!!!!!!!!!!!