EasyUI Forum

General Category => General Discussion => Topic started by: ewan on October 09, 2014, 10:48:05 PM



Title: Switch Theme
Post by: ewan on October 09, 2014, 10:48:05 PM
Hello,

I have multiple theme, and I want to switch between.
But, I want a default theme at the first
Change this line ( but it's the default line too)

<link rel="stylesheet" type="text/css" href="script/easyui/themes/dark/easyui.css/> //When I arrive in the page, it's the style loaded.
When I click on a button ( or in a select it's better ), change the value of the line .

Can you help me, and show me ?

Thanks


Title: Re: Switch Theme
Post by: Pierre on October 09, 2014, 11:57:16 PM
Hello Ewan
in your index.html you have this line:
<link rel="stylesheet" type="text/css" href="/styles/easyui.css">
put that line as first line below your <meta> tag.
Then based on your select, you can use this:

  var color_mode;
  switch (select_box_chosen_color) {
    case "blue":
      color_mode = '/styles/metro-blue/easyui.css';
      break;
    case "orange":
      color_mode = '/styles/metro-orange/easyui.css';
      break;
  }   
  var link = $('head').find('link:first'); 
  link.attr('href', color_mode); 


Title: Re: Switch Theme
Post by: ewan on October 10, 2014, 01:56:29 AM
Ok , thanks for you help, a last question, for the select, how I can do ?

<select name="select_box_chosen_color" id="select_box_chosen_color">
<option value="blue">blue</option>
<option value="yellow">yellow</option>
</select>
?


Title: Re: Switch Theme
Post by: ewan on October 11, 2014, 04:42:30 AM
Can you help me ?


Title: Re: Switch Theme
Post by: Pierre on October 11, 2014, 11:38:28 PM
Hello
attached is complete example  ;)


Title: Re: Switch Theme
Post by: ewan on October 12, 2014, 04:54:08 AM
It's perfect , thanks !! :)