有没有办法即时更改网站的颜色？

Question

我正在尝试根据用户定义的设置或子 domain 将品牌添加到 Web 应用程序。这意味着当用户使用他们的子 domain 或登录名访问网站时，整个网站的颜色都会发生变化。

是否有任何 JavaScript 库或可以使用 Less/Sass.

实现此目的的巧妙方法

我已经在网上发现了更明显的解决方案，即拥有多个样式 sheet 或使用更少的文件来导入主要样式并覆盖主要变量等。

我希望找到某种 JavaScript 库，可以在渲染前动态更改颜色或替换 css 文件中的颜色。或者也许有一些很酷的 css 技巧可以提供帮助？

任何 Ideas/solutions 你可能会有很大的帮助！

编辑

我真的不想做大量的 dom 操作。即在多个元素上更改类等。它只是真正交换颜色或能够在呈现页面之前操纵样式 sheet。
我已经涵盖了子 domain / 用户设置方面，所以它只是改变样式等，这个问题需要回答。
我承认以前有人问过类似的问题，但我的问题不同。除了交换样式 sheet 之外，我正在尝试寻找任何解决方案，我只是想更改网站的颜色。

Answer 1

试试 (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 header 添加不同的样式表，如下所示

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

Answer 2

这是我想出的解决方案，但它可能不是最好的解决方案。

我认为性能影响可能超过灵活性。我也许可以使用缓存来做一些事情来提供帮助。

需要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);
}

有没有办法即时更改网站的颜色？

Is there a way to change the colour of your website on the fly?

javascript

css

themes

sass

less