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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...