Jump to content

Multiple CSS file as Themes


Recommended Posts



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) :dirol:




Link to comment
Share on other sites

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?



Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...