Question

我正在尝试根据用户定义的设置或子域将商标添加到Web应用程序中。这意味着当用户使用其子域或登录名访问网站时，会更改整个网站的颜色。

有没有JavaScript库，或者可以使用Less / Sass实现这一目的的聪明方法。

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

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

您可能拥有的任何想法/解决方案都会有很大帮助！

编辑

我并不是真的想进行大量的dom操作。即更改多个元素上的类等，实际上只是交换颜色或能够在呈现页面之前操纵样式表。
我已经涵盖了子域/用户设置方面，因此仅此问题需要答案的样式更改等。
我接受之前曾提出过类似的问题，但我的问题有所不同。除了交换样式表外，我正在尝试寻找其他解决方案，而我只是在寻找更改网站颜色的方法。

Answer 1

这是我想出的一种解决方案，它可以工作，但它可能不是最佳方法。

我认为性能影响可能会超出灵活性。我也许可以使用缓存来做些事情。

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

Answer 2

尝试（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);

有没有一种方法可以随时更改您网站的颜色？

2 个答案: