0

How can I create and load a color scheme on my HTML site using CSS?

I have base.css green.css and orange.css. Now, when site is loaded default color scheme is green, but how to change it to orange.css on the client side?

I want each user to choose color scheme suitable for him. Also the choice must be saved for next visit of this person on site. Something like this in that IPBoard skin (feature called "Color themes") http://www.skinbox.net/skins/velvet/

4 Answers 4

1

If you're looking to swap stylesheets on the frontend, and want to save the preference, you can do something like this (using jQuery for simplicity):

In the <head>

<link  id='theme'  href='green.css' type='text/css' />

In the <body>

<a id='green' href='#'>Click here for green theme</a>
<a id='orange' href='#'>Click here for orange theme</a>

In the javascript file

$(document).ready(function(){

    if( localStorage.theme )
        $('link#theme').attr('href', localStorage.theme);

    $('#orange').click(function(){
        $('link#theme').attr('href', "orange.css");
        localStorage.theme = "orange.css;"
    })

    $('#green').click(function(){
        $('link#theme').attr('href', "green.css");
        localStorage.theme = "green.css;"
    })

});

The above code would output two links which switch a CSS file's location on click, thus changing the theme. It also saves the last selected theme in localStorage so that it's remembered.

Sign up to request clarification or add additional context in comments.

2 Comments

Now, i have 3 files index.html, zmieniarka.js and green.css pastebin.com/nvLM1uyz but it doesn't work at all :( Thanks for help!
Here's a working demo: codepen.io/anon/pen/edElg (the link tag is visible if you click the little gear icon in the HTML pane)
0

In general you should do this on the serverside end of things - memorize preferences using cookies or sessions (and/or database tables behind them) and then just generate the correct stylesheet reference in your HTML.

IPB does the same internally, it stores your preferences in a database table and then renders the correct <link rel="stylesheet"> element in its template engine.

Alternatively you could do it completely in Javascript, loading stylesheets on demand, but that is both an advanced topic and generally an inferior solution to a solid serverside implementation.

Comments

0

You could store the default css color scheme file path in a cookie when your index page is loaded, if it is not already set.

Then when you are declaring your css file, simply do;

<link rel="stylesheet"  href="https://[YOUR_DOMAIN]/themes/[COOKIE VALUE].css" />

You could then have a change theme button which when clicked will access and change that cookie value to the new theme css file path.

Comments

0
  1. Use Javascript to load selective css onClick.
    OR
  2. Use jQuery to change color scheme onMouseClick.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.