Add themes to demos (#2518)

demo/src/configs/demo-configs.ts

@@ -23,4 +23,5 @@ export const setDemoConfig = async (
   const config = await selectedDemoConfig;
   hass.addEntities(config.entities(), true);
   lovelace.saveConfig(config.lovelace());
+  hass.mockTheme(config.theme());
 };

demo/src/configs/jimpower/entities.ts

@@ -3774,7 +3774,7 @@ export const demoEntitiesJimpower: () => Entity[] = () =>
     "binary_sensor.recycle": {
       entity_id: "binary_sensor.recycle",
       state: "off",
-      attributes: { friendly_name: "Recycle", icon: "fas:recycle" },
+      attributes: { friendly_name: "Recycle", icon: "mdi:recycle" },
       last_changed: "2019-01-14T08:57:00.348349+00:00",
       last_updated: "2019-01-14T08:58:04.463267+00:00",
       context: { id: "76ef24942b0b4822bde851fc9e5e1b37", user_id: null },
@@ -3782,7 +3782,7 @@ export const demoEntitiesJimpower: () => Entity[] = () =>
     "binary_sensor.trash": {
       entity_id: "binary_sensor.trash",
       state: "off",
-      attributes: { friendly_name: "Trash", icon: "fas:trash-alt" },
+      attributes: { friendly_name: "Trash", icon: "mdi:delete" },
       last_changed: "2019-01-15T14:00:01.040666+00:00",
       last_updated: "2019-01-15T14:00:01.040666+00:00",
       context: { id: "7bb9aaeb1b6b41e3be746e200a452318", user_id: null },
@@ -3812,7 +3812,7 @@ export const demoEntitiesJimpower: () => Entity[] = () =>
       state: "off",
       attributes: {
         friendly_name: "Doors",
-        icon: "fas:door-closed",
+        icon: "mdi:door-closed",
         device_class: "door",
       },
       last_changed: "2019-01-18T19:17:16.499271+00:00",
@@ -3824,7 +3824,7 @@ export const demoEntitiesJimpower: () => Entity[] = () =>
       state: "on",
       attributes: {
         friendly_name: "Lights",
-        icon: "fas:lightbulb",
+        icon: "mdi:lightbulb",
         device_class: "light",
       },
       last_changed: "2019-01-18T18:59:16.225881+00:00",

demo/src/configs/jimpower/index.ts

@@ -1,6 +1,7 @@
 import { DemoConfig } from "../types";
 import { demoLovelaceJimpower } from "./lovelace";
 import { demoEntitiesJimpower } from "./entities";
+import { demoThemeJimpower } from "./theme";
 
 export const demoJimpower: DemoConfig = {
   authorName: "Jimpower",
@@ -8,4 +9,5 @@ export const demoJimpower: DemoConfig = {
   name: "Kingia Castle",
   lovelace: demoLovelaceJimpower,
   entities: demoEntitiesJimpower,
+  theme: demoThemeJimpower,
 };

demo/src/configs/jimpower/theme.ts

@@ -0,0 +1,48 @@
+export const demoThemeJimpower = () => ({
+  "text-primary-color": "var(--primary-text-color)",
+  "paper-item-icon-color": "var(--primary-text-color)",
+  "primary-color": "#5294E2",
+  "label-badge-red": "var(--accent-color)",
+  "paper-tabs-selection-bar-color": "green",
+  "paper-slider-knob-color": "var(--accent-color)",
+  "light-primary-color": "var(--accent-color)",
+  "primary-background-color": "#383C45",
+  "primary-text-color": "#FFFFFF",
+  "paper-item-selected_-_background-color": "#434954",
+  "paper-slider-active-color": "var(--accent-color)",
+  "secondary-background-color": "#383C45",
+  "paper-slider-container-color":
+    "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat",
+  "paper-slider-disabled-active-color": "var(--disabled-text-color)",
+  "disabled-text-color": "#7F848E",
+  "paper-item-icon_-_color": "green",
+  "paper-grey-200": "#414A59",
+  "label-badge-background-color": "#2E333A",
+  "paper-card-header-color": "var(--accent-color)",
+  "paper-listbox-background-color": "#2E333A",
+  "table-row-background-color": "#353840",
+  "paper-grey-50": "var(--primary-text-color)",
+  "paper-toggle-button-checked-button-color": "var(--accent-color)",
+  "paper-dialog-background-color": "#434954",
+  "secondary-text-color": "#5294E2",
+  "google-red-500": "#E45E65",
+  "divider-color": "rgba(0, 0, 0, .12)",
+  "paper-toggle-button-unchecked-ink-color": "var(--disabled-text-color)",
+  "google-green-500": "#39E949",
+  "paper-toggle-button-unchecked-button-color": "var(--disabled-text-color)",
+  "label-badge-border-color": "green",
+  "paper-listbox-color": "var(--primary-color)",
+  "paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
+  "paper-toggle-button-checked-ink-color": "var(--accent-color)",
+  "paper-card-background-color": "#434954",
+  "label-badge-text-color": "var(--primary-text-color)",
+  "paper-slider-knob-start-color": "var(--accent-color)",
+  "paper-toggle-button-unchecked-bar-color": "var(--disabled-text-color)",
+  "dark-primary-color": "var(--accent-color)",
+  "paper-slider-secondary-color": "var(--secondary-background-color)",
+  "paper-slider-pin-color": "var(--accent-color)",
+  "paper-item-icon-active-color": "#F9C536",
+  "accent-color": "#E45E65",
+  "paper-toggle-button-checked-bar-color": "var(--accent-color)",
+  "table-row-alternative-background-color": "#3E424B",
+});

demo/src/configs/kernehed/index.ts

@@ -1,6 +1,7 @@
 import { DemoConfig } from "../types";
 import { demoLovelaceKernehed } from "./lovelace";
 import { demoEntitiesKernehed } from "./entities";
+import { demoThemeKernehed } from "./theme";
 
 export const demoKernehed: DemoConfig = {
   authorName: "Kernehed",
@@ -8,4 +9,5 @@ export const demoKernehed: DemoConfig = {
   name: "Hem",
   lovelace: demoLovelaceKernehed,
   entities: demoEntitiesKernehed,
+  theme: demoThemeKernehed,
 };

demo/src/configs/kernehed/theme.ts

@@ -0,0 +1,50 @@
+// https://community.home-assistant.io/t/slate-a-new-dark-theme/86410
+export const demoThemeKernehed = () => ({
+  "text-primary-color": "var(--primary-text-color)",
+  "paper-item-icon-color": "var(--primary-text-color)",
+  "primary-color": "#2980b9",
+  "label-badge-red": "var(--accent-color)",
+  "paper-tabs-selection-bar-color": "green",
+  "paper-slider-knob-color": "var(--accent-color)",
+  "primary-text-color": "#FFFFFF",
+  "light-primary-color": "var(--accent-color)",
+  "primary-background-color": "#222222",
+  "sidebar-icon-color": "#777777",
+  "paper-item-selected_-_background-color": "#292929",
+  "paper-slider-active-color": "var(--accent-color)",
+  "secondary-background-color": "#222222",
+  "paper-slider-container-color":
+    "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat",
+  "paper-slider-disabled-active-color": "var(--disabled-text-color)",
+  "disabled-text-color": "#777777",
+  "paper-item-icon_-_color": "green",
+  "paper-grey-200": "#222222",
+  "label-badge-background-color": "#222222",
+  "paper-card-header-color": "var(--accent-color)",
+  "paper-listbox-background-color": "#141414",
+  "table-row-background-color": "#292929",
+  "paper-grey-50": "var(--primary-text-color)",
+  "paper-toggle-button-checked-button-color": "var(--accent-color)",
+  "paper-dialog-background-color": "#292929",
+  "secondary-text-color": "#b58e31",
+  "google-red-500": "#b58e31",
+  "divider-color": "rgba(0, 0, 0, .12)",
+  "paper-toggle-button-unchecked-ink-color": "var(--disabled-text-color)",
+  "google-green-500": "#2980b9",
+  "paper-toggle-button-unchecked-button-color": "var(--disabled-text-color)",
+  "label-badge-border-color": "green",
+  "paper-listbox-color": "#777777",
+  "paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
+  "paper-toggle-button-checked-ink-color": "var(--accent-color)",
+  "paper-card-background-color": "#292929",
+  "label-badge-text-color": "var(--primary-text-color)",
+  "paper-slider-knob-start-color": "var(--accent-color)",
+  "paper-toggle-button-unchecked-bar-color": "var(--disabled-text-color)",
+  "dark-primary-color": "var(--accent-color)",
+  "paper-slider-secondary-color": "var(--secondary-background-color)",
+  "paper-slider-pin-color": "var(--accent-color)",
+  "paper-item-icon-active-color": "#b58e31",
+  "accent-color": "#2980b9",
+  "paper-toggle-button-checked-bar-color": "var(--accent-color)",
+  "table-row-alternative-background-color": "#292929",
+});

demo/src/configs/teachingbirds/index.ts

@@ -1,6 +1,7 @@
 import { DemoConfig } from "../types";
 import { demoLovelaceTeachingbirds } from "./lovelace";
 import { demoEntitiesTeachingbirds } from "./entities";
+import { demoThemeTeachingbirds } from "./theme";
 
 export const demoTeachingbirds: DemoConfig = {
   authorName: "Isabella Gross Alström",
@@ -8,4 +9,5 @@ export const demoTeachingbirds: DemoConfig = {
   name: "Isa's mobile friendly LL",
   lovelace: demoLovelaceTeachingbirds,
   entities: demoEntitiesTeachingbirds,
+  theme: demoThemeTeachingbirds,
 };

demo/src/configs/teachingbirds/theme.ts

@@ -0,0 +1,31 @@
+export const demoThemeTeachingbirds = () => ({
+  "paper-card-header-color": "var(--paper-item-icon-color)",
+  "paper-slider-pin-color": "var(--primary-color)",
+  "paper-listbox-background-color": "#202020",
+  "paper-grey-50": "var(--primary-text-color)",
+  "paper-item-icon-color": "#d3d3d3",
+  "divider-color": "rgba(255, 255, 255, 0.12)",
+  "primary-color": "#389638",
+  "label-badge-red": "var(--primary-color)",
+  "paper-slider-secondary-color": "var(--light-primary-color)",
+  "paper-slider-knob-color": "var(--primary-color)",
+  "paper-listbox-color": "#FFFFFF",
+  "paper-toggle-button-checked-bar-color": "var(--light-primary-color)",
+  "paper-toggle-button-checked-ink-color": "var(--dark-primary-color)",
+  "paper-toggle-button-unchecked-bar-color": "var(--primary-text-color)",
+  "paper-card-background-color": "#4e4e4e",
+  "label-badge-text-color": "var(--text-primary-color)",
+  "primary-background-color": "#303030",
+  "sidebar-icon-color": "var(--paper-item-icon-color)",
+  "paper-slider-active-color": "#d8bf50",
+  "secondary-background-color": "#2b2b2b",
+  "paper-slider-knob-start-color": "var(--primary-color)",
+  "paper-item-icon-active-color": "#d8bf50",
+  "paper-toggle-button-checked-button-color": "var(--primary-color)",
+  "secondary-text-color": "#389638",
+  "disabled-text-color": "#545454",
+  "paper-item-icon_-_color": "var(--primary-text-color)",
+  "paper-grey-200": "#191919",
+  "primary-text-color": "#cfcfcf",
+  "label-badge-background-color": "var(--secondary-background-color)",
+});

demo/src/configs/types.ts

@@ -8,4 +8,5 @@ export interface DemoConfig {
   authorUrl: string;
   lovelace: () => LovelaceConfig;
   entities: () => Entity[];
+  theme: () => { [key: string]: string } | null;
 }

demo/src/ha-demo.ts

@@ -20,7 +20,12 @@ class HaDemo extends HomeAssistant {
     mockTranslations(hass);
     mockHistory(hass);
     mockShoppingList(hass);
-    selectedDemoConfig.then((conf) => hass.addEntities(conf.entities()));
+    selectedDemoConfig.then((conf) => {
+      hass.addEntities(conf.entities());
+      if (conf.theme) {
+        hass.mockTheme(conf.theme());
+      }
+    });
 
     // Taken from polymer/pwa-helpers. BSD-3 licensed
     document.body.addEventListener(

src/fake_data/demo_config.ts

@@ -11,7 +11,7 @@ export const demoConfig: HassConfig = {
     temperature: "°C",
     volume: "L",
   },
-  components: [],
+  components: ["conversation"],
   time_zone: "America/Los_Angeles",
   config_dir: "/config",
   version: "DEMO",

src/fake_data/provide_hass.ts

@@ -1,4 +1,5 @@
 import { fireEvent } from "../common/dom/fire_event";
+import applyThemesOnElement from "../common/dom/apply_themes_on_element";
 
 import { demoConfig } from "./demo_config";
 import { demoServices } from "./demo_services";
@@ -26,6 +27,7 @@ export interface MockHomeAssistant extends HomeAssistant {
   mockWS(type: string, callback: (msg: any) => any);
   mockAPI(path: string | RegExp, callback: RestCallback);
   mockEvent(event);
+  mockTheme(theme: { [key: string]: string } | null);
 }
 
 export const provideHass = (
@@ -33,6 +35,8 @@ export const provideHass = (
   overrideData: Partial<HomeAssistant> = {}
 ): MockHomeAssistant => {
   elements = ensureArray(elements);
+  // Can happen because we store sidebar, more info etc on hass.
+  const hass = (): MockHomeAssistant => elements[0].hass;
 
   const wsCommands = {};
   const restResponses: Array<[string | RegExp, RestCallback]> = [];
@@ -42,22 +46,22 @@ export const provideHass = (
   const entities = {};
 
   function updateHass(obj: Partial<MockHomeAssistant>) {
-    const hass = { ...elements[0].hass, ...obj };
+    const newHass = { ...hass(), ...obj };
     elements.forEach((el) => {
-      el.hass = hass;
+      el.hass = newHass;
     });
   }
 
   function updateStates(newStates: HassEntities) {
     updateHass({
-      states: { ...elements[0].hass.states, ...newStates },
+      states: { ...hass().states, ...newStates },
     });
   }
 
   function addEntities(newEntities, replace: boolean = false) {
     const states = {};
     ensureArray(newEntities).forEach((ent) => {
-      ent.hass = elements[0].hass;
+      ent.hass = hass();
       entities[ent.entityId] = ent;
       states[ent.entityId] = ent.toState();
     });
@@ -203,10 +207,25 @@ export const provideHass = (
     mockEvent(event) {
       (eventListeners[event] || []).forEach((fn) => fn(event));
     },
+    mockTheme(theme) {
+      updateHass({
+        selectedTheme: theme ? "mock" : "default",
+        themes: {
+          ...hass().themes,
+          themes: {
+            mock: theme as any,
+          },
+        },
+      });
+      const hassObj = hass();
+      elements.forEach((el) => {
+        applyThemesOnElement(el, hassObj.themes, hassObj.selectedTheme, true);
+      });
+    },
 
     ...overrideData,
   } as MockHomeAssistant);
 
   // @ts-ignore
-  return elements[0].hass;
+  return hass();
 };

src/types.ts

@@ -86,6 +86,7 @@ export interface HomeAssistant {
   services: HassServices;
   config: HassConfig;
   themes: Themes;
+  selectedTheme: string | null;
   panels: Panels;
   panelUrl: string;
   language: string;