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

(Обновление 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, чтобы у нас были конкретные вопросы и ответы.


html color-palette
person Vrokipal    schedule 05.11.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

если вы просто хотите изменить цвета, вы должны использовать переменные 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)}

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

person Paul G Mihai    schedule 05.11.2018
comment
Основная проблема заключается в том, что название переменных CSS несколько благотворительно. Эти конструкции похожи не на переменные, а на то, что в языке C называется макросами, совершенно отвратительная конструкция, бесполезная для программирования в больших масштабах. - person Vrokipal; 13.11.2018
comment
Что ж, это может быть правдой, но в CSS это на самом деле помогает делать такие большие переключатели простыми. Я думаю, что это оптимизация скорости для движка CSS, позволяющая обрабатывать его таким образом, а не фактические переменные (которые мне бы тоже очень понравились). - person Paul G Mihai; 14.11.2018