Question

我有一个基础设计，其他设计与基础设计主题相同但颜色不同，我想使用相同的基础设计，但需要在用户点击不同的网址时更改其颜色代码。

示例假设我在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>

现在，如何更改不同网址的标题，导航栏bg和说明的颜色代码。任何帮助或想法将不胜感激。

这是fiddle demo。

Answer 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;
}

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

1 个答案: