jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Show users theme even if browser theme is active

Browse Source
This commit is contained in:
Wendelin 2025-02-13 14:46:38 +01:00
parent c6617718b7
commit c824e58e0a
No known key found for this signature in database
4 changed files with 140 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
src/panels/profile/ha-pick-theme-row.ts
View File

@ -1,11 +1,14 @@
import "@material/mwc-button/mwc-button"; import { mdiAlertCircleOutline } from "@mdi/js";
import "@material/mwc-list/mwc-list-item";
import type { PropertyValues, TemplateResult } from "lit"; import type { PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-formfield"; import "../../components/ha-formfield";
import "../../components/ha-radio"; import "../../components/ha-radio";
import "../../components/ha-button";
import "../../components/ha-circular-progress";
import "../../components/ha-svg-icon";
import "../../components/ha-list-item";
import type { HaRadio } from "../../components/ha-radio"; import type { HaRadio } from "../../components/ha-radio";
import "../../components/ha-select"; import "../../components/ha-select";
import "../../components/ha-settings-row"; import "../../components/ha-settings-row";
@ -14,9 +17,10 @@ import {
DEFAULT_ACCENT_COLOR, DEFAULT_ACCENT_COLOR,
DEFAULT_PRIMARY_COLOR, DEFAULT_PRIMARY_COLOR,
} from "../../resources/styles-data"; } from "../../resources/styles-data";
import type { HomeAssistant } from "../../types"; import type { HomeAssistant, ThemeSettings } from "../../types";
import { documentationUrl } from "../../util/documentation-url"; import { documentationUrl } from "../../util/documentation-url";
import type { StorageLocation } from "../../state/themes-mixin"; import type { StorageLocation } from "../../state/themes-mixin";
import { subscribeSelectedTheme } from "../../data/ws-themes";
const USE_DEFAULT_THEME = "__USE_DEFAULT_THEME__"; const USE_DEFAULT_THEME = "__USE_DEFAULT_THEME__";
const HOME_ASSISTANT_THEME = "default"; const HOME_ASSISTANT_THEME = "default";
@ -32,55 +36,73 @@ export class HaPickThemeRow extends LitElement {
@state() _themeNames: string[] = []; @state() _themeNames: string[] = [];
@state() private _selectedTheme?: ThemeSettings;
@state() private _loading = false;
protected render(): TemplateResult { protected render(): TemplateResult {
if (this._loading) {
return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
}
const hasThemes = const hasThemes =
this.hass.themes.themes && Object.keys(this.hass.themes.themes).length; this.hass.themes.themes && Object.keys(this.hass.themes.themes).length;
const curThemeIsUseDefault = this.hass.selectedTheme?.theme === ""; const curThemeIsUseDefault = this._selectedTheme?.theme === "";
const curTheme = this.hass.selectedTheme?.theme const curTheme = this._selectedTheme?.theme
? this.hass.selectedTheme?.theme ? this._selectedTheme?.theme
: this.hass.themes.darkMode : this._selectedTheme?.dark
? this.hass.themes.default_dark_theme || this.hass.themes.default_theme ? this.hass.themes.default_dark_theme || this.hass.themes.default_theme
: this.hass.themes.default_theme; : this.hass.themes.default_theme;
const themeSettings = this.hass.selectedTheme;
return html` return html`
<ha-settings-row .narrow=${this.narrow}> <ha-settings-row .narrow=${this.narrow}>
<span slot="heading" <span slot="heading"
>${this.hass.localize("ui.panel.profile.themes.header")}</span >${this.hass.localize("ui.panel.profile.themes.header")}</span
> >
<span slot="description"> <span
${!hasThemes slot="description"
class=${this.storageLocation === "user" &&
this.hass.browserThemeEnabled
? "device-info"
: ""}
>
${!hasThemes &&
!(this.storageLocation === "user" && this.hass.browserThemeEnabled)
? this.hass.localize("ui.panel.profile.themes.error_no_theme") ? this.hass.localize("ui.panel.profile.themes.error_no_theme")
: ""} : ""}
<a ${this.storageLocation === "user" && this.hass.browserThemeEnabled
href=${documentationUrl( ? html`<ha-svg-icon .path=${mdiAlertCircleOutline}></ha-svg-icon>
this.hass, ${this.hass.localize(
"/integrations/frontend/#defining-themes" "ui.panel.profile.themes.device.user_theme_info"
)} )}`
target="_blank" : html`<a
rel="noreferrer" href=${documentationUrl(
> this.hass,
${this.hass.localize("ui.panel.profile.themes.link_promo")} "/integrations/frontend/#defining-themes"
</a> )}
target="_blank"
rel="noreferrer"
>
${this.hass.localize("ui.panel.profile.themes.link_promo")}
</a>`}
</span> </span>
<ha-select <ha-select
.label=${this.hass.localize("ui.panel.profile.themes.dropdown_label")} .label=${this.hass.localize("ui.panel.profile.themes.dropdown_label")}
.disabled=${!hasThemes} .disabled=${!hasThemes}
.value=${this.hass.selectedTheme?.theme || USE_DEFAULT_THEME} .value=${this._selectedTheme?.theme || USE_DEFAULT_THEME}
@selected=${this._handleThemeSelection} @selected=${this._handleThemeSelection}
naturalMenuWidth naturalMenuWidth
> >
<mwc-list-item .value=${USE_DEFAULT_THEME}> <ha-list-item .value=${USE_DEFAULT_THEME}>
${this.hass.localize("ui.panel.profile.themes.use_default")} ${this.hass.localize("ui.panel.profile.themes.use_default")}
</mwc-list-item> </ha-list-item>
<mwc-list-item .value=${HOME_ASSISTANT_THEME}> <ha-list-item .value=${HOME_ASSISTANT_THEME}>
Home Assistant Home Assistant
</mwc-list-item> </ha-list-item>
${this._themeNames.map( ${this._themeNames.map(
(theme) => html` (theme) => html`
<mwc-list-item .value=${theme}>${theme}</mwc-list-item> <ha-list-item .value=${theme}>${theme}</ha-list-item>
` `
)} )}
</ha-select> </ha-select>
@ -90,7 +112,7 @@ export class HaPickThemeRow extends LitElement {
this.hass.themes.default_dark_theme && this.hass.themes.default_dark_theme &&
this.hass.themes.default_theme) || this.hass.themes.default_theme) ||
this._supportsModeSelection(curTheme) this._supportsModeSelection(curTheme)
? html` <div class="inputs"> ? html`<div class="inputs">
<ha-formfield <ha-formfield
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.profile.themes.dark_mode.auto" "ui.panel.profile.themes.dark_mode.auto"
@ -100,7 +122,7 @@ export class HaPickThemeRow extends LitElement {
@change=${this._handleDarkMode} @change=${this._handleDarkMode}
name="dark_mode" name="dark_mode"
value="auto" value="auto"
.checked=${themeSettings?.dark === undefined} .checked=${this._selectedTheme?.dark === undefined}
></ha-radio> ></ha-radio>
</ha-formfield> </ha-formfield>
<ha-formfield <ha-formfield
@ -112,7 +134,7 @@ export class HaPickThemeRow extends LitElement {
@change=${this._handleDarkMode} @change=${this._handleDarkMode}
name="dark_mode" name="dark_mode"
value="light" value="light"
.checked=${themeSettings?.dark === false} .checked=${this._selectedTheme?.dark === false}
> >
</ha-radio> </ha-radio>
</ha-formfield> </ha-formfield>
@ -125,14 +147,14 @@ export class HaPickThemeRow extends LitElement {
@change=${this._handleDarkMode} @change=${this._handleDarkMode}
name="dark_mode" name="dark_mode"
value="dark" value="dark"
.checked=${themeSettings?.dark === true} .checked=${this._selectedTheme?.dark === true}
> >
</ha-radio> </ha-radio>
</ha-formfield> </ha-formfield>
${curTheme === HOME_ASSISTANT_THEME ${curTheme === HOME_ASSISTANT_THEME
? html`<div class="color-pickers"> ? html`<div class="color-pickers">
<ha-textfield <ha-textfield
.value=${themeSettings?.primaryColor || .value=${this._selectedTheme?.primaryColor ||
DEFAULT_PRIMARY_COLOR} DEFAULT_PRIMARY_COLOR}
type="color" type="color"
.label=${this.hass.localize( .label=${this.hass.localize(
@ -142,7 +164,8 @@ export class HaPickThemeRow extends LitElement {
@change=${this._handleColorChange} @change=${this._handleColorChange}
></ha-textfield> ></ha-textfield>
<ha-textfield <ha-textfield
.value=${themeSettings?.accentColor || DEFAULT_ACCENT_COLOR} .value=${this._selectedTheme?.accentColor ||
DEFAULT_ACCENT_COLOR}
type="color" type="color"
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.profile.themes.accent_color" "ui.panel.profile.themes.accent_color"
@ -150,19 +173,36 @@ export class HaPickThemeRow extends LitElement {
.name=${"accentColor"} .name=${"accentColor"}
@change=${this._handleColorChange} @change=${this._handleColorChange}
></ha-textfield> ></ha-textfield>
${themeSettings?.primaryColor || themeSettings?.accentColor ${this._selectedTheme?.primaryColor ||
? html` <mwc-button @click=${this._resetColors}> this._selectedTheme?.accentColor
? html`<ha-button @click=${this._resetColors}>
${this.hass.localize("ui.panel.profile.themes.reset")} ${this.hass.localize("ui.panel.profile.themes.reset")}
</mwc-button>` </ha-button>`
: ""} : nothing}
</div>` </div>`
: ""} : nothing}
</div>` </div>`
: ""} : nothing}
`; `;
} }
public willUpdate(changedProperties: PropertyValues) { public willUpdate(changedProperties: PropertyValues) {
if (!this.hasUpdated) {
if (this.storageLocation === "browser") {
this._selectedTheme = this.hass.selectedTheme ?? undefined;
} else {
this._loading = true;
this._selectedTheme = undefined;
subscribeSelectedTheme(
this.hass,
(selectedTheme?: ThemeSettings | null) => {
this._selectedTheme = selectedTheme ?? undefined;
this._loading = false;
}
);
}
}
const oldHass = changedProperties.get("hass") as undefined | HomeAssistant; const oldHass = changedProperties.get("hass") as undefined | HomeAssistant;
const themesChanged = const themesChanged =
changedProperties.has("hass") && changedProperties.has("hass") &&
@ -173,21 +213,36 @@ export class HaPickThemeRow extends LitElement {
} }
} }
private _handleColorChange(ev: CustomEvent) { private _shouldSaveHass() {
const target = ev.target as any; return (
this.storageLocation === "browser" ||
(this.storageLocation === "user" && !this.hass.browserThemeEnabled)
);
}
private _updateSelectedTheme(updatedTheme: Partial<ThemeSettings>) {
this._selectedTheme = {
...this._selectedTheme,
...updatedTheme,
theme: updatedTheme.theme ?? this._selectedTheme?.theme ?? "",
};
fireEvent(this, "settheme", { fireEvent(this, "settheme", {
settings: { [target.name]: target.value }, settings: this._selectedTheme,
storageLocation: this.storageLocation, storageLocation: this.storageLocation,
saveHass: this._shouldSaveHass(),
}); });
} }
private _handleColorChange(ev: CustomEvent) {
const target = ev.target as any;
this._updateSelectedTheme({ [target.name]: target.value });
}
private _resetColors() { private _resetColors() {
fireEvent(this, "settheme", { this._updateSelectedTheme({
settings: { primaryColor: undefined,
primaryColor: undefined, accentColor: undefined,
accentColor: undefined,
},
storageLocation: this.storageLocation,
}); });
} }
@ -208,38 +263,29 @@ export class HaPickThemeRow extends LitElement {
dark = true; dark = true;
break; break;
} }
fireEvent(this, "settheme", { this._updateSelectedTheme({ dark });
settings: { dark },
storageLocation: this.storageLocation,
});
} }
private _handleThemeSelection(ev) { private _handleThemeSelection(ev) {
const theme = ev.target.value; const theme = ev.target.value;
if (theme === this.hass.selectedTheme?.theme) { if (theme === this._selectedTheme?.theme) {
return; return;
} }
if (theme === USE_DEFAULT_THEME) { if (theme === USE_DEFAULT_THEME) {
if (this.hass.selectedTheme?.theme) { if (this.hass.selectedTheme?.theme) {
fireEvent(this, "settheme", { this._updateSelectedTheme({
settings: { theme: "",
theme: "", primaryColor: undefined,
primaryColor: undefined, accentColor: undefined,
accentColor: undefined,
},
storageLocation: this.storageLocation,
}); });
} }
return; return;
} }
fireEvent(this, "settheme", { this._updateSelectedTheme({
settings: { theme,
theme, primaryColor: undefined,
primaryColor: undefined, accentColor: undefined,
accentColor: undefined,
},
storageLocation: this.storageLocation,
}); });
} }
@ -268,6 +314,12 @@ export class HaPickThemeRow extends LitElement {
flex-grow: 1; flex-grow: 1;
margin: 0 4px; margin: 0 4px;
} }
.device-info {
color: var(--warning-color);
display: flex;
align-items: center;
gap: 8px;
}
`; `;
} }

34
src/panels/profile/ha-profile-section-general.ts
View File

@ -1,4 +1,3 @@
import { mdiAlertCircleOutline } from "@mdi/js";
import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { CSSResultGroup, TemplateResult } from "lit"; import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
@ -8,7 +7,6 @@ import "../../components/ha-card";
import "../../components/ha-button"; import "../../components/ha-button";
import "../../components/ha-expansion-panel"; import "../../components/ha-expansion-panel";
import "../../components/ha-switch"; import "../../components/ha-switch";
import "../../components/ha-svg-icon";
import "../../layouts/hass-tabs-subpage"; import "../../layouts/hass-tabs-subpage";
import { profileSections } from "./ha-panel-profile"; import { profileSections } from "./ha-panel-profile";
import { isExternal } from "../../data/external"; import { isExternal } from "../../data/external";
@ -135,26 +133,12 @@ class HaProfileSectionGeneral extends LitElement {
.narrow=${this.narrow} .narrow=${this.narrow}
.hass=${this.hass} .hass=${this.hass}
></ha-pick-first-weekday-row> ></ha-pick-first-weekday-row>
${this.hass.browserThemeEnabled || this._browserThemeActivated <ha-pick-theme-row
? html` .narrow=${this.narrow}
<ha-settings-row .narrow=${this.narrow}> .hass=${this.hass}
<span slot="heading"> this._browserThemeActivated}
${this.hass.localize("ui.panel.profile.themes.header")} .storageLocation=${"user"}
</span> ></ha-pick-theme-row>
<span class="theme-warning" slot="description">
<ha-svg-icon .path=${mdiAlertCircleOutline}></ha-svg-icon>
${this.hass.localize(
"ui.panel.profile.themes.device.user_theme_info"
)}
</span>
</ha-settings-row>
`
: html`<ha-pick-theme-row
.narrow=${this.narrow}
.hass=${this.hass}
this._browserThemeActivated}
.storageLocation=${"user"}
></ha-pick-theme-row>`}
${this.hass.user!.is_admin ${this.hass.user!.is_admin
? html` ? html`
<ha-advanced-mode-row <ha-advanced-mode-row
@ -347,12 +331,6 @@ class HaProfileSectionGeneral extends LitElement {
ha-expansion-panel { ha-expansion-panel {
margin: 0 8px 8px; margin: 0 8px 8px;
} }
.theme-warning {
color: var(--warning-color);
display: flex;
align-items: center;
gap: 8px;
}
.device-theme { .device-theme {
display: block; display: block;
padding-bottom: 16px; padding-bottom: 16px;

25
src/state/themes-mixin.ts
View File

@ -17,8 +17,9 @@ import type { HassBaseEl } from "./hass-base-mixin";
export type StorageLocation = "user" | "browser"; export type StorageLocation = "user" | "browser";
interface SetThemeSettings { interface SetThemeSettings {
settings: Partial<HomeAssistant["selectedTheme"]>; settings: ThemeSettings;
storageLocation: StorageLocation; storageLocation: StorageLocation;
saveHass: boolean;
} }
declare global { declare global {
@ -45,21 +46,21 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
protected firstUpdated(changedProps) { protected firstUpdated(changedProps) {
super.firstUpdated(changedProps); super.firstUpdated(changedProps);
this.addEventListener("settheme", (ev) => { this.addEventListener("settheme", (ev) => {
const selectedTheme = { if (ev.detail.saveHass) {
...this.hass!.selectedTheme!, this._updateHass({
...ev.detail.settings, selectedTheme: ev.detail.settings,
}; browserThemeEnabled: ev.detail.storageLocation === "browser",
this._updateHass({ });
selectedTheme, this._applyTheme(mql.matches);
browserThemeEnabled: ev.detail.storageLocation === "browser", }
});
this._applyTheme(mql.matches);
if (ev.detail.storageLocation === "browser") { if (ev.detail.storageLocation === "browser") {
storeState(this.hass!); storeState(this.hass!);
} else { } else {
clearStateKey(SELECTED_THEME_KEY); if (ev.detail.saveHass) {
saveSelectedTheme(this.hass!, selectedTheme); clearStateKey(SELECTED_THEME_KEY);
}
saveSelectedTheme(this.hass!, ev.detail.settings);
} }
}); });

2
src/translations/en.json
View File

@ -7583,7 +7583,7 @@
"description": "Overwrite user theme with custom device settings", "description": "Overwrite user theme with custom device settings",
"delete_header": "Delete device theme", "delete_header": "Delete device theme",
"delete_description": "Are you sure you want to delete the device specific theme?", "delete_description": "Are you sure you want to delete the device specific theme?",
"user_theme_info": "Device theme is active. Delete it to edit the user theme." "user_theme_info": "Device theme is active. You won't see changes on user theme settings."
} }
}, },
"dashboard": { "dashboard": {