report(redesign): dark theme

lighthouse-core/report/html/report-styles.css

@@ -19,6 +19,7 @@
   --text-font-family: Roboto, Helvetica, Arial, sans-serif;
   --monospace-font-family: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
   --body-background-color: #fff;
+  --body-text-color: var(--color-black-900);
   --body-font-size: 16px;
   --body-line-height: 24px;
   --subheader-font-size: 14px;
@@ -39,9 +40,9 @@
   --audit-indent: 16px;
   --text-indent: 8px;
   --expandable-indent: 20px;
-  --secondary-text-color: #565656;
+  --secondary-text-color: var(--color-black-800);
   /*--accent-color: #3879d9;*/
-  --informative-color: #0c50c7;
+  --informative-color: var(--color-blue-900);
   --medium-75-gray: #757575;
   --medium-50-gray: hsl(210, 17%, 98%);
   --medium-100-gray: hsl(200, 12%, 95%);
@@ -92,6 +93,9 @@
   --color-red-700: #EB0F00;
   --color-red: #FF4E42;
   --color-white: #FFFFFF;
+  --color-blue-200: #90CAF9;
+  --color-blue-900: #0D47A1;
+
 
   /* TODO(cjamcl) clean up unused variables. */
   --audits-margin-bottom: 40px;
@@ -101,6 +105,7 @@
   --gauge-circle-size-big: 120px;
   --gauge-circle-size: 96px;
   --header-padding: 20px 0 20px 0;
+  --highlighter-bg: var(--color-black-400);
   --icon-square-size: calc(var(--score-shape-size) * 0.88);
   --plugin-badge-bg: var(--color-white);
   --plugin-badge-size-big: calc(var(--gauge-circle-size-big) / 2.7);
@@ -117,6 +122,7 @@
   --score-title-line-height-big: 36px;
   --score-title-line-height: 26px;
   --section-padding: 40px;
+  --shape-margin: 7px 12px 0 4px;
   --topbar-bg: var(--color-black-100);
   --topbar-height: 36px;
   --topbar-icon-size: 24px;
@@ -130,7 +136,7 @@
   --color-pass: var(--color-green);
 
   --plugin-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="%23757575"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>');
-  --logo-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192"><g fill="none" fill-rule="evenodd"><path d="M0 0h192v192H0z"/><path d="M67.705 179.352l2.603-20.82 49.335-16.39 4.652 37.21A87.893 87.893 0 0 1 96 184a87.893 87.893 0 0 1-28.295-4.648zM52.44 172.48C25.894 157.328 8 128.754 8 96 8 47.399 47.399 8 96 8s88 39.399 88 88c0 32.754-17.894 61.328-44.44 76.48L130 96h6V80h-8V48L96 28 64 48v32h-8v16h6l-9.56 76.48zM113.875 96l2.882 23.05-43.318 14.433L78.125 96h35.75zM80 80V56.868l16-10 16 10V80H80z" fill="%23000000"/></g></svg>');
+  --plugin-icon-url-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>');
 
   --pass-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>check</title><path fill="%23178239" d="M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z"/></svg>');
   --average-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>info</title><path fill="%23E67700" d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 30h-4V22h4v12zm0-16h-4v-4h4v4z"/></svg>');
@@ -145,6 +151,33 @@
   --pwa-optimized-color-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect fill="%23FCE4EC" width="24" height="24" rx="12"/><path d="M5 5h14v14H5z"/><path fill="%23EC3F7A" d="M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z"/></g></svg>');
 }
 
+.lh-vars.dark {
+  --color-red-700: var(--color-red);
+  --color-green-700: var(--color-green);
+  --color-orange-700: var(--color-orange);
+
+  --color-black-200: var(--color-black-800);
+  --color-black-400: var(--color-black-600);
+  --color-black-600: var(--color-black-500);
+
+  --topbar-bg: var(--color-black);
+  --plugin-badge-bg: var(--color-black-800);
+  --header-bg-color: var(--color-black-900);
+  --env-item-bg: rgba(0, 0, 0, 0.5);
+
+  --body-background-color: var(--color-black-900);
+  --body-text-color: var(--color-black-100);
+  --secondary-text-color: var(--color-black-400);
+
+  --highlighter-bg: var(--color-black-200);
+  --plugin-icon-url: var(--plugin-icon-url-dark);
+
+  --informative-color: var(--color-blue-200);
+
+  --medium-50-gray: #757575;
+  --medium-75-gray: var(--color-white);
+}
+
 @media only screen and (max-width: 480px) {
   .lh-vars {
     --audits-margin-bottom: 20px;
@@ -166,6 +199,7 @@
     --score-title-line-height-big: 26px;
     --score-title-line-height: 20px;
     --section-padding: 24px;
+    --shape-margin: 5px 12px 0 2px;
     --topbar-height: 32px;
     --topbar-icon-size: 20px;
   }
@@ -214,7 +248,7 @@
   line-height: var(--body-line-height);
   background: var(--body-background-color);
   scroll-behavior: smooth;
-  color: var(--color-black-900);
+  color: var(--body-text-color);
 }
 
 .lh-root :focus {
@@ -239,7 +273,7 @@
 
 .lh-audit-group a,
 .lh-category-header__description a {
-  color: #0c50c7;
+  color: var(--informative-color);
 }
 
 .lh-audit__description, .lh-audit__stackpack {
@@ -302,6 +336,22 @@
   background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
 }
 
+.dark .report-icon--share {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="white" d="M0 0h24v24H0z"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>');
+}
+.dark .report-icon--print {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="white" d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/><path fill="none" d="M0 0h24v24H0z"/></svg>');
+}
+.dark .report-icon--copy {
+  background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z" /><path fill="white" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
+}
+.dark .report-icon--open {
+  background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z" /><path fill="white" d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"/></svg>');
+}
+.dark .report-icon--download {
+  background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
+}
+
 /* Node */
 .lh-node {
   display: block;
@@ -310,7 +360,7 @@
   color: hsl(174, 100%, 27%);
 }
 .lh-node:hover {
-    background: hsl(0, 0%, 98%);
+    background: var(--highlighter-bg);
     border-radius: 2px;
 }
 
@@ -362,7 +412,6 @@
   display: none;
 }
 
-.lh-category-header__description,
 .lh-audit__description,
 .lh-audit__stackpack {
   color: var(--secondary-text-color);
@@ -399,7 +448,7 @@
 }
 
 .lh-audit__header:hover {
-  background-color: #F8F9FA;
+  background-color: var(--highlighter-bg);
 }
 
 /* Hide the expandable arrow icon, three ways: via the CSS Counter Styles spec, for webkit/blink browsers, hiding the polyfilled icon */
@@ -786,7 +835,6 @@
 }
 
 .lh-report {
-  background-color: #fff;
   min-width: var(--report-min-width);
 }
 
@@ -852,7 +900,6 @@
   margin: 12px auto 0 auto;
   border: 1px solid var(--color-black-200);
   border-radius: 20px;
-  color: var(--medium-75-gray);
   padding: 8px 8px;
 }
 
@@ -990,10 +1037,9 @@
 }
 
 .lh-table thead {
-  background: var(--lh-table-header-bg);
+  background-color: var(--lh-table-higlight-bg);
 }
 .lh-table thead th {
-  color: var(--medium-75-gray);
   font-weight: normal;
   word-wrap: normal;
 }
@@ -1141,7 +1187,7 @@
 }
 
 .tooltip-boundary:hover {
-  background-color: #F8F9FA;
+  background-color: var(--highlighter-bg);
 }
 
 .tooltip-boundary:hover .tooltip {

lighthouse-core/report/html/report-template.html

@@ -47,6 +47,17 @@
       // is in the document.
       const features = new ReportUIFeatures(dom);
       features.initFeatures(window.__LIGHTHOUSE_JSON__);
+
+      // TODO(cjamcl) - Persist dark mode state.
+      document.addEventListener('keyup', e => {
+        if (e.key === 'd') {
+          document.body.classList.toggle('dark');
+        }
+      });
+
+      document.querySelector('.lh-topbar__logo').addEventListener('click', () => {
+        document.body.classList.toggle('dark');
+      });
     }
     window.addEventListener('DOMContentLoaded', __initLighthouseReport__);
 

lighthouse-core/report/html/templates.html

@@ -170,22 +170,22 @@
     .lh-topbar__logo {
       width: var(--topbar-icon-size);
       height: var(--topbar-icon-size);
-      background-image: var(--logo-url);
-      background-size: cover;
+    }
+    .lh-topbar__logo .shape {
+      fill: var(--body-text-color);
     }
 
     .lh-topbar__url {
       margin: var(--topbar-padding);
       text-decoration: none;
-      color: var(--color-black);
+      color: var(--body-text-color);
     }
 
     .lh-export {
       margin-left: auto;
       will-change: transform;
     }
     .lh-export__button {
-      background-color: #fff;
       border: 1px solid #dadada;
       border-radius: 2px;
       cursor: pointer;
@@ -207,7 +207,7 @@
     }
     .lh-export__dropdown {
       position: absolute;
-      background-color: #fff;
+      background-color: var(--body-background-color);
       border: 1px solid var(--report-border-color);
       border-radius: 3px;
       padding: calc(var(--default-padding) / 2) 0;
@@ -230,7 +230,7 @@
     }
     .lh-export__dropdown a:hover,
     .lh-export__dropdown a:focus {
-      background-color: #efefef;
+      background-color: var(--color-black-200);
       outline: none;
     }
     .lh-export__dropdown .report-icon {
@@ -266,7 +266,12 @@
   </style>
 
   <div class="lh-topbar">
-    <div class="lh-topbar__logo"></div>
+    <svg class="lh-topbar__logo" viewBox="0 0 192 192">
+      <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h192v192H0z"/>
+        <path class="shape" d="M67.705 179.352l2.603-20.82 49.335-16.39 4.652 37.21A87.893 87.893 0 0 1 96 184a87.893 87.893 0 0 1-28.295-4.648zM52.44 172.48C25.894 157.328 8 128.754 8 96 8 47.399 47.399 8 96 8s88 39.399 88 88c0 32.754-17.894 61.328-44.44 76.48L130 96h6V80h-8V48L96 28 64 48v32h-8v16h6l-9.56 76.48zM113.875 96l2.882 23.05-43.318 14.433L78.125 96h35.75zM80 80V56.868l16-10 16 10V80H80z"/>
+      </g>
+    </svg>
 
     <a href="" class="lh-topbar__url" target="_blank" rel="noopener"></a>
 
@@ -564,7 +569,7 @@
       line-height: var(--score-title-line-height);
       margin: calc(0.5 * var(--score-title-line-height));
       text-align: center;
-      color: black;
+      color: var(--body-text-color);
     }
 
     .lh-category .lh-gauge__label {
@@ -599,6 +604,21 @@
       fill: #B0B0B0;
     }
 
+    .lh-gauge--pwa__disc {
+      fill: var(--color-black-200);
+    }
+
+    .lh-gauge--pwa__logo--primary-color {
+      fill: #304FFE;
+    }
+
+    .lh-gauge--pwa__logo--secondary-color {
+      fill: #3D3D3D;
+    }
+    .dark .lh-gauge--pwa__logo--secondary-color {
+      fill: #D8B6B6;
+    }
+
     /* No passing groups. */
     .lh-gauge--pwa__wrapper:not([class*='lh-badged--']) .lh-gauge--pwa__na-line {
       display: inline;
@@ -632,10 +652,6 @@
   <a href="#" class="lh-gauge__wrapper lh-gauge--pwa__wrapper">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" class="lh-gauge lh-gauge--pwa">
       <defs>
-        <linearGradient id="lh-gauge--pwa__bg-disk__gradient" x1="50%" y1="2.15%" x2="50%" y2="97.645%">
-          <stop stop-color="#F1F3F4" offset="0%"></stop>
-          <stop stop-color="#DEE6EA" offset="100%"></stop>
-        </linearGradient>
         <linearGradient id="lh-gauge--pwa__check-circle__gradient" x1="50%" y1="0%" x2="50%" y2="100%">
           <stop stop-color="#00C852" offset="0%"></stop>
           <stop stop-color="#009688" offset="100%"></stop>
@@ -661,11 +677,11 @@
 
       <g stroke="none" fill-rule="nonzero">
         <!-- Background and PWA logo (color by default) -->
-        <circle fill="url(#lh-gauge--pwa__bg-disk__gradient)" cx="30" cy="30" r="30"></circle>
+        <circle class="lh-gauge--pwa__disc" cx="30" cy="30" r="30"></circle>
         <g class="lh-gauge--pwa__logo">
-          <path fill="#3D3D3D" d="M35.66 19.39l.7-1.75h2L37.4 15 38.6 12l3.4 9h-2.51l-.58-1.61z"/>
-          <path fill="#304FFE" d="M33.52 21l3.65-9h-2.42l-2.5 5.82L30.5 12h-1.86l-1.9 5.82-1.35-2.65-1.21 3.72L25.4 21h2.38l1.72-5.2 1.64 5.2z"/>
-          <path fill="#3D3D3D" fill-rule="nonzero" d="M20.3 17.91h1.48c.45 0 .85-.05 1.2-.15l.39-1.18 1.07-3.3a2.64 2.64 0 0 0-.28-.37c-.55-.6-1.36-.91-2.42-.91H18v9h2.3V17.9zm1.96-3.84c.22.22.33.5.33.87 0 .36-.1.65-.29.87-.2.23-.59.35-1.15.35h-.86v-2.41h.87c.52 0 .89.1 1.1.32z"/>
+          <path class="lh-gauge--pwa__logo--secondary-color" d="M35.66 19.39l.7-1.75h2L37.4 15 38.6 12l3.4 9h-2.51l-.58-1.61z"/>
+          <path class="lh-gauge--pwa__logo--primary-color" d="M33.52 21l3.65-9h-2.42l-2.5 5.82L30.5 12h-1.86l-1.9 5.82-1.35-2.65-1.21 3.72L25.4 21h2.38l1.72-5.2 1.64 5.2z"/>
+          <path class="lh-gauge--pwa__logo--secondary-color" fill-rule="nonzero" d="M20.3 17.91h1.48c.45 0 .85-.05 1.2-.15l.39-1.18 1.07-3.3a2.64 2.64 0 0 0-.28-.37c-.55-.6-1.36-.91-2.42-.91H18v9h2.3V17.9zm1.96-3.84c.22.22.33.5.33.87 0 .36-.1.65-.29.87-.2.23-.59.35-1.15.35h-.86v-2.41h.87c.52 0 .89.1 1.1.32z"/>
         </g>
 
         <!-- No badges. -->