EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: sky-t on March 29, 2019, 11:54:11 PM


Title: Change easyui Theme dynamically
Post by: sky-t on March 29, 2019, 11:54:11 PM
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

Title: Re: Change easyui Theme dynamically
Post by: jahangir on March 30, 2019, 02:31:59 AM
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.

Title: Re: Change easyui Theme dynamically
Post by: sky-t on March 30, 2019, 02:44:47 AM
Hi jahangir,

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


Powered by SMF 1.1.18 | SMF © 2013, Simple Machines