How can i add CSS style file switcher in onepage website?

Question

I have created a onepage portfolio website. Now its have 2 main stylesheet.One is default(green) and another one is red. Now i want to make two button where people can switch stylesheet each other without page loading.

You can check demo site here. I want same thing in my website.

I have used below code.It design perfectly but when i click on icon its not expand same as demo site.Here is my code:

HTML(markup):

<div class="theme-settings">
    <a href="javascript:;" data-click="theme-settings-expand" class="theme-collapse-btn"><i class="fa fa-cog fa-spin"></i></a>
    <div class="theme-settings-content">
        <ul class="theme-list clearfix">
            <li class="active"><a href="javascript:;" class="bg-green" data-theme="default"></a></li>
            <li><a href="javascript:;" class="bg-red" data-theme="red"></a></li>
        </ul>
    </div>
</div>

CSS(code for button):

.theme-settings .theme-collapse-btn {
    position: absolute;
    right: -50px;
    top: 50%;
    margin-top: -25px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 30px;
    color: #000;
    background: #fff;
    background: rgba(255, 255, 255, .9);
    border-radius: 0 4px 4px 0;
    text-align: center;
    box-shadow: 0 0 2px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .4)
}
.theme-settings {
    position: fixed;
    left: -180px;
    top: 200px;
    z-index: 1020;
    box-shadow: 0 0 2px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .4);
    width: 180px;
    -webkit-transition: left .2s linear;
    transition: left .2s linear
}
.theme-settings .theme-settings-content {
    padding: 10px 5px;
    background: #fff;
    position: relative;
    z-index: 1020
}
.theme-settings .theme-list {
    list-style-type: none;
    margin: 0;
    padding: 0
}
.theme-settings .theme-list > li {
    float: left
}
.theme-settings .theme-list > li + li {
    margin-left: 5px
}
.theme-settings .theme-list > li > a {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    display: block;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    position: relative
}
.theme-settings .theme-list > li.active > a:before {
    content: '\f00c';
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 14px;
    color: #fff;
    opacity: .4;
    filter: alpha(opacity=40);
    line-height: 30px;
    text-align: center
}
.theme-settings.active {
    left: 0
}
.bg-red {
    background: #d93240!important
}
.bg-green {
    background: #5bb12f!important
}

How can i solve this problem? Or can any one tell me any free plugin for this work. Thanks in advance.

Don't switch stylesheets. Instead define your CSS rules based on a key class placed on the `body`, eg `body.green #container { color: green; } body.red #container { color: red; }` You can then add/remove/change this class as needed — Rory McCrossan, Apr 06 '17 at 09:32
Isn’t really a duplicate of the question above. He wants to switch **stylesheets**, not **classes**. If you let me, I would happily answer the question. — Marijan, Apr 06 '17 at 09:35
Maybe this will help you: http://stackoverflow.com/questions/7846980/how-do-i-switch-my-css-stylesheet-using-jquery — Marijan, Apr 06 '17 at 09:37
@dippas mark this question as duplicate.But that was not answer for this question :( — Chonchol Mahmud, Apr 06 '17 at 09:38
**Try This** `$(".colorblue").click(function(){ $("link").attr("href", "blue.css"); return false; });` — LKG, Apr 06 '17 at 09:44
@Mary your link is helpful.But will i make two complete stylesheet(green,red) or just make a stylesheet main and make two stylesheet where just changing color classes? — Chonchol Mahmud, Apr 06 '17 at 09:54

Marijan · Accepted Answer · 2017-04-06T10:44:42.213

You could, for example, use jQuery and switch between the stylesheets on button click.

<link rel="stylesheet" type="text/css" href="default.css" data-theme-switchable>

And in your JavaScript:

$.when($.ready).then(function() {
    $('[data-theme]').on('click', function () {
        var $stylesheetName = $(this).data('theme');
        $('link[data-theme-switchable]').attr('href', $stylesheetName + '.css');
    });
});

But it would in fact be the better approach to just switch the class, i. e. of the body and format accordingly.

$.when($.ready).then(function() {
    $('[data-theme]').on('click', function () {
        $('body').attr('class', $(this).data('theme'));
    });

    // maybe set the class to the first found theme on load
    $('[data-theme]:first').trigger('click');
});

And then…

body.default { ... }
body.red { ... }

How can i add CSS style file switcher in onepage website?

1 Answers1