Как создать динамическую смену темы для сайта?

Question

[ilyahuman]

Доброго времени суток, дали довольно сложную для меня задачу - динамическая панель управления на сайте.
1) Через input type="color" выбирается два цвета: основной и второстепенный. Так же есть 4 готовых палитры, с ними вроде проще. Каким образом цепляться за выбранный цвет из палитры есть там только его код, как этим влиять на CSS?
2) Есть выбор кнопок, 2 варианта: с border-radius и без.
Такой задачи еще не было, сложно сообразить как это все сделать. Буду рад любым советам, даже просто абстрактным, наводящим (куда классы присваивать, как менять цвета у кнопок у которых уже есть дефолтные цвета и так далее)
Т.к. задача реально сложная, был бы благодарен за помощь в дальнейшем, вот моя почта: [e-mail]
Благодарю!

Comments

[Кирилл]

Как эти темы планируете сохранять? У авторизованного пользователя в БД будет тема сохраняться? Или просто любой пользователь может зайти и тему поменять для себя?

[ilyahuman]

Кирилл Кубляков: Это для авторизованных пользователей

[ilyahuman]

Кирилл Кубляков: Записываться будет в БД, чтобы все формировалось на сервере

[Сергей Тутуков]

создать готовый файл css с изменением темы. Например
.nav{
background: {color};
color:{color2};
...
}

- распарсить его, заменить цвет {color} и {color2} на собственный и сохранить.

https://codepen.io/STutukov/pen/NpMopB?editors=1010 - меняется цвет текста у .theme

Answer 1

[Алексей Скляров]

Собственно как организовать это через JS догадаться не сложно.

Создаете 4 чекбокса под 4 расцветки сайта, в зависимости от выбранного чекбокса, через jQuery добавляются классы к вашим дивам.
Но этот вариант будет отпадать при перезагрузке страницы.

Через БД это сделать тоже не сложно, как заносить название цветовой схемы в базу, думаю, разберетесь. Кстати логичнее это делать на странице настроек пользователя. Далее вы просто проверяете, какой у пользователя выбран цвет сайта, после чего через php прописываете нужные параметры к странице.

Comments

[ilyahuman]

Допустим, а как быть с эффектами кнопок? Цвет шрифта, фона, рамки, все это при hover, focus ? Как с этим быть, как подбирать адекватные цвета?

[Алексей Скляров]

ilyahuman: как подбирать цвета это вопрос к дизайнеру. все эффекты прописываются с помощью стилей, ваша задача просто написать стили для 4х ваших цветовых схем и в зависимости от схемы присваивать блокам нужный класс CSS

[Антон]

"Но этот вариант будет отпадать при перезагрузке страницы." - почему не использовать куки, локатстор?

[ilyahuman]

Алексей Скляров: Смотрите, там есть 4 готовы палитры, а 2 можно самому менять, выбрать любой цвет из стандартной палитры ОС. Но я уже нашел как сделать hover эффект под любой цвет, функция которая берет выбранный цвет и меняет его

[Алексей Скляров]

Антон: их можно использовать, про них я не стал уже писать, ибо увидел что автору нужно через базу делать

[Алексей Скляров]

ilyahuman: сама идея самому менять под себя дизайн слишком сложнореализуема именно в плане сочетаемости. если вы собираетесь дать возможность поменять кнопки, блоки, то нужно давать поменять ховер эффекты. Но я считаю, что дать возможность пользователю выбирать из готовых вариантов расцветки темы и самому менять фон сайта - более чем достаточно

Answer 2

[Роман Мисюра]

1. Как вариант переменные (https://www.w3.org/TR/css-variables/) - т.е. в шапке сайта допустим прописать переменные со значениями, в стилях только поставить переменные.
2. Попробовать метод №1 но вместе с LESS например.
3. Вытащить все классы и идентификаторы где должны поменять цвет в шапку сайта (там уже через пхп вставку из темы) а в стилях оставить все остальное. (т.е. выводим только цвета).
4. Касаемо кнопок просто добавлять к ним разные класы.