From b57c86a29c101dce11d38ac9bca76ec7911a7c11 Mon Sep 17 00:00:00 2001
From: Andrey <andrey-git@users.noreply.github.com>
Date: Sun, 30 Jul 2017 02:31:51 +0900
Subject: [PATCH] Add JS support for device-local theme name (#358)

* Add JS support for device-local theme name

* Keep themes in hass object

* Make it actually work

* Move themes from home-assistant-main to home-assistant
---
 src/home-assistant.html              | 15 +++++++++++++++
 src/layouts/home-assistant-main.html | 14 --------------
 src/util/hass-util.html              | 10 +++++++---
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/home-assistant.html b/src/home-assistant.html
index 65a56de3e6..d827c9ea35 100644
--- a/src/home-assistant.html
+++ b/src/home-assistant.html
@@ -125,6 +125,7 @@ Polymer({
       connected: true,
       states: null,
       config: null,
+      themes: null,
       dockedSidebar: false,
       moreInfoEntityId: null,
       callService: function (domain, service, serviceData) {
@@ -186,11 +187,25 @@ Polymer({
       unsubConfig = unsub;
     });
 
+    var unsubThemes;
+
+    this.hass.callApi('get', 'themes').then(function (themes) {
+      el.hass.themes = themes;
+      window.hassUtil.applyThemesOnElement(el, themes);
+    });
+    conn.subscribeEvents(function (event) {
+      el.hass.themes = event.data;
+      window.hassUtil.applyThemesOnElement(el, event.data);
+    }, 'themes_updated').then(function (unsub) {
+      unsubThemes = unsub;
+    });
+
     this.unsubConnection = function () {
       conn.removeEventListener('ready', reconnected);
       conn.removeEventListener('disconnected', disconnected);
       unsubEntities();
       unsubConfig();
+      unsubThemes();
     };
   },
 
diff --git a/src/layouts/home-assistant-main.html b/src/layouts/home-assistant-main.html
index 0fce5c646b..9f7f1c0e34 100644
--- a/src/layouts/home-assistant-main.html
+++ b/src/layouts/home-assistant-main.html
@@ -111,20 +111,6 @@
       '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();
diff --git a/src/util/hass-util.html b/src/util/hass-util.html
index e34de18b6b..5cac2161f0 100644
--- a/src/util/hass-util.html
+++ b/src/util/hass-util.html
@@ -492,15 +492,19 @@ window.hassUtil.computeLocationName = function (hass) {
   return hass && hass.config.core.location_name;
 };
 
-window.hassUtil.applyThemesOnElement = function (element, themes) {
+window.hassUtil.applyThemesOnElement = function (element, themes, localTheme) {
   if (!element._themes) {
     element._themes = {};
   }
-  if (themes.default_theme === 'default') {
+  var themeName = themes.default_theme;
+  if (localTheme === 'default' || (localTheme && themes.themes[localTheme])) {
+    themeName = localTheme;
+  }
+  if (themeName === 'default') {
     element.updateStyles(element._themes);
     return;
   }
-  var theme = themes.themes[themes.default_theme];
+  var theme = themes.themes[themeName];
   var styles = Object.assign({}, element._themes);
   Object.keys(theme).forEach(function (key) {
     var prefixedKey = '--' + key;