How do we define global theme elements?

[petearvanitis]

How/where do we define global theme elements when using either the Elements or Widget approach? I see how we can override --default-primary-color at the individual widget level, but not how to specify it globally for the entire application. Is there a way you could update the documentation to show this as an example?

[petearvanitis]

I was able to do this by injecting a static css sheet by calling Polymer.importHref("../../path/to/my/stylesheet") however this does have a couple limitations:

• You need to restart GWT every time you make a change to this style. It would be awesome if we could somehow get Polymer.importHref to work off the classloader so we could pull the file from the resources directory so we could dynamically change theme elements.
• If you are using a proxy to combine superdevmode w/ local REST server, you'll get a CORS exception from the SuperDevMode server (workaround is to hardcode the path to pull from the proxy instead). I'm not sure if this is a configuration issue or an issue w/ how importHref works w/ SuperDevMode. I'm only including this comment in case someone has a similar issue trying to implement a global theme.

So adding a custom global-theme.html file and using Polymer.importHref to the demo and style notes in the readme.md would be sufficient to close this issue.

[manolo]

Yes, superdevmode does not monitor files out of the src/main/java folder, so one option is

• have your static css in the src/main/java/...../public/mycustom.css folder, and reference it in your index.html page as module_folder/mycustom.css, so as SDM would update it each time you modify it and reload
• use some kind of watcher so as changes in src/main/resources are copied to target/your_deploy_folder/ (take a look to npm. This node script normally works to me:

       require('node-watch')(['src/main/webapp','src/main/resources'], function() {
         console.log(arguments);
         require('child_process').exec('mvn generate-sources');
      });

• finally another alternative is to define styles inside your ui.xml file but out of the <ui:style> section like:

  <g:HTMLPanel>
     <style is="custom-style">
     </style>
  ....
  </g:HTMLPanel>