如何从单个基本主题更改不同主题的颜色代码答案

【问题标题】：how to change color codes for different themes from a single base theme如何从单个基本主题更改不同主题的颜色代码
【发布时间】：2016-11-09 09:08:07
【问题描述】：

我有一个基本设计，还有其他设计与基本设计主题相同，但它们的颜色不同，我想使用相同的基本设计，但当用户点击不同的 url 时需要更改它们的颜色代码。

例如，假设我在 base.theme.com 加载了一个基本主题然后我还有一个结构相同但颜色不同的主题，它托管在 url theme1.base.com，同样我有

theme2.base.com
theme3base.com
theme4.base.com
and so on...

我想要的是我不想为每个主题编写不同的 css，而是想根据加载的主题更改颜色代码。

这里是演示示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .header-bar{
            background: black;
        }
        .navbar-brand{
            color:white;
        }
        .section .panel-title{
            color: green;
        }
        .data-desc{
            color: gray;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default header-bar">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Logo</a>
        </div>
    </div>
</nav>
<div class="panel panel-default section">
    <div class="panel-heading">
        <h3 class="panel-title">Title</h3>
    </div>
    <div class="panel-body">
        <p class="data-desc">random data</p>
    </div>
</div>
<div class="panel panel-default section">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        <p class="data-desc">my random data</p>
    </div>
</div>
<div class="panel panel-default section">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        <p class="data-desc">my random data</p>
    </div>
</div>
</body>
</html>

现在我如何更改不同网址的标题、导航栏背景和描述的颜色代码。任何帮助或想法将不胜感激。

这是fiddle demo。

【问题讨论】：

标签： html css sass

【解决方案1】：

你可以这样做

Updated fiddle

/* script - run on load and set the hostname to the body as an attribute */
(function(b) {
  b.setAttribute('data-host', location.hostname);
})(document.body);


/* CSS - overrides the default on selected hosts */
body[data-host='fiddle.jshell.net'] .section .panel-title {
  color: red;
}

【讨论】：

我认为你误解了这个问题，或者我说错了，但这只是一个例子，我的主题有很多类和 id，而且主题太大，我只是举了一个例子理解问题。我们可以做 sccs 之类的事情吗？但我不知道
没有类似的东西，我将拥有与我的域名相同的类和 id，你能告诉我如何使用 scss 吗？
@SudarshanKalebere 我的回答是一种方式，现在显然不适合您的情况，而且由于我自己不使用 SCSS，我无法使用它添加示例......但知道的人会可能提供一个:)