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

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

实施例假设我有在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和说明不同的URL颜色代码样本示例。任何帮助或想法将不胜感激。

这是fiddle demo。

来源

2016-07-07 Sudarshan Kalebere

你可以这样做

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

来源

2016-07-07 07:01:21 LGSon

我想你是误会了问题，或者可能是我说不对，但是那只是一个例子，我有我的主题，许多class和id主题太大了，我只是给了一个例子来理解问题。我们可以做任何类似sccs的事情吗？但我不知道 –

没有这样的事情，我会有我的域名相同的类和id，你能告诉我如何使用scss吗？ –

@SudarshanKalebere我的回答是一种方式，现在显然不适合你的情况，因为我不使用SCSS，我不能使用它添加样本...但知道的人可能会提供一个:) – LGSon

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

回答

相关问题