Jump to content

Multiple CSS file as Themes


musicman
 Share

Recommended Posts

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

 

Thanks!

 

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
 Share

×
×
  • Create New...