@vazonov
Javascript developer

Как изменить цвет темы сайта нажав на кнопку?

Как сделать так, чтобы при заходе на сайт, нажав кнопку, изменить фон, цвет отдельных блоков и т.д.?

Пример
*Там кнопка сверху*
  • Вопрос задан
  • 267 просмотров
Решения вопроса 1
создаем несколько отдельных тем (файлов css) с именами blue.css, red .css, pink.css и другие по адресу "css/colour-sсheme/", а на странице пишем ссылки

<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>


а далее вешаем обработчик (он находится в файле )

$(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');

    });

});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
IonDen
@IonDen
JavaScript developer. IonDen.com
Элементарно. Создаете 2 темы, например так (лучше всего использовать препроцессоры вроде 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;}

Далее, например на тег html вешаем класс первой темы:
<html class='theme_1'>
   ...
</html>

Далее создаем кнопку переключения:
<button class='js-switch-theme' data-name='theme_2'>Swich to theme 2</button>

Далее на jQuery пишем следующий код:
$(document).on('click', '.js-switch-theme', function () {
    var theme = $(this).data('name'),
          $html = $('html');

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


Profit!
Ответ написан
@heahoh
Full stackoverflow developer
Все на переопределении правил в ксс. В ссылках - пути до отдельных css файлов.
Вот что видно в консоли при кликах по цветам:
GET
kudosthemes.co.uk/themes/launchify/launchify-image... [HTTP/1.1 200 OK 105мс]
GET
kudosthemes.co.uk/themes/launchify/launchify-image... [HTTP/1.1 200 OK 0мс]
GET
kudosthemes.co.uk/themes/launchify/launchify-image...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
23 нояб. 2024, в 01:31
1000 руб./за проект
23 нояб. 2024, в 00:16
2000 руб./за проект
22 нояб. 2024, в 23:55
3000 руб./за проект