Merge pull request #45 from servo/embed-dark-mode

Add dark-mode support
servo · Jan 31, 2025 · bdfd529 · bdfd529
2 parents 86503be + e32bce7
commit bdfd529
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 24 deletions.
diff --git a/site/index.html b/site/index.html
@@ -10,22 +10,36 @@
                 font-size: 26px;
             }
 
-            html.embed {
-                background: #121619;
-                color: #f5f5f5;
-            }
-            html.embed * {
-                /* simple-grid has a *{color} rule */
-                color: revert;
-            }
-            html.embed .google-visualization-tooltip {
-                background: #121619;
-                color: #f5f5f5;
-            }
             html.embed .hide-in-embed {
                 display: none;
             }
 
+            .odd {
+                background-color: #f0efef;
+            }
+
+            @media (prefers-color-scheme: dark) {
+                html * {
+                    /* simple-grid has a *{color} rule */
+                    color: revert;
+                }
+                html {
+                    background: #121619;
+                    color: #f5f5f5;
+                }
+                html .google-visualization-tooltip {
+                    background: #121619;
+                    color: #f5f5f5;
+                }
+                .odd {
+                    background-color: #25292c;
+                }
+                select {
+                    background: #121619;
+                    color: #f5f5f5;
+                }
+            }
+
             #selected-area {
                 padding: 10px;
             }
@@ -34,10 +48,6 @@
                 padding: 10px;
             }
 
-            .odd {
-                background-color: #f0efef;
-            }
-
             #score-table {
                 margin-top: 30px;
             }
@@ -70,9 +80,12 @@
             <div class="row hide-in-embed">
                 <div class="col-4"></div>
                 <div class="col-4">
-                    <img id="logo" height="100"
-                                   src="https://servo.org/img/servo-color-positive.png">
-                    </img>
+                    <picture>
+                        <source srcset="https://servo.org/img/servo-color-negative.png" media="(prefers-color-scheme: dark)">
+                        <img id="logo" height="100"
+                                       src="https://servo.org/img/servo-color-positive.png">
+                        </img>
+                    </picture>
                 </div>
                 <div class="col-4"></div>
             </div>

diff --git a/site/load-chart.js b/site/load-chart.js
@@ -5,6 +5,7 @@ google.charts.setOnLoadCallback(setupChart)
 
 const fetchData = fetch('scores.json')
 const embed = location.search === '?embed'
+let dark_mode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
 
 const periodRanges = {
     'last month': 1,
@@ -51,7 +52,7 @@ function setupChart () {
         fontSize: 16,
         legend: {
             position: 'top',
-            ...(embed
+            ...(dark_mode
                 ? {
                     textStyle: { color: '#f5f5f5' }
                 }
@@ -62,7 +63,7 @@ function setupChart () {
             viewWindow: {
                 max: maxDate
             },
-            ...(embed
+            ...(dark_mode
                 ? {
                     textStyle: { color: '#f5f5f5' }
                 }
@@ -74,7 +75,7 @@ function setupChart () {
                 min: 0,
                 max: 1
             },
-            ...(embed
+            ...(dark_mode
                 ? {
                     textStyle: { color: '#f5f5f5' }
                 }
@@ -91,7 +92,7 @@ function setupChart () {
             isHtml: true,
             trigger: 'both'
         },
-        ...(embed
+        ...(dark_mode
             ? {
                 backgroundColor: '#121619'
             }
@@ -126,7 +127,7 @@ function setupChart () {
 
         table.addColumn('date', 'runOn')
 
-        options.series.push({ color: '#3366CC' })
+        options.series.push({ color: dark_mode ? '#CC9933' : '#3366CC' })
         table.addColumn('number', 'Servo')
         table.addColumn({ type: 'string', role: 'tooltip', p: { html: true } })
 
@@ -191,6 +192,23 @@ function setupChart () {
 
             area_dropdown.onchange = update_chart
             period_dropdown.onchange = update_chart
+            if (window.matchMedia) {
+                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {
+                    dark_mode = matches
+                    if (dark_mode) {
+                        options.legend.textStyle = { color: '#f5f5f5' }
+                        options.hAxis.textStyle = { color: '#f5f5f5' }
+                        options.vAxis.textStyle = { color: '#f5f5f5' }
+                        options.backgroundColor = '#121619'
+                    } else {
+                        options.legend.textStyle = { color: 'black' }
+                        options.hAxis.textStyle = { color: 'black' }
+                        options.vAxis.textStyle = { color: 'black' }
+                        options.backgroundColor = 'white'
+                    }
+                    update_chart()
+                })
+            }
             area_dropdown.value = scores.area_keys[0]
             period_dropdown.value = Object.keys(periodRanges)[4]
             update_table(scores)