Add support for a dark theme (#221)

smarr · Oct 3, 2024 · f0631af · f0631af
2 parents 6895e2f + 190cb95
commit f0631af
Show file tree

Hide file tree

Showing 21 changed files with 336 additions and 53 deletions.
diff --git a/resources/style.css b/resources/style.css
@@ -62,13 +62,13 @@ body.compare, body.timeline {
   max-width: 100%;
   padding: 8px;
   border-radius: 4px;
-  border: 1px solid #ccc;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--bs-secondary-bg);
+  box-shadow: inset 0 1px 2px var(--bs-tertiary-bg);
   transition: border-color 0.3s ease;
 }
 
 .branch-search:focus {
-  border-color: #007bff;
+  border-color: var(--bs-primary);
   outline: none;
 }
 
@@ -77,10 +77,10 @@ body.compare, body.timeline {
 }
 
 .branch-sidebar {
-  border: 1px solid #ddd;
+  border: 1px solid var(--bs-secondary-bg);
   border-radius: 8px;
-  background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background-color: var(--bs-body-bg);
+  box-shadow: 0 2px 4px var(--bs-tertiary-bg);
   width: 200px;
   max-width: 200px;
   margin-top: 1em;
@@ -93,17 +93,17 @@ body.compare, body.timeline {
 }
 
 .sort-options {
-  background-color: #f9f9f9;
+  background-color: var(--bs-body-bg);
   border-radius: 4px;
   margin-bottom: 1em;
   overflow: hidden;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 2px var(--bs-tertiary-bg);
   padding: 0.5em;
 }
 
 .sort-options a {
   display: block;
-  color: #007bff;
+  color: var(--bs-primary);
   text-decoration: none;
   font-size: 0.9em;
   padding: 4px 7px;
@@ -112,8 +112,8 @@ body.compare, body.timeline {
 
 .sort-options a:hover,
 .sort-options a.selected-text {
-  background-color: #007bff;
-  color: white;
+  background-color: var(--bs-primary);
+  color: var(--bs-body-bg);
 }
 
 .branch-list {
@@ -126,16 +126,16 @@ body.compare, body.timeline {
   cursor: pointer;
   padding: 2px 7px;
   border: none;
-  color: #444444;
+  color: var(--bs-body-color);
 }
 
 .branch-list .list-group-item:hover {
-  background-color: #f1f1f1;
+  background-color: var(--bs-primary-bg-subtle);
 }
 
 .branch-list .list-group-item.active {
-  background-color: #007bff;
-  color: white;
+  background-color: var(--bs-primary);
+  color: var(--bs-body-bg);
 }
 
 nav.compare {
@@ -144,7 +144,7 @@ nav.compare {
   top: 4rem;
   height: calc(100vh - 4rem);
   overflow-y: auto;
-  border-left: 1px solid #eee;
+  border-left: 1px solid var(--bs-border-color);
   font-size: .875rem;
   order: 2;
 }
@@ -318,22 +318,22 @@ table.benchmark-details > tbody > tr > th:nth-child(1) {
   max-width: 100%;
 }
 
-.refresh {
+.menu {
   position: absolute;
   right: 0;
   top: 0;
   padding: 1ex
 }
 
-.refresh button {
+.menu button {
   margin-right: 1ex
 }
 
-.refresh form {
+.menu form {
   display:inline-block;
 }
 
-.refresh input[name=password] {
+.menu input[name=password] {
   display: none;
 }
 
@@ -373,6 +373,7 @@ td.warmup-plot {
   content: "";
   background-repeat: no-repeat;
   background-size: 16px;
+  background-color: var(--bs-light);
 }
 
 .btn-warmup {
@@ -596,7 +597,7 @@ td.warmup-plot {
 }
 
 .u-select {
-	background: rgba(0,0,0,0.07);
+	background: var(--bs-border-color);
 	position: absolute;
 	pointer-events: none;
 }
@@ -614,13 +615,13 @@ td.warmup-plot {
 .u-hz .u-cursor-x,
 .u-vt .u-cursor-y {
 	height: 100%;
-	border-right: 1px dashed #607D8B;
+	border-right: 1px dashed var(--bs-emphasis-color);
 }
 
 .u-hz .u-cursor-y,
 .u-vt .u-cursor-x {
 	width: 100%;
-	border-bottom: 1px dashed #607D8B;
+	border-bottom: 1px dashed var(--bs-emphasis-color);
 }
 
 .u-cursor-pt {
@@ -647,9 +648,9 @@ td.warmup-plot {
 .u-tooltip {
   font-size: 10pt;
   position: absolute;
-  background: #fff;
+  background: var(--bs-body-bg);
   display: none;
-  border: 2px solid black;
+  border: 2px solid var(--bs-border-color);
   padding: 4px;
   pointer-events: none;
   z-index: 100;
@@ -690,3 +691,23 @@ table#benchmark-set-change tbody.hide-most-rows tr.benchmark-row:nth-child(n+4)
 .content-area {
     width: 70%;
 }
+
+svg.theme-icon {
+  display: none;
+}
+
+svg.theme-icon.active {
+  display: inline-block;
+}
+
+.fast {
+  background-color: rgba(var(--bs-success-rgb), .3) !important;
+}
+
+.slow {
+  background-color: rgba(var(--bs-danger-rgb), .3) !important;
+}
+
+[data-bs-theme="dark"] .compare img {
+  filter: invert(0.8) contrast(1.2);
+}
diff --git a/src/backend/compare/html/gen-index.html b/src/backend/compare/html/gen-index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
 <head>
+  <script src="/static/theme.js" type="module"></script>
   <title>ReBenchDB for {%= it.project %}: Comparing {%= it.baselineHash6 %} with {%= it.changeHash6 %}</title>
 
   {%- include('header.html', { rebenchVersion: it.rebenchVersion }) %}
@@ -12,14 +13,15 @@
 <body class="compare timeline-multi">
 
 <header>
-<div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5 compare">
+<div class="p-4 mb-4 bg-secondary-subtle rounded-2"><div class="container-fluid py-5 compare">
   <h2>ReBenchDB for {%= it.project %}</h2>
 {% if (it.revisionFound) { %}
   <h3>Comparing <a href="{%= it.base.repourl%}/compare/{%= it.baselineHash%}...{%= it.changeHash%}">{%= it.baselineHash6%} with {%= it.changeHash6%}</a></h3>
 {% } else { %}
   <h3>Comparing {%= it.baselineHash6%} with {%= it.changeHash6%}</h3>
 {% } %}
 </div></div>
+{%- include('common-menu.html', it) %}
 </header>
 
 {% if (it.revisionFound) { %}

diff --git a/src/backend/compare/html/index.html b/src/backend/compare/html/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
 <head>
+  <script src="/static/theme.js" type="module"></script>
   <title>ReBenchDB for {%= it.project %}: Comparing {%= it.baselineHash6 %} with {%= it.changeHash6 %}</title>
   <meta id="baseHash" value="{%= it.baselineHash %}">
   <meta id="changeHash" value="{%= it.changeHash %}">
@@ -18,7 +19,7 @@
 </svg>
 
 <header>
-<div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5 compare">
+<div class="p-4 mb-4 bg-secondary-subtle rounded-2"><div class="container-fluid py-5 compare">
   <h2>ReBenchDB for {%= it.project %}</h2>
 {% if (it.revisionFound) { %}
   <h3>Comparing <a href="{%= it.base.repourl%}/compare/{%= it.baselineHash%}...{%= it.changeHash%}">{%= it.baselineHash6%} with {%= it.changeHash6%}</a></h3>

diff --git a/src/backend/compare/html/refresh-menu.html b/src/backend/compare/html/refresh-menu.html
@@ -1,4 +1,4 @@
-<div class="refresh">
+<div class="menu">
   <div class="flex-nowrap navbar-light">
     <button type="button" class="btn btn-outline-secondary btn-sm"
         data-bs-toggle="collapse" data-bs-target="#filters" aria-controls="#filters"
@@ -13,6 +13,8 @@
         <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
       </svg>
     </button>
+    {%- include('theme-switcher-btn.html') %}
+
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
         data-bs-target="nav.compare" aria-controls="nav.compare"
         aria-expanded="false" aria-label="Toggle Outline"

diff --git a/src/backend/main/index.html b/src/backend/main/index.html
@@ -1,13 +1,15 @@
 <!doctype html>
 <html lang="en">
 <head>
+  <script src="/static/theme.js" type="module"></script>
   <title>ReBench</title>
   {%- include('header.html', { rebenchVersion: it.rebenchVersion }) %}
   <script src="/static/index.js" type="module"></script>
 </head>
 <body>
 
-  <div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
+<header>
+  <div class="p-4 mb-4 bg-secondary-subtle rounded-2"><div class="container-fluid py-5">
     <h1 class="display-4">ReBench</h1>
     <h2 class="display-5">Execute and document benchmarks reproducibly.</h2>
 
@@ -22,6 +24,8 @@ <h2 class="display-5">Execute and document benchmarks reproducibly.</h2>
     <a href="https://github.com/smarr/ReBenchDB"><img src="https://img.shields.io/badge/GitHub-ReBenchDB-success"></a>
     <a href="https://rebench.readthedocs.io/"><img src="https://img.shields.io/badge/Documentation-Go-informational"></a>
   </div></div>
+  {%- include('common-menu.html', it) %}
+</header>
 
   <div id="projects">
     {% for (const p of it.projects) { %}

diff --git a/src/backend/project/get-exp-data.html b/src/backend/project/get-exp-data.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
 <head>
+  <script src="/static/theme.js" type="module"></script>
   <title>ReBenchDB {%= it.project %}: Preparing Data For Download</title>
 
   {%- include('header.html', { rebenchVersion: it.rebenchVersion }) %}
@@ -9,10 +10,13 @@
 </head>
 <body class="compare">
 
-<div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
+<header>
+<div class="p-4 mb-4 bg-secondary-subtle rounded-2"><div class="container-fluid py-5">
   <h2>ReBenchDB for {%= it.project %}</h2>
   <h3>Preparing Data for download of {%= it.expName %}</h3>
 </div></div>
+{%- include('common-menu.html', it) %}
+</header>
 
 {% if (it.preparingData) { %}
 <div class="alert alert-secondary" role="alert">

diff --git a/src/backend/project/project-data.html b/src/backend/project/project-data.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
 <head>
+  <script src="/static/theme.js" type="module"></script>
   <meta id="project-id" value="{%= it.project.id %}">
   <meta id="project-slug" value="{%= it.project.slug %}">
   <title>ReBench: {%= it.project.name %}</title>
@@ -9,12 +10,15 @@
 </head>
 <body>
 
-  <div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
+  <header>
+  <div class="p-4 mb-4 bg-secondary-subtle rounded-2"><div class="container-fluid py-5">
     <h1 class="display-4">{%= it.project.name %}</h1>
     {% if (it.project.description) { %}
     <h2 class="display-5">{%= it.project.description %}</h2>
     {% } %}
   </div></div>
+  {%- include('common-menu.html', it) %}
+  </header>
 
   <div>
     <table class="table table-sm">

diff --git a/src/backend/project/project.html b/src/backend/project/project.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
 <head>
+  <script src="/static/theme.js" type="module"></script>
   <title>ReBench: {%= it.name %}</title>
   <meta id="project-id" value="{%= it.id %}">
   <meta id="project-showchanges" value="{%= it.showchanges%}">
@@ -10,12 +11,15 @@
 </head>
 <body class="project-body">
 
-  <div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
+<header>
+  <div class="p-4 mb-4 bg-secondary-subtle rounded-2"><div class="container-fluid py-5">
     <h1 class="display-4">{%= it.name %}</h1>
     {% if (it.description) { %}
     <h2 class="display-5">{%= it.description%}</h2>
     {% } %}
   </div></div>
+  {%- include('common-menu.html', it) %}
+</header>
 
   <div id="project">
     <div class="branch-sidebar left">

diff --git a/src/backend/timeline/timeline.html b/src/backend/timeline/timeline.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
 <head>
+  <script src="/static/theme.js" type="module"></script>
   <meta id="project-id" value="{%= it.project.id %}">
   <meta id="project-slug" value="{%= it.project.slug %}">
   <title>ReBench: Timeline {%= it.project.name %}</title>
@@ -11,7 +12,7 @@
 <body class="timeline-multi timeline">
 
 <header>
-  <div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
+  <div class="p-4 mb-4 bg-secondary-subtle rounded-2"><div class="container-fluid py-5">
     <h1 class="display-4">ReBench: Timeline {%= it.project.name %}</h1>
     {% if (it.project.description) { %}
     <h2 class="display-5">{%= it.project.description %}</h2>
@@ -20,7 +21,8 @@ <h2 class="display-5">{%= it.project.description %}</h2>
     <p>Timeline is based on data for the <code>{%= it.project.basebranch %}</code> branch.</p>
     {% } %}
   </div></div>
-  <div class="refresh">
+
+  <div class="menu">
     <div class="flex-nowrap navbar-light">
       <button type="button" class="btn btn-outline-secondary btn-sm"
           data-bs-toggle="collapse" data-bs-target="#filters" aria-controls="#filters"
@@ -29,6 +31,8 @@ <h2 class="display-5">{%= it.project.description %}</h2>
           <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
         </svg>
       </button>
+      {%- include('theme-switcher-btn.html') %}
+
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
           data-bs-target="nav.compare" aria-controls="nav.compare"
           aria-expanded="false" aria-label="Toggle Outline"
@@ -81,7 +85,7 @@ <h4><a href="#b-{%= bb.benchName %}-{%= bb.runId %}">{%= bb.benchName %}<span cl
   </div></div> <!-- closing class="row flex-nowrap" and class="container-fluid" -->
   {% } else { %}
   <main role="main">
-  <div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
+  <div class="p-4 mb-4 bg-secondary-subtle rounded-2"><div class="container-fluid py-5">
     <h1 class="display-4">No Data Available</h1>
     {% if (it.project.basebranch) { %}
       <p class="lead">There are no benchmarks available for this project.</p>