在運行時更改Polymer應用程序的主題

我創建了一個帶有中央樣式表模塊的演示Polymer-2應用程序。在演示過程中，問題出現在風格是否可以作爲用戶特定的，意味着每個用戶都可以f.e.在他的選項中選擇她是否想要黑暗或光明的主題。在運行時更改Polymer應用程序的主題

有什麼辦法可以達到這個目的嗎？

只是一個例子：微軟.NET的核心在線文檔的當前版本對右側的下拉框「主題」，可以讓你暗/燈光可供選擇： https://docs.microsoft.com/en-us/dotnet/api/system.io.file.copy?view=netcore-1.1#System_IO_File_Copy_System_String_System_String_

更新

daKmoR指出的SO回答了我的大部分問題，但我不能接受它作爲完整的副本，因爲在我的應用程序中，一個重要功能是主題可以隨時由用戶更改，而不僅僅在初始化時更改。因此我會回答自己，因爲我現在已經擴展了在How to import stylesheet dynamically Polymer 2.0中給出的解決方案。

來源

2017-08-16 NicolasR

也許是這樣的？ https://stackoverflow.com/questions/45731227/how-to-import-stylesheet-dynamically-polymer-2-0/45746195 – daKmoR

是的，這確實有幫助！我將它擴展了一點，以便能夠在運行時更改主題。 – NicolasR

的可能的複製[如何導入樣式表動態聚合物2.0（https://stackoverflow.com/questions/45731227/how-to-import-stylesheet-dynamically-polymer-2-0） – daKmoR

假設主題包括CSS變量定義則主題文件將是這個樣子：

<custom-style> 
    <style> 
     html { 
      --background-color: blue; 
      --text-color: red; 
     } 
    </style> 
</custom-style>

現在給出在應用程序的組件之一（按鈕，組合框等）用戶的某些UI控件會能夠與這個輔助方法（ES6類語法）來更改主題在運行時：

loadTheme(url) { 
    //Remove the currently active theme 
    let href = this.resolveUrl(this.currentUrl); 
    let link = (document.head.querySelector('link[href="' + href + '"][import-href]')); 

    if (link) 
     link.parentNode.removeChild(link); 

    //Import the new one   
    this.currentUrl = url; 
    Polymer.importHref(this.resolveUrl(url)); 
}

Polymer.importHref增加了一個<link>語句將主文件的頭。選擇其他主題時必須交換此鏈接。當前活動主題的網址保存在currentUrl中，這允許刪除活動主題並將其替換爲新主題。

來源

2017-08-21 19:27:39 NicolasR

在運行時更改Polymer應用程序的主題

回答

相關問題