jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use media query for darkmode on login and onboarding (#6625)

Browse Source 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Joakim Sørensen 2020-08-24 18:29:16 +02:00 committed by GitHub
parent 3ba31483f4
commit 47e9531972
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/map/ha-location-editor.ts
View File

@ -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<void> {
[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(

8
src/html/authorize.html.template
View File

@ -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;
}
}
</style>
</head>
<body>

8
src/html/onboarding.html.template
View File

@ -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;
}
}
</style>
</head>
<body>

12
src/layouts/home-assistant-main.ts
View File

@ -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`
<style>
app-drawer {
--app-drawer-content-container: {
background-color: var(--primary-background-color, #fff);
}
}
</style>
<app-drawer-layout
fullbleed
.forceNarrow=${sidebarNarrow}

4
src/onboarding/onboarding-core-config.ts
View File

@ -8,9 +8,9 @@ import {
CSSResult,
customElement,
html,
internalProperty,
LitElement,
property,
internalProperty,
TemplateResult,
} from "lit-element";
import { fireEvent } from "../common/dom/fire_event";
@ -27,6 +27,7 @@ import type { PolymerChangedEvent } from "../polymer-types";
import type { HomeAssistant } from "../types";
const amsterdam = [52.3731339, 4.8903147];
const mql = matchMedia("(prefers-color-scheme: dark)");
@customElement("onboarding-core-config")
class OnboardingCoreConfig extends LitElement {
@ -93,6 +94,7 @@ class OnboardingCoreConfig extends LitElement {
.hass=${this.hass}
.location=${this._locationValue}
.fitZoom=${14}
.darkMode=${mql.matches}
@change=${this._locationChanged}
></ha-location-editor>
</div>

1
src/translations/en.json
View File

@ -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"