mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-08 18:06:36 +00:00
Add themes to demos (#2518)
This commit is contained in:
parent
26dbef8d4c
commit
5276db5d23
@ -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());
|
||||
};
|
||||
|
@ -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",
|
||||
|
@ -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,
|
||||
};
|
||||
|
48
demo/src/configs/jimpower/theme.ts
Normal file
48
demo/src/configs/jimpower/theme.ts
Normal file
@ -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",
|
||||
});
|
@ -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,
|
||||
};
|
||||
|
50
demo/src/configs/kernehed/theme.ts
Normal file
50
demo/src/configs/kernehed/theme.ts
Normal file
@ -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",
|
||||
});
|
@ -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,
|
||||
};
|
||||
|
31
demo/src/configs/teachingbirds/theme.ts
Normal file
31
demo/src/configs/teachingbirds/theme.ts
Normal file
@ -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)",
|
||||
});
|
@ -8,4 +8,5 @@ export interface DemoConfig {
|
||||
authorUrl: string;
|
||||
lovelace: () => LovelaceConfig;
|
||||
entities: () => Entity[];
|
||||
theme: () => { [key: string]: string } | null;
|
||||
}
|
||||
|
@ -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(
|
||||
|
@ -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",
|
||||
|
@ -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();
|
||||
};
|
||||
|
@ -86,6 +86,7 @@ export interface HomeAssistant {
|
||||
services: HassServices;
|
||||
config: HassConfig;
|
||||
themes: Themes;
|
||||
selectedTheme: string | null;
|
||||
panels: Panels;
|
||||
panelUrl: string;
|
||||
language: string;
|
||||
|
Loading…
x
Reference in New Issue
Block a user