diff --git a/demo/src/configs/demo-configs.ts b/demo/src/configs/demo-configs.ts index 8544e5488b..143c237085 100644 --- a/demo/src/configs/demo-configs.ts +++ b/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()); }; diff --git a/demo/src/configs/jimpower/entities.ts b/demo/src/configs/jimpower/entities.ts index b6581272d9..81849c8ca4 100644 --- a/demo/src/configs/jimpower/entities.ts +++ b/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", diff --git a/demo/src/configs/jimpower/index.ts b/demo/src/configs/jimpower/index.ts index 6f2b24fc88..c035b22fca 100644 --- a/demo/src/configs/jimpower/index.ts +++ b/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, }; diff --git a/demo/src/configs/jimpower/theme.ts b/demo/src/configs/jimpower/theme.ts new file mode 100644 index 0000000000..091c472135 --- /dev/null +++ b/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", +}); diff --git a/demo/src/configs/kernehed/index.ts b/demo/src/configs/kernehed/index.ts index 18d88d255a..6c20f83800 100644 --- a/demo/src/configs/kernehed/index.ts +++ b/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, }; diff --git a/demo/src/configs/kernehed/theme.ts b/demo/src/configs/kernehed/theme.ts new file mode 100644 index 0000000000..a4efa29f40 --- /dev/null +++ b/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", +}); diff --git a/demo/src/configs/teachingbirds/index.ts b/demo/src/configs/teachingbirds/index.ts index d8efb67d8d..380ab6716f 100644 --- a/demo/src/configs/teachingbirds/index.ts +++ b/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, }; diff --git a/demo/src/configs/teachingbirds/theme.ts b/demo/src/configs/teachingbirds/theme.ts new file mode 100644 index 0000000000..2bcc194c96 --- /dev/null +++ b/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)", +}); diff --git a/demo/src/configs/types.ts b/demo/src/configs/types.ts index 77ca703301..e637c00e01 100644 --- a/demo/src/configs/types.ts +++ b/demo/src/configs/types.ts @@ -8,4 +8,5 @@ export interface DemoConfig { authorUrl: string; lovelace: () => LovelaceConfig; entities: () => Entity[]; + theme: () => { [key: string]: string } | null; } diff --git a/demo/src/ha-demo.ts b/demo/src/ha-demo.ts index 9ea038f1e4..e1992c95e3 100644 --- a/demo/src/ha-demo.ts +++ b/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( diff --git a/src/fake_data/demo_config.ts b/src/fake_data/demo_config.ts index 9977d3c0ce..2743032ec9 100644 --- a/src/fake_data/demo_config.ts +++ b/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", diff --git a/src/fake_data/provide_hass.ts b/src/fake_data/provide_hass.ts index 0ba592ed3c..f1fb42b133 100644 --- a/src/fake_data/provide_hass.ts +++ b/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 = {} ): 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) { - 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(); }; diff --git a/src/types.ts b/src/types.ts index f9edcc9a10..7b7a174f47 100644 --- a/src/types.ts +++ b/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;