How to change website theme color by clicking on a button?

S

Sergey2015-09-14 14:49:50

css

Sergey, 2015-09-14 14:49:50

How can I change the background, the color of individual blocks, etc. when entering the site by clicking a button?
Example
* There is a button on top *

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

K

Kuzma Korsakov, 2015-09-14
@vazonov

create several separate themes (css files) with the names blue.css, red .css, pink.css and others at "css/colour-scheme/", and write links on the page

<a href="blue" class="new-colour blue" id="blue">blue</a>
<a href="purple" class="new-colour purple" id="purple">purple</a>
<a href="red" class="new-colour red" id="red">red</a>
<a href="green" class="new-colour green" id="green">green</a>
<a href="pink" class="new-colour pink" id="pink">pink</a>
<a href="orange" class="new-colour orange" id="orange">orange</a>

and then we hang the handler ( it is in the file )

$(document).ready(function(){

    "use strict";

    $('.new-colour').click(function(e){

        e.preventDefault();

        var id = $(this).attr('href');
        var style = ('#switch-style');

        $(style).attr('href', 'css/colour-scheme/' + id + '.css');

        $('.style-switcher').toggleClass('style-out');

    });

    $('.style-open').click(function(e){

    	e.preventDefault();

    	$('.style-switcher').toggleClass('style-out');

    });

});

D

Denis Ineshin, 2015-09-14
@IonDen

Elementary. Create 2 themes like this (it's best to use preprocessors like LESS/SASS/Stylus):

.theme_1 .header {background: #000;}
.theme_1 .button {background: #000;}
.theme_1 .link {color: #000;}

.theme_2 .header {background: #f00;}
.theme_2 .button {background: #f00;}
.theme_2 .link {color: #f00;}

Next, for example, on the html tag we hang the class of the first topic:

<html class='theme_1'>
   ...
</html>

Next, create the toggle button:
Next, write the following code in jQuery:

$(document).on('click', '.js-switch-theme', function () {
    var theme = $(this).data('name'),
          $html = $('html');

    $html.removeClass();
    $html.addClass(theme);
});

Profit!

N

Nikolai Konyukhov, 2015-09-14
@heahoh

All on the redefinition of rules in css. In links - paths to individual css files.
Here is what is seen in the console when clicking on the colors:
GET
kudosthemes.co.uk/themes/launchify/launchify-image... [HTTP/1.1 200 OK 105ms]
GET
kudosthemes.co.uk/themes/launchify/launchify-image. .. [HTTP/1.1 200 OK 0ms]
GET
kudosthemes.co.uk/themes/launchify/launchify-image...