如何從單個基本主題更改不同主題的顏色代碼

我有一個基本設計，並有其他設計與基本設計主題相同，但它們的顏色不同，我想使用相同的基本設計但需要更改當用戶點擊不同的網址時，他們的顏色代碼。如何從單個基本主題更改不同主題的顏色代碼

實施例假設我有在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

如何從單個基本主題更改不同主題的顏色代碼

回答

相關問題