Polymer 在运行时更改聚合应用程序的主题

Polymer 在运行时更改聚合应用程序的主题,polymer,polymer-2.x,Polymer,Polymer 2.x,我创建了一个带有中央样式表模块的演示Polymer-2应用程序。在演示过程中,出现了这样一个问题:风格是否可以针对用户,这意味着每个用户都可以在自己的选项中选择她想要的是黑暗主题还是光明主题 有没有办法做到这一点 举个例子: 当前版本的Microsoft.NET Core联机文档在右侧有一个组合框“主题”,可供您选择暗/亮: 更新 daKmoR指出的主题回答了我的大部分问题,但我不能接受它是完全重复的,因为在我的应用程序中,一个重要的特性是用户可以随时更改主题,而不仅仅是在初始化时。因此,我将

我创建了一个带有中央样式表模块的演示Polymer-2应用程序。在演示过程中,出现了这样一个问题:风格是否可以针对用户,这意味着每个用户都可以在自己的选项中选择她想要的是黑暗主题还是光明主题

有没有办法做到这一点

举个例子: 当前版本的Microsoft.NET Core联机文档在右侧有一个组合框“主题”,可供您选择暗/亮:

更新


daKmoR指出的主题回答了我的大部分问题,但我不能接受它是完全重复的,因为在我的应用程序中,一个重要的特性是用户可以随时更改主题,而不仅仅是在初始化时。因此,我将回答自己的问题,因为我现在扩展了中给出的解决方案。

假设主题由CSS变量定义组成,那么主题文件将如下所示:

<custom-style>
    <style>
        html {
            --background-color: blue;
            --text-color: red;
        }
    </style>
</custom-style>
Polymer.importHref
语句添加到主文件的头部。选择其他主题时必须交换此链接。
当前活动主题的url保存在
currentUrl
中,这允许删除活动主题并用新主题替换它。

可能是这样的吗?是的,那确实有用!我对它进行了一点扩展,以便能够在运行时更改主题。可能重复的问题嗯,可能重复的问题回答了我的大部分问题,但我想说的是,我首先问了我的问题。所以,这并不是说我在询问之前没有进行足够的搜索;-)
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));
}