Multiple CSS file as Themes

[musicman]

Hi,

 

I'm thinking of some methods to use CSS file/s to give user options to change the web page style. For example, find the "Change Theme" link on the right-bottom corner of this forum page. Once user click an option, the web page style will changed to another CSS file.

 

Some ways came up in mind:

 

way 1:

// on the HTML head: <link id="theme" rel="stylesheet" href="style1.css">

function change_style(){
  theme.removeAttribute( "href" );
  theme.setAttribute( "href", option.value + ".css" );
}

way 2:

<!-- on the CSS file -->

.style1 {  }
.style2 {  }

/* on JS file */

button.onclick = function(){

// add or remove class to change elems style
$( elem ).addClass( "style1" );

}

What would you do to achieve this?

 

note: this to change almost all elements on the page. This could also be a new trend where website automatically change its appearance randomly whenever user refresh/load the web page.. (nah)

 

Thanks!

 

[dsonesuk]

I did something similar here http://w3schools.invisionzone.com/index.php?&showtopic=28090, you create css files for different themes, change href to specific css file create cookie to store css change because changing to another page you would lose selection otherwise.

[musicman]

Thank you @dsonesuk! I will try that method.

When we change the href attribute of the stylesheet with a click, will the style changed immediately or we should refresh/reload the page first?

 

 

[dsonesuk]

Its done immediately, and a cookie is saved, you will have to have the code or link to code on other pages to identify the css page to use, its old, but still works!

[musicman]

That works very well! Thanks again. Now I shall create some designs.