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

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 { fireEvent } from "../../common/dom/fire_event";
import { import {
LeafletModuleType, LeafletModuleType,
setupLeafletMap,
replaceTileLayer, replaceTileLayer,
setupLeafletMap,
} from "../../common/dom/setup-leaflet-map"; } from "../../common/dom/setup-leaflet-map";
import { nextRender } from "../../common/util/render-status"; import { nextRender } from "../../common/util/render-status";
import { defaultRadiusColor } from "../../data/zone"; import { defaultRadiusColor } from "../../data/zone";
@ -40,6 +40,8 @@ class LocationEditor extends LitElement {
@property() public icon?: string; @property() public icon?: string;
@property({ type: Boolean }) public darkMode?: boolean;
public fitZoom = 16; public fitZoom = 16;
private _iconEl?: DivIcon; private _iconEl?: DivIcon;
@ -129,7 +131,7 @@ class LocationEditor extends LitElement {
private async _initMap(): Promise<void> { private async _initMap(): Promise<void> {
[this._leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap( [this._leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap(
this._mapEl, this._mapEl,
this.hass.themes?.darkMode, this.darkMode ?? this.hass.themes?.darkMode,
Boolean(this.radius) Boolean(this.radius)
); );
this._leafletMap.addEventListener( this._leafletMap.addEventListener(

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

@ -22,6 +22,14 @@
.header img { .header img {
margin-right: 16px; margin-right: 16px;
} }
@media (prefers-color-scheme: dark) {
body {
background-color: #111111;
color: #e1e1e1;
--primary-text-color: #e1e1e1;
--secondary-text-color: #9b9b9b;
}
}
</style> </style>
</head> </head>
<body> <body>

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

@ -23,6 +23,14 @@
.header img { .header img {
margin-right: 16px; margin-right: 16px;
} }
@media (prefers-color-scheme: dark) {
body {
background-color: #111111;
color: #e1e1e1;
--primary-text-color: #e1e1e1;
--secondary-text-color: #9b9b9b;
}
}
</style> </style>
</head> </head>
<body> <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 { import {
css, css,
CSSResult, CSSResult,
customElement,
html, html,
LitElement, LitElement,
property, property,
customElement,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit-element"; } from "lit-element";
import { listenMediaQuery } from "../common/dom/media_query";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import { listenMediaQuery } from "../common/dom/media_query";
import { toggleAttribute } from "../common/dom/toggle_attribute"; import { toggleAttribute } from "../common/dom/toggle_attribute";
import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer"; import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
import type { HomeAssistant, Route } from "../types"; import type { HomeAssistant, Route } from "../types";
@ -49,7 +49,15 @@ class HomeAssistantMain extends LitElement {
const disableSwipe = const disableSwipe =
!sidebarNarrow || NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1; !sidebarNarrow || NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1;
// Style block in render because of the mixin that is not supported
return html` return html`
<style>
app-drawer {
--app-drawer-content-container: {
background-color: var(--primary-background-color, #fff);
}
}
</style>
<app-drawer-layout <app-drawer-layout
fullbleed fullbleed
.forceNarrow=${sidebarNarrow} .forceNarrow=${sidebarNarrow}

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

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