I need to switch my style sheets on clicking a link in page so that the page is displayed in different color themes

Question

HTML

<head>
    <style type="text/css>
        @import url("style.css")  //my main css file
    </style>
    // css file which contains only color properties.
    <link href="theme_blue.css" rel="stylesheet"> 
</head>

<body>
    <a href="#" id="theme-blue">Click Here to switch color</a> 
</body>

CSS (theme_blue.css)

body
{
    background-color:#66ccff;
}

JS

$(document).ready(function() { 
    $("#theme-blue").click(function() { 
        $("link").attr("href", "theme_blue.css");
        return false;
    });
});

My problem is, when I click the link, the entire structure of the web page is lost and no color changes happen. I am very new to this technology and need some help from experts. Kindly suggest me solutions to overcome this problem.

http://stackoverflow.com/questions/7846980/how-do-i-switch-my-css-stylesheet-using-jquery — Ankith, Sep 23 '14 at 10:02
Try to don't use `@import`. It slows down your page speed... — algorhythm, Sep 23 '14 at 16:44

user3416023 · Answer 1 · 2014-09-23T13:53:27.927

Your problem is with your jQuery selector. You are applying the attribute href to all link elements including your main css link. I suggest you give your link and id then update your selector:

html

<head>
    <style type="text/css>
        @import url("style.css")  //my main css file
    </style>
    // css file which contains only color properties.
    <link id="css_theme_blue" href="theme_blue.css" rel="stylesheet"> 
</head>

<body>
    <a href="#" id="theme-blue">Click Here to switch color</a> 
</body>

jQuery

$(document).ready(function() { 
    $("#theme-blue").click(function() { 
        $("#css_theme_blue").attr("href", "theme_blue.css");
        return false;
    });
});

Might I offer another solution that I practice.

I have my style sheets but I change the body class to reflect what I want a particular element to look like.

body.blue_theme #element_1 {
background:blue;
}

body.green_theme #element_2 {
background: green;
}

then I swap out the body class when I want themes to change:

$('#blue-theme-button').on('click', function() {
$(body).removeClass('green_theme').addClass('blue_theme');
}

This method is preferable to me because all styles are loaded at the beginning and there won't be a pause on slower machine when a new stylesheet is loaded.

Thanks.i tried adding id to link tag but this time wen i click the link nothing happens.Is there any other approach to achieve this?? — Suganya Yuvaraj, Sep 23 '14 at 11:36
I edited my answer to give you a different solution which I think might be better for you. — user3416023, Sep 23 '14 at 13:54

score 0 · Answer 2 · answered Sep 23 '14 at 14:13

Lets say you have a two css files in /Content folder.

main-theme.css :

body {
   background-color:#fff;
}

blue-theme.css :

body {
   background-color: blue;
}

you have a page which uses by default main-theme.css and link element has id #siteTheme, also you have clickable element with id #blueTheme

<link id="siteTheme" href="/Content/main-theme.css" rel="stylesheet" type="text/css" />
<a href="#" id="blueTheme">Activate Blue Theme</a>

all you need is to write function for #blueTheme click, which changes href attribute value of link element with id #siteTheme:

<script>
            $(document).ready(function () {
                $("#blueTheme").click(function () {
                    $("#siteTheme").attr("href","/Content/blue-theme.css");
                });
            })
</script>

i hope this will help ;) and don't forget to load jquery before writing those scripts.

<script src="/Scripts/jquery-1.10.2.min.js"></script>

I need to switch my style sheets on clicking a link in page so that the page is displayed in different color themes

2 Answers2