How to style a dart-polymer material-design application


I’m trying to apply a theme to my dart-polymer material-design application, everywhere I look at videos and tutorials, it is suggested that with a few lines of CSS you can change the look of the whole application.

I’ve even generated a theme just now using: and it gave me the following CSS:

/* Palette generated by Material Palette - */
.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; }

… which I’ve included in my default stylesheet, but with no colour changes.

So if this is my custom polymer element:

<polymer-element name="main-app" class="default">
    <style type="text/css">
      :host {
        display: block;


    <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-icon-button icon="refresh"></paper-icon-button>
        <paper-icon-button icon="more-vert"></paper-icon-button>

  <script type="application/dart" src="main-app.dart"></script>

And this is my index.html using that custom main-app component:

<!DOCTYPE html>


  <link rel="import" href="packages/falm/main-app.html">
  <link rel="stylesheet" href="styles.css">

<body unresolved>
  <main-app class="default"></main-app>
  <script type="application/dart">export 'package:polymer/init.dart';</script>

… what is the proper way to use the generated theme?
Am I suppose to add those css classes in manually everywhere?


Yes, you need to add the classes somewhere.

You can use the core-style element to reuse styles or you can add the styles to the main page (index.html) and prefix them with * /deep/ (like `* /deep/ .dark-primary-color) but still need to apply the classes to the elements.

Some resources about styling polymer elements

Answered By – Günter Zöchbauer

Answer Checked By – Robin (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.