From 47e9531972d9feaa2642ec3e204c3ce74059745b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= Date: Mon, 24 Aug 2020 18:29:16 +0200 Subject: [PATCH] Use media query for darkmode on login and onboarding (#6625) Co-authored-by: Bram Kragten --- src/components/map/ha-location-editor.ts | 6 ++++-- src/html/authorize.html.template | 8 ++++++++ src/html/onboarding.html.template | 8 ++++++++ src/layouts/home-assistant-main.ts | 12 ++++++++++-- src/onboarding/onboarding-core-config.ts | 4 +++- src/translations/en.json | 1 + 6 files changed, 34 insertions(+), 5 deletions(-) diff --git a/src/components/map/ha-location-editor.ts b/src/components/map/ha-location-editor.ts index a1775f1a58..9bfcf5e50e 100644 --- a/src/components/map/ha-location-editor.ts +++ b/src/components/map/ha-location-editor.ts @@ -21,8 +21,8 @@ import { import { fireEvent } from "../../common/dom/fire_event"; import { LeafletModuleType, - setupLeafletMap, replaceTileLayer, + setupLeafletMap, } from "../../common/dom/setup-leaflet-map"; import { nextRender } from "../../common/util/render-status"; import { defaultRadiusColor } from "../../data/zone"; @@ -40,6 +40,8 @@ class LocationEditor extends LitElement { @property() public icon?: string; + @property({ type: Boolean }) public darkMode?: boolean; + public fitZoom = 16; private _iconEl?: DivIcon; @@ -129,7 +131,7 @@ class LocationEditor extends LitElement { private async _initMap(): Promise { [this._leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap( this._mapEl, - this.hass.themes?.darkMode, + this.darkMode ?? this.hass.themes?.darkMode, Boolean(this.radius) ); this._leafletMap.addEventListener( diff --git a/src/html/authorize.html.template b/src/html/authorize.html.template index 62b1fdf87b..46bca88dd4 100644 --- a/src/html/authorize.html.template +++ b/src/html/authorize.html.template @@ -22,6 +22,14 @@ .header img { margin-right: 16px; } + @media (prefers-color-scheme: dark) { + body { + background-color: #111111; + color: #e1e1e1; + --primary-text-color: #e1e1e1; + --secondary-text-color: #9b9b9b; + } + } diff --git a/src/html/onboarding.html.template b/src/html/onboarding.html.template index 126f67ab71..cf95d09362 100644 --- a/src/html/onboarding.html.template +++ b/src/html/onboarding.html.template @@ -23,6 +23,14 @@ .header img { margin-right: 16px; } + @media (prefers-color-scheme: dark) { + body { + background-color: #111111; + color: #e1e1e1; + --primary-text-color: #e1e1e1; + --secondary-text-color: #9b9b9b; + } + } diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts index 94fdef2fc0..31609dbdc5 100644 --- a/src/layouts/home-assistant-main.ts +++ b/src/layouts/home-assistant-main.ts @@ -5,15 +5,15 @@ import type { AppDrawerElement } from "@polymer/app-layout/app-drawer/app-drawer import { css, CSSResult, + customElement, html, LitElement, property, - customElement, PropertyValues, TemplateResult, } from "lit-element"; -import { listenMediaQuery } from "../common/dom/media_query"; import { fireEvent } from "../common/dom/fire_event"; +import { listenMediaQuery } from "../common/dom/media_query"; import { toggleAttribute } from "../common/dom/toggle_attribute"; import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer"; import type { HomeAssistant, Route } from "../types"; @@ -49,7 +49,15 @@ class HomeAssistantMain extends LitElement { const disableSwipe = !sidebarNarrow || NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1; + // Style block in render because of the mixin that is not supported return html` + diff --git a/src/translations/en.json b/src/translations/en.json index edb42ed2fe..e18f1ec129 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2620,6 +2620,7 @@ "intro": "Hello {name}, welcome to Home Assistant. How would you like to name your home?", "intro_location": "We would like to know where you live. This information will help with displaying information and setting up sun-based automations. This data is never shared outside of your network.", "intro_location_detect": "We can help you fill in this information by making a one-time request to an external service.", + "location_name": "Name of your Home Assistant installation", "location_name_default": "Home", "button_detect": "Detect", "finish": "Next"