我的想法是拥有包含特定主题的所有规则的不同文件(.css或.html),并在运行时动态更改Polymer应用程序的外观和感觉。
我发现Polymer在这里描述的这个方法很有用using custom style at document level(使用.html文件)
通常,您希望在文档级别定义自定义属性值,以便为整个应用程序设置主题。由于自定义属性尚未构建到大多数浏览器中,因此您需要使用特殊的自定义样式标记来定义Polymer元素之外的自定义属性。尝试在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文件中导入它。
然后我在stackoverflow 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会导致浏览器重新加载文件并应用更改,在我的情况下改变html导入的href并不是这样的达到同样的效果。
有没有办法让我按照自己的意愿工作?有没有更好的解决方案来实现我的目标?
答案 0 :(得分:1)
当然,您必须使用自定义CSS属性和mixins。如果你正确地设计你的网站,很容易换成不同的主题。
您可以通过执行以下操作更改自定义CSS属性值:
this.cameraService.getImage(this.width,this.height,this.quality)
.subscribe( (data) => {
this.image = data;
this.getVision(this.image);
},(error) => {
// Toast errot and return DEFAULT_PHOTO from Constants
this.toast(error);
}
);
一旦你调用了一个ore函数,每个使用var( - my-toolbal-color)的css规则都将变为蓝色:
this.customStyle['--my-toolbar-color'] = 'blue';
告诉Polymer,嘿,我刚刚更新了样式,你可以重新渲染css规则..
希望这会有所帮助,而这正是您所寻求的。因为你所描述的内容太复杂了我认为。
答案 1 :(得分:0)
不是很满意,但那项工作:
<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>
MY-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>