Есть ли способ изменить цвет вашего сайта на лету? - PullRequest
Новая
       43

Есть ли способ изменить цвет вашего сайта на лету?

0 голосов
/ 28 марта 2019

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

Существуют ли какие-либо библиотеки JavaScript или какие-либо умные способы добиться этого, используя Less / Sass.

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

Я надеюсь найти какую-нибудь библиотеку JavaScript, которая может изменять цвета на лету или заменять цвета в файле CSS перед визуализацией. Или, может быть, есть какие-то классные трюки CSS, которые могут помочь?

Любые идеи / решения, которые могут у вас возникнуть, будут очень полезны!

редактирует

  • На самом деле я не собираюсь много манипулировать домом. то есть изменение классов на нескольких элементах и ​​т. д. Это просто действительно меняет цвета или может манипулировать таблицами стилей перед отображением страниц.

  • У меня есть под-домен / пользовательская настройка, поэтому только изменение стилей и т. Д., На которые этот вопрос требует ответов.

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

Ответы [ 2 ]

0 голосов
/ 28 марта 2019

Это решение, которое я придумала, оно работает, но, возможно, это не лучший способ сделать это.

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

Требуется Less.js:

http://lesscss.org/usage/#using-less-in-the-browser

function changeTheme()
{
    // get via api
    var brand = {
        '@primary' : "#000F46",
        '@secondary' : "#CD3331",
        '@text' : "#F2DA00"
    };

    less.modifyVars(brand);
}
0 голосов
/ 28 марта 2019

попробуй (js + css) 

let subdomain = window.location.host.split('.')[0];

document.body.classList.add(subdomain);

console.log('subdomain:', subdomain);
/* COOMMON styles */

.myDiv {
  padding: 20px;
  background: #eee;
}

/* SUBDOMAINs styles */

body.stacksnippets .myDiv {
  color:red;
}

body.othersubdomain .myDiv {
  color:blue;
}
<div class="myDiv">Some value</div>

После обновления вопроса

Вы можете добавить различные таблицы стилей в зависимости от субдомена в заголовок html следующим образом 

let subdomain = window.location.host.split('.')[0];
let url = `https://example.com/pathtostyle/${subdomain}/yourstyle.css`
document.head.innerHTML += 
    `'<link rel="stylesheet" type="text/css" href="${url}">'`;
console.log(url);
...