MIRRORS/poky
1
0
Fork 0
mirror of git://git.yoctoproject.org/poky.git synced 2025-07-19 21:09:03 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

oe-build-perf-report: Add dark mode

Browse Source 
Update css to add dark mode when window prefers-color-scheme is dark.

(From OE-Core rev: ed02a235d42202279ad5e4e3153247f9e5e2bba8)

Signed-off-by: Ninette Adhikari <ninette@thehoodiefirm.com>
Signed-off-by: Alexandre Belloni <alexandre.belloni@bootlin.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>
This commit is contained in:
Ninette Adhikari 2024-05-03 16:43:40 +02:00 committed by Richard Purdie
parent 20fafa0854
commit cf0c866b51
2 changed files with 39 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
scripts/lib/build_perf/html/measurement_chart.html
View File

@ -81,13 +81,20 @@
// Draw chart // Draw chart
const chart_div = document.getElementById('{{ chart_elem_id }}'); const chart_div = document.getElementById('{{ chart_elem_id }}');
const measurement_chart= echarts.init(chart_div, null, { // Set dark mode
height: 320 let measurement_chart
}); if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
measurement_chart= echarts.init(chart_div, 'dark', {
height: 320
});
} else {
measurement_chart= echarts.init(chart_div, null, {
height: 320
});
}
// Change chart size with browser resize // Change chart size with browser resize
window.addEventListener('resize', function() { window.addEventListener('resize', function() {
measurement_chart.resize(); measurement_chart.resize();
}); });
measurement_chart.setOption(option); measurement_chart.setOption(option);
</script> </script>

34
scripts/lib/build_perf/html/report.html
View File

@ -19,6 +19,15 @@
{# Styles #} {# Styles #}
<style> <style>
:root {
--text: #000;
--bg: #fff;
--h2heading: #707070;
--link: #0000EE;
--trtopborder: #9ca3af;
--trborder: #e5e7eb;
--chartborder: #f0f0f0;
}
.meta-table { .meta-table {
font-size: 14px; font-size: 14px;
text-align: left; text-align: left;
@ -31,7 +40,7 @@
} }
.measurement { .measurement {
padding: 8px 0px 8px 8px; padding: 8px 0px 8px 8px;
border: 2px solid #f0f0f0; border: 2px solid var(--chartborder);
margin: 1.5rem 0; margin: 1.5rem 0;
} }
.details { .details {
@ -61,6 +70,8 @@
body { body {
font-family: 'Helvetica', sans-serif; font-family: 'Helvetica', sans-serif;
margin: 3rem 8rem; margin: 3rem 8rem;
background-color: var(--bg);
color: var(--text);
} }
h1 { h1 {
text-align: center; text-align: center;
@ -68,13 +79,13 @@ h1 {
h2 { h2 {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: 0px; margin-bottom: 0px;
color: #707070; color: var(--h2heading);
padding-top: 1.5rem; padding-top: 1.5rem;
} }
h3 { h3 {
font-size: 1.3rem; font-size: 1.3rem;
margin: 0px; margin: 0px;
color: #707070; color: var(--h2heading);
padding: 1.5rem 0; padding: 1.5rem 0;
} }
h4 { h4 {
@ -89,10 +100,10 @@ table {
line-height: 2rem; line-height: 2rem;
} }
tr { tr {
border-bottom: 1px solid #e5e7eb; border-bottom: 1px solid var(--trborder);
} }
tr:first-child { tr:first-child {
border-bottom: 1px solid #9ca3af; border-bottom: 1px solid var(--trtopborder);
} }
tr:last-child { tr:last-child {
border-bottom: none; border-bottom: none;
@ -100,11 +111,22 @@ tr:last-child {
a { a {
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
color: #0000EE; color: var(--link);
} }
a:hover { a:hover {
color: #8080ff; color: #8080ff;
} }
@media (prefers-color-scheme: dark) {
:root {
--text: #e9e8fa;
--bg: #0F0C28;
--h2heading: #B8B7CB;
--link: #87cefa;
--trtopborder: #394150;
--trborder: #212936;
--chartborder: #b1b0bf;
}
}
</style> </style>
<title>{{ title }}</title> <title>{{ title }}</title>