style: add dark mode 💄

package.json

@@ -36,7 +36,9 @@
     "@material/mwc-dialog": "^0.27.0",
     "@material/mwc-fab": "^0.27.0",
     "@material/mwc-formfield": "^0.27.0",
+    "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
+    "@material/mwc-linear-progress": "^0.27.0",
     "@material/mwc-list": "^0.27.0",
     "@material/mwc-menu": "^0.27.0",
     "@material/mwc-radio": "^0.27.0",

raw_package/static/css/esphome-2.css

@@ -4,7 +4,8 @@
   /* Colors */
   --primary-bg-color: #fafafa;
   --primary-footer-bg-color: #212121;
-  --card-background-color: #fafafa;
+  --disabled-text-color: #bdbdbd;
+  --card-background-color: #ffffff;
   --alert-standard-color: #666666;
   --alert-standard-color-bg: #e6e6e6;
   --alert-info-color: #00539f;
@@ -17,6 +18,7 @@
   --alert-error-color-bg: #faefeb;
   --mdc-theme-primary: #03a9f4;
   --primary-text-color: #212121;
+  --secondary-text-color: #727272;
   --mdc-dialog-z-index: 998;
   --mdc-theme-primary-no-attention: #444444;
   --mdc-theme-on-primary-no-attention: white;
@@ -28,16 +30,25 @@
   --status-connected: #444444;
   --status-new: #ffa500;
   --status-imported: #4caf50;
+  --divider-color: #e8e8e8;
+  --invert-logo: 0;
+  --divider-color: #e8e8e8;
+  --invert-logo: 0;
+  --mdc-shape-medium: 12px;
+  --mdc-shape-small: 6px;
+  --mdc-theme-primary: #03a9f4;
 }
 
 /* dark theme */
 @media (prefers-color-scheme: dark) {
   :root {
-    --primary-bg-color: #000000;
+    --primary-bg-color: #282828;
     --primary-text-color: #e1e1e1;
+    --secondary-text-color: #727272;
+    --disabled-text-color: #bdbdbd;
     --primary-footer-bg-color: #101e24;
-    --esphome-background-header: #282828;
-    --card-background-color: #282828;
+    --esphome-background-header: #e0e0e0;
+    --card-background-color: #000000;
     --card-text-color: #e1e1e1;
     --primary-text-color: #e1e1e1;
     --mdc-theme-surface: #282828;
@@ -55,10 +66,12 @@
     --update-available-color: #5f7eeb;
     --status-connected: #cecece;
     --mdc-ripple-color: #bebebe;
+    --divider-color: #3d3d3d;
+    --invert-logo: 1;
   }
 
   .esphome-header img {
-    filter: invert(1);
+    filter: invert(var(--invert-logo));
   }
 }
 
@@ -67,8 +80,8 @@ html {
   line-height: 1.5;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
+    sans-serif;
 }
 
 body {
@@ -97,12 +110,22 @@ esphome-main {
   top: 0;
   right: 0;
   left: 0;
+  height: 55px;
+  background: var(--card-background-color);
+  border: rgba(0, 0, 0, 0.12) 1px solid;
+  /* padding: 0 96px; */
   display: flex;
   align-items: center;
-  height: 56px;
-  background-color: var(--esphome-background-header);
+}
+
+.header-container {
   color: var(--primary-text-color);
-  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  margin: auto;
+  width: 90%;
+  max-width: 1920px;
+  justify-content: stretch;
   z-index: 1;
 }
 
@@ -112,7 +135,7 @@ esphome-main {
 
 .esphome-header img {
   width: auto;
-  height: 48px;
+  height: 32px;
 }
 
 #js-loading-indicator {
@@ -136,8 +159,7 @@ esphome-main {
   font-size: 85%;
   background-color: rgba(27, 31, 35, 0.05);
   border-radius: 3px;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
-    monospace;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
 }
 
 ul.browser-default {
@@ -168,19 +190,21 @@ ul.browser-default li {
 .page-footer {
   display: flex;
   align-items: center;
-  min-height: 50px;
-  color: grey;
-  background-color: var(--primary-footer-bg-color);
+  margin: auto;
+  width: 90%;
+  max-width: 1920px;
+  justify-content: stretch;
+  height: 100px;
+  color: var(--disabled-text-color);
 }
 
 .page-footer a {
-  color: #afafaf;
+  color: var(--mdc-theme-primary);
+  transition: color 0.2s ease-in-out;
 }
 
-@media only screen and (min-width: 993px) {
-  .page-footer {
-    padding-left: 10%;
-  }
+.page-footer a:hover {
+  color: var(--mdc-theme-primary);
 }
 
 @media only screen and (max-width: 992px) {
@@ -195,7 +219,7 @@ ul.browser-default li {
     margin-top: 52px;
   }
   .page-footer {
-    padding-bottom: 72px; /* allow reading footer while fab hovers */
+    padding-bottom: 168px; /* allow reading footer while fab hovers */
     box-sizing: border-box;
     justify-content: center;
   }

src/components/esphome-card.ts

@@ -10,10 +10,9 @@ export class ESPHomeCard extends LitElement {
 
   static styles = css`
     :host {
-      background: var(--card-background-color, white);
-      border-radius: 2px;
-      box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%),
-        0 1px 5px 0 rgb(0 0 0 / 20%);
+      background: var(--card-background-color);
+      border-radius: 12px;
+      border: var(--status-color) /* rgba(0, 0, 0, 0.12) */ 1px solid;
       color: var(--primary-text-color);
       display: block;
       position: relative;
@@ -45,37 +44,19 @@ export class ESPHomeCard extends LitElement {
       padding: 5px 16px;
     }
 
-    .status-bar {
-      display: block;
-      background-color: var(--status-color);
-      color: var(--status-color);
-      position: absolute;
-      height: 4px;
-      left: 0;
-      right: 0;
-      top: 0;
-      border-top-left-radius: 2px;
-      border-top-right-radius: 2px;
-      transition: all 0.2s ease-in-out;
+    :host(.highlight) {
+      animation: highlight 0.5s alternate infinite ease-in;
     }
-    .status-bar::after {
-      display: block;
+
+    .card-status-text {
       position: absolute;
-      right: 2px;
-      top: 3px;
-      font-weight: bold;
+      top: 16px;
+      right: 16px;
       font-size: 12px;
-      content: attr(data-status);
-    }
-    :host([no-status-bar]) .status-bar {
-      height: 0px;
-    }
-    :host([no-status-bar]) .status-bar::after {
-      top: -1px;
-    }
-
-    :host(.highlight) {
-      animation: highlight 0.5s alternate infinite ease-in;
+      line-height: 16px;
+      color: var(--status-color);
+      font-weight: bold;
+      text-transform: uppercase;
     }
 
     @keyframes highlight {
@@ -96,8 +77,14 @@ export class ESPHomeCard extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      ${this.status
-        ? html`<div class="status-bar" data-status=${this.status}></div>`
+      ${this?.status !== undefined
+        ? html`
+            <div class="card-status-text">
+              ${this.status !== "ONLINE" && this.status !== undefined
+                ? this.status
+                : ""}
+            </div>
+          `
         : ""}
       <slot></slot>
     `;

src/components/esphome-fab.ts

@@ -6,27 +6,42 @@ import { openWizardDialog } from "../wizard";
 @customElement("esphome-fab")
 export class ESPHomeFab extends LitElement {
   protected override render(): TemplateResult {
-    return html`
+    return html` <div class="fab-container">
       <mwc-fab
         extended
         icon="add"
         label="New device"
         @click=${this._handleClick}
       ></mwc-fab>
-    `;
+    </div>`;
   }
 
   private _handleClick() {
     openWizardDialog();
   }
 
   static styles = css`
+    .fab-container {
+      position: absolute;
+      bottom: 50px;
+      right: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      margin: auto;
+      width: 90%;
+      height: 100px;
+      max-width: 1920px;
+      justify-content: stretch;
+      pointer-events: none;
+    }
+
     mwc-fab {
-      position: fixed;
-      right: 23px;
-      bottom: 23px;
+      position: absolute;
+      right: 0;
+      bottom: 0;
       z-index: 997;
-      --mdc-theme-secondary: var(--alert-success-color);
+      --mdc-theme-secondary: #03a9f4;
     }
   `;
 }