我想在我的飞镖-聚合物材料设计应用程序中应用一个主题,我到处看视频和教程,都建议用几行CSS就可以改变整个应用程序的外观。
我刚才甚至还用它生成了一个主题。http:/www.materialpalette.comgreyred 然后它给了我以下CSS。
/* Palette generated by Material Palette - materialpalette.com/grey/red */
.dark-primary-color { background: #616161; }
.default-primary-color { background: #9E9E9E; }
.light-primary-color { background: #F5F5F5; }
.text-primary-color { color: #212121; }
.accent-color { background: #FF5252; }
.primary-text-color { color: #212121; }
.secondary-text-color { color: #727272; }
.divider-color { border-color: #B6B6B6; }
...我将其包含在我的默认样式表中,但没有改变颜色。
所以,如果这是我的自定义聚合元素,这是我的index.html,使用该自定义主应用程序组件:..:
<polymer-element name="main-app" class="default">
<template>
<style type="text/css">
:host {
display: block;
}
</style>
<core-toolbar class="default">
<paper-icon-button icon="menu"></paper-icon-button>
<span flex class="default">
<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
</span>
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
</core-toolbar>
</template>
<script type="application/dart" src="main-app.dart"></script>
</polymer-element>
而这是我的index. html,使用了自定义的主程序组件。
<!DOCTYPE html>
<head>
...
<link rel="import" href="packages/falm/main-app.html">
<link rel="stylesheet" href="styles.css">
</head>
<body unresolved>
<main-app class="default"></main-app>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
...使用生成的主题的正确方法是什么?我是否应该在所有地方手动添加这些CSS类?
是的,你需要在某个地方添加类。
你可以使用 核心式元素 来重用样式,或者您可以将样式添加到主页面中 (index.html
),并在它们前面加上 * /deep/
(如`*深.深色-主色),但仍需要将类应用到元素中。
一些关于聚合元素造型的资源