什麼是動態改變使用聚合物構建的應用程序樣式的最佳方式？

Question

我的想法是讓不同的文件（包括.css或.html）包含特定主題的所有規則並加載主題，以動態地改變運行時的Polymer應用程序的外觀&。

---

我發現非常有用這裏所描述的聚合物本身using custom style at document level這種方法（使用.html文件）

通常你想在文檔級別定義自定義屬性值，設置主題例如，對於整個應用程序。由於自定義屬性尚未內置到大多數瀏覽器中，因此需要使用特殊的自定義樣式標記來定義聚合物元素之外的自定義屬性。嘗試添加您的index.html文件的標記中下面的代碼

基本上我們定義了一個my-theme.html，它定義了應用程序樣式中使用的變量，看起來像這樣：

<style is="custom-style"> 
     /* Define a document-wide default—will not override a :host rule in icon-toggle-demo */ 
     :root { 
     --icon-toggle-outline-color: red; 
     } 
     /* Override the value specified in icon-toggle-demo */ 
     icon-toggle-demo { 
     --icon-toggle-pressed-color: blue; 
     } 
     /* This rule does not work! */ 
     body { 
     --icon-toggle-color: purple; 
     } 
</style> 

我進口它在我的index.html文件中。

---

然後我就計算器this方法來動態改變風格找到。

HTML

<link type="text/css" rel="stylesheet" media="all" href="../green.css" id="theme_css" /> 

JS

document.getElementById('buttonID').onclick = function() { 
    document.getElementById('theme_css').href = '../red.css'; 
}; 

---

這裏的問題是，該文件是rel: stylesheet，並改變其HREF使瀏覽器重新加載該文件，並應用更改，wherease在我的情況下，changin html導入的href並沒有達到相同的效果。

有沒有辦法讓這個工作，因爲我想？有更好的解決方案來實現我的目標嗎？

Answer 1

當然，你必須使用自定義CSS屬性和mixins。如果你正確地設計你的網站，那麼交換不同的主題將會非常容易。

您可以通過執行更改自定義CSS屬性值：

this.customStyle['--my-toolbar-color'] = 'blue'; 

正在使用VAR每一個CSS規則（ - 我 - toolbal色）將變爲彩藍色，一旦你調用一個函數礦石：

this.updateStyles(); 

告訴聚合物，嘿，我剛剛更新的款式，你可以重新渲染CSS規則..

希望這有助於它就是你要找的東西。因爲你所描述的太複雜了，我想。

Answer 2

不是真的喜歡它，但這項工作：

<link rel="import" href="my-css.html"> 

<dom-module id="my-app"> 
    <template> 
    <style include="my-css"></style> 
    <button class="btn-primary-dark">Dark button</button> 
    <button class="btn-primary-light">Light button</button> 
    <button class="btn-primary-default">Default button</button> 
    <br><br> 
    <button on-click="setTheme1">Set theme 1</button> 
    <button on-click="setTheme2">Set theme 2</button> 
    </template> 
    <script> 
    class MyApp extends Polymer.Element { 
     static get is() { return 'my-app'; } 

     // Dynamicaly change vars 
     setTheme1() { 
     Polymer.updateStyles({ 
      '--dark-primary-color' : '#689F38', 
      '--default-primary-color' : '#8BC34A', 
      '--light-primary-color' : '#DCEDC8', 
      '--text-primary-color' : '#212121' 
     }); 
     } 
     setTheme2() { 
     Polymer.updateStyles({ 
      '--dark-primary-color' : '#1f8f37', 
      '--default-primary-color' : '#818bbf', 
      '--light-primary-color' : '#f0e82f', 
      '--text-primary-color' : '#333333' 
     }); 
     } 

    } 
    window.customElements.define(MyApp.is, MyApp); 
    </script> 
</dom-module> 

我-CSS。html

<dom-module id="my-css"> 
    <template> 
    <style> 
     .btn-primary-dark { 
      background-color: var(--dark-primary-color); 
      color: var(--secondary-text-color); 
     } 
     .btn-primary-light { 
      background-color: var(--light-primary-color); 
      color: var(--secondary-text-color); 
     } 
     .btn-primary-default { 
      background-color: var(--default-primary-color); 
      color: var(--secondary-text-color); 
     } 
    </style> 
    </template> 
</dom-module>