Initial themes support (#331)

* Initial themes support

* Fix after merge

* Now UI autoresponds to backend theme change

* Move style udating logic to hass-util

* Revert unneeded change

* Switch to ES5 syntax

src/layouts/home-assistant-main.html

@@ -14,6 +14,7 @@
 <link rel='import' href='../util/ha-url-sync.html'>
 
 <link rel='import' href='../components/ha-sidebar.html'>
+<link rel='import' href='../util/hass-util.html'>
 
 <dom-module id='home-assistant-main'>
   <template>
@@ -108,6 +109,20 @@ Polymer({
     'hass-start-voice': 'handleStartVoice',
   },
 
+  ready: function () {
+    if (!this.hass) return;
+    var _this = this;
+    this.hass.callApi('get', 'themes').then(
+        function (themes) {
+          window.hassUtil.applyThemesOnElement(_this, themes);
+        });
+    this.hass.connection.subscribeEvents(
+        function (event) {
+          window.hassUtil.applyThemesOnElement(_this, event.data);
+        },
+        'themes_updated');
+  },
+
   _routeChanged: function () {
     if (this.narrow) {
       this.$.drawer.closeDrawer();

src/util/hass-util.html

@@ -473,4 +473,21 @@ window.hassUtil.computeLocationName = function (hass) {
   return hass && hass.config.core.location_name;
 };
 
+window.hassUtil.applyThemesOnElement = function (element, themes) {
+  if (!element._themes) {
+    element._themes = {};
+  }
+  if (themes.default_theme === 'default') {
+    element.updateStyles(element._themes);
+    return;
+  }
+  var theme = themes.themes[themes.default_theme];
+  var styles = Object.assign({}, element._themes);
+  Object.keys(theme).forEach(function (key) {
+    var prefixedKey = '--' + key;
+    element._themes[prefixedKey] = '';
+    styles[prefixedKey] = theme[key];
+  });
+  element.updateStyles(styles);
+};
 </script>