report(redesign): respect prefers-color-scheme

lighthouse-core/report/html/renderer/report-renderer.js

@@ -242,17 +242,6 @@ class ReportRenderer {
       wrapper.appendChild(renderer.render(category, report.categoryGroups));
     }
 
-    // Fireworks
-    const scoresAll100 = report.reportCategories.every(cat => cat.score === 1);
-    if (!this._dom.isDevTools() && scoresAll100) {
-      const scoresContainer = this._dom.find('.lh-scores-container', headerContainer);
-      scoresContainer.classList.add('score100');
-      this._dom._document.body.classList.add('dark');
-      scoresContainer.addEventListener('click', _ => {
-        scoresContainer.classList.toggle('fireworks-paused');
-      });
-    }
-
     if (scoreHeader) {
       const scoreGauges =
         this._renderScoreGauges(report, categoryRenderer, specificCategoryRenderers);

lighthouse-core/report/html/renderer/report-ui-features.js

@@ -89,7 +89,27 @@ class ReportUIFeatures {
     this._document.addEventListener('keyup', this.onKeyUp);
     this._document.addEventListener('copy', this.onCopy);
     const topbarLogo = this._dom.find('.lh-topbar__logo', this._document);
-    topbarLogo.addEventListener('click', this._toggleDarkTheme);
+    topbarLogo.addEventListener('click', () => this._toggleDarkTheme());
+
+    let turnOffTheLights = false;
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      turnOffTheLights = true;
+    }
+
+    // Fireworks.
+    const scoresAll100 = Object.values(report.categories).every(cat => cat.score === 1);
+    if (!this._dom.isDevTools() && scoresAll100) {
+      turnOffTheLights = true;
+      const scoresContainer = this._dom.find('.lh-scores-container', this._document);
+      scoresContainer.classList.add('score100');
+      scoresContainer.addEventListener('click', _ => {
+        scoresContainer.classList.toggle('fireworks-paused');
+      });
+    }
+
+    if (turnOffTheLights) {
+      this._toggleDarkTheme(true);
+    }
 
     // There is only a sticky header when at least 2 categories are present.
     if (Object.keys(this.json.categories).length >= 2) {
@@ -513,9 +533,10 @@ class ReportUIFeatures {
 
   /**
    * @private
+   * @param {boolean} [force]
    */
-  _toggleDarkTheme() {
-    this._document.body.classList.toggle('dark');
+  _toggleDarkTheme(force) {
+    this._document.body.classList.toggle('dark', force);
   }
 
   _updateStickyHeaderOnScroll() {

lighthouse-core/test/report/html/renderer/report-renderer-test.js

@@ -82,8 +82,6 @@ describe('ReportRenderer', () => {
       // 3 sets of gauges - one in sticky header, one in scores header, and one in each section.
       assert.equal(output.querySelectorAll('.lh-gauge__wrapper, .lh-gauge--pwa__wrapper').length,
           sampleResults.reportCategories.length * 3, 'renders category gauges');
-      // no fireworks
-      assert.ok(output.querySelector('.score100') === null, 'has no fireworks treatment');
     });
 
     it('renders additional reports by replacing the existing one', () => {
@@ -214,23 +212,6 @@ describe('ReportRenderer', () => {
     assert.equal(renderer._templateContext, otherDocument);
   });
 
-  it('should render an all 100 report with fireworks', () => {
-    const container = renderer._dom._document.body;
-
-    sampleResults.reportCategories.forEach(element => {
-      element.score = 1;
-    });
-
-    const output = renderer.renderReport(sampleResults, container);
-    // standard checks
-    assert.ok(output.querySelector('.lh-header-sticky'), 'has a header');
-    assert.ok(output.querySelector('.lh-report'), 'has report body');
-    assert.equal(output.querySelectorAll('.lh-gauge__wrapper, .lh-gauge--pwa__wrapper').length,
-        sampleResults.reportCategories.length * 3, 'renders category gauges');
-    // fireworks!
-    assert.ok(output.querySelector('.score100'), 'has fireworks treatment');
-  });
-
   it('should add LHR channel to doc link parameters', () => {
     const lhrChannel = sampleResults.configSettings.channel;
     // Make sure we have a channel in the LHR.

lighthouse-core/test/report/html/renderer/report-ui-features-test.js

@@ -171,4 +171,22 @@ describe('ReportUIFeatures', () => {
       });
     });
   });
+
+  describe('fireworks', () => {
+    it('should render an non-all 100 report without fireworks', () => {
+      const lhr = JSON.parse(JSON.stringify(sampleResults));
+      lhr.categories.performance.score = 0.5;
+      const container = render(lhr);
+      assert.ok(container.querySelector('.score100') === null, 'has no fireworks treatment');
+    });
+
+    it('should render an all 100 report with fireworks', () => {
+      const lhr = JSON.parse(JSON.stringify(sampleResults));
+      Object.values(lhr.categories).forEach(element => {
+        element.score = 1;
+      });
+      const container = render(lhr);
+      assert.ok(container.querySelector('.score100'), 'has fireworks treatment');
+    });
+  });
 });