Изменение цветовой палитры HTML-страницы с помощью флажка - PullRequest
Новая
       41

Изменение цветовой палитры HTML-страницы с помощью флажка

0 голосов
/ 05 ноября 2018

( Обновление 2 : Этот вопрос относится к SPA , хотя это незначительно относится к вопросу.)

Мои пользователи разделены между любителями неба и любителями леса. Поскольку я не собираюсь сообщать им, какую цветовую схему использовать, а также не собираюсь выпускать отдельные приложения, я поставил флажок, который выбирает между двумя палитрами.

Это довольно просто. Мы можем, например, выбрать контейнеры и установить их класс. 

function change_palette(cb) {
    var bg = document.getElementById("somecontainer");
    var fg = document.getElementById("sometext");
    if(!cb.checked) {
        bg.className = "mycontainer sky_bgcol";
        fg.className = "mytext sky_fgcol";
    }
    else {
        bg.className = "mycontainer forest_bgcol";
        fg.className = "mytext forest_fgcol";
    }
}    
.sky_fgcol { color: #D6EAF8; }
.sky_bgcol { background-color: #2e86c1; }

.forest_fgcol { color: #D4EFDF; }
.forest_bgcol { background-color: #196F3D; }

.mycontainer { width: 400px; height: 300px; }
.mytext { text-align: center; }
.floatright { float: right; }
<div id="somecontainer" class="mycontainer sky_bgcol">
    <div id="sometext" class="mytext sky_fgcol">
        <h2>Title</h2>
        <label class="floatright">
            <input type='checkbox'
                onclick='change_palette(this);'>Sky/Forest
        </label>
    </div>
</div>

Но с этим подходом есть две проблемы, если вместо двух цветов у нас шесть или семь, а вместо двух DIV у нас несколько десятков.

  1. Функция change_palette() хрупкая. Нужно знать, какие элементы принадлежат какой палитре. Рано или поздно кто-то добавит элемент и не сможет соответствующим образом изменить эту функцию.
  2. Части каждой цветовой схемы не связаны. Правильное решение будет изменить один указатель на небо / лес, чтобы настроить палитру.

Я могу решить обе проблемы, написав файл конфигурации, в котором в одном месте указаны необходимые настройки.

Но мне интересно, будет ли это излишним, и у SASS / SCCC есть функция, которая решит эту проблему более красиво. Они? Можете ли вы указать указатель пути для хорошего решения?

Обновление 1

Пол предлагает использовать переменные CSS и затем (в JavaScript) переключаться между цветовыми палитрами, но это нежелательно, так как цвета будут дублироваться между CSS и Javascript (что является головной болью при обслуживании, которая также отображает Определения переменных CSS излишни).

P.S .: Я предоставил MWE, чтобы мы могли получить конкретные вопросы и ответы.

1 Ответ

0 голосов
/ 06 ноября 2018

Если вы просто хотите изменить цвета, вам следует использовать переменные CSS (пользовательские свойства): 

:root{
    --main-color: #D6EAF8;
    --main-bg-color: #2e86c1;
}

.sky_fgcol { color: var(--main-color) }
.sky_bgcol { background-color: var(--main-bg-color) }

Затем вы используете что-то вроде этого, чтобы переключать их: 

document.documentElement.style.setProperty('--main-color', 'yellow');
document.documentElement.style.setProperty('--main-bg-color', 'red');

Подробнее здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

если вы хотите переключить всю палитру за один вызов, вы можете сделать это, выделив все на теле или элементе высокого уровня, например, у вас есть тег class = "sky" в теге, и вы хотите изменить его, просто замените его класс с новым. CSS должен быть ограничен примерно так: 

.sky .fgcol{...}
.sky .bgcol{...}

Или вы можете использовать переменные и область видимости переменных: 

.sky{
    --main-color: #D6EAF8;
    --main-bg-color: #2e86c1;
}
.fgcol{color: var(--main-color)}

как, например, вам не нужно явно ограничивать классы и переписывать их, просто есть разные области действия, определяющие все переменные, а затем переключать их из тела. с одним классом заменить.

...