Question

我创建了一个带有中央样式表模块的演示Polymer-2应用程序。在演示期间，问题出现在是否可以使用户特定的样式，这意味着每个用户都可以。在他的选项中选择她是想要黑暗还是浅色主题。

有没有办法实现这个目标？

只是一个例子：当前版本的Microsoft .NET Core在线文档右侧有一个组合框“主题”，可让您在暗/亮之间进行选择： 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中给出的解决方案。

Answer 1

假设主题由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中，这样可以删除活动主题并将其替换为新主题。

在运行时

1 个答案: