From a1e431f6a4a0742af502edf5275bf263a13b0b70 Mon Sep 17 00:00:00 2001
From: LordBaryhobal <47377497+LordBaryhobal@users.noreply.github.com>
Date: Fri, 1 Jul 2022 13:59:39 +0200
Subject: [PATCH 01/16] added dark.css

---
 coverage/htmlfiles/dark.css | 299 ++++++++++++++++++++++++++++++++++++
 1 file changed, 299 insertions(+)
 create mode 100644 coverage/htmlfiles/dark.css

diff --git a/coverage/htmlfiles/dark.css b/coverage/htmlfiles/dark.css
new file mode 100644
index 000000000..4aaf1fe03
--- /dev/null
+++ b/coverage/htmlfiles/dark.css
@@ -0,0 +1,299 @@
+:root {
+	color-scheme: dark;
+}
+
+body {
+	--bg: #22272e;
+	--bg2: #2d333b;
+	--border: #444c56;
+	--color: #adbac7;
+	--comment: #768390;
+	--string: #96d0ff;
+	--keyword: #f47067;
+
+	--variable: #f69d50;
+
+	--green: #57ab5a;
+	--yellow: #c69026;
+	--red: #c93c37;
+	--grey: #373e47;
+
+	--green-active: #8ddb8c;
+	--yellow-active: #eac55f;
+	--red-active: #f47067;
+	--grey-active: #545d68;
+
+	--btn-border: #cdd9e51a;
+
+	--green-txt: #ffffff;
+	--yellow-txt: #444;
+	--red-txt: #222;
+	--grey-txt: #adbac7;
+
+	--footer: #768390;
+	--hover: #ae7c1426;
+
+	--line-green: #57ab5a26;
+	--line-green-border: #57ab5a4d;
+	--line-green-hover: #57ab5a98;
+
+	--line-yellow: #ae7c1426;
+	--line-yellow-border: #ae7c144d;
+	--line-yellow-hover: #ae7c1498;
+
+	--line-red: #e5534b26;
+	--line-red-border: #e5534b4d;
+	--line-red-hover: #e5534b98;
+
+	--line-grey: #76839026;
+	--line-grey-border: #7683904d;
+	--line-grey-hover: #76839098;
+
+	--outline: #539bf5;
+
+	--overlay: #2d333b;
+	--border-kbd: #636e7b66;
+
+	--highlight: #ffd54f52;
+}
+
+body {
+	background-color: var(--bg);
+	color: var(--color);
+	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+}
+html > body {
+	font-size: 12px;
+}
+
+html > body.indexfile {
+	font-size: 16px;
+}
+
+p {
+	font-size: inherit;
+	line-height: 20px;
+}
+
+#source {
+	font-family: SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+}
+
+#scroll_marker {
+	background-color: var(--bg);
+	border-color: var(--border);
+}
+
+#scroll_marker .marker {
+	background-color: var(--border);
+}
+
+header {
+	background-color: var(--bg2);
+	border-bottom-color: var(--border);
+}
+
+header.sticky {
+	height: unset;
+}
+
+#source p .t .com {
+	color: var(--comment);
+}
+
+#source p .t .key {
+	color: var(--keyword);
+	font-weight: normal;
+}
+
+#source p .t .str {
+	color: var(--string);
+}
+
+header button {
+	padding: 5px 16px;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 20px;
+	vertical-align: middle;
+	border: 1px solid;
+	border-radius: 6px;
+	appearance: none;
+}
+
+header button.run {
+	background-color: var(--green);
+	color: var(--green-txt);
+	border-color: var(--btn-border);
+}
+
+header button.mis {
+	background-color: var(--red);
+	color: var(--red-txt);
+	border-color: var(--btn-border);
+}
+
+header button.exc {
+	background-color: var(--grey);
+	color: var(--grey-txt);
+	border-color: var(--btn-border);
+}
+
+header button.par {
+	background-color: var(--yellow);
+	color: var(--yellow-txt);
+	border-color: var(--btn-border);
+}
+
+header button.run.show_run {
+	background-color: var(--green-active);
+	border-color: var(--btn-border);
+}
+
+header button.mis.show_mis {
+	background-color: var(--red-active);
+	border-color: var(--btn-border);
+}
+
+header button.exc.show_exc {
+	background-color: var(--grey-active);
+	border-color: var(--btn-border);
+}
+
+header button.par.show_par {
+	background-color: var(--yellow-active);
+	border-color: var(--btn-border);
+}
+
+header button:active, header button:focus {
+	outline: 2px solid var(--outline);
+	outline-offset: -2px;
+}
+
+footer .content {
+	color: var(--footer);
+}
+
+#source p .t:hover {
+	background-color: var(--hover);
+}
+
+#source p .t { border-left-color: var(--border); }
+#source p.run .t { border-left-color: var(--line-green-border); }
+#source p.mis .t { border-left-color: var(--line-red-border); }
+#source p.exc .t { border-left-color: var(--line-grey-border); }
+#source p.par .t { border-left-color: var(--line-yellow-border); }
+
+#source p.run.show_run .t { background-color: var(--line-green); }
+#source p.mis.show_mis .t { background-color: var(--line-red); }
+#source p.exc.show_exc .t { background-color: var(--line-grey); }
+#source p.par.show_par .t { background-color: var(--line-yellow); }
+
+#source p.run.show_run .t:hover { background-color: var(--line-green-hover); }
+#source p.mis.show_mis .t:hover { background-color: var(--line-red-hover); }
+#source p.exc.show_exc .t:hover { background-color: var(--line-grey-hover); }
+#source p.par.show_par .t:hover { background-color: var(--line-yellow-hover); }
+
+#help_panel, #source p .annotate.long {
+	background-color: var(--overlay);
+	border-radius: 6px;
+	border-color: var(--border);
+	color: var(--color);
+	padding: 8px 16px;
+}
+
+#help_panel_state + label {
+	cursor: pointer;
+}
+
+kbd {
+	color: var(--color);
+    background-color: var(--bg2);
+	display: inline-block;
+    padding: 3px 5px;
+    font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+    line-height: 10px;
+    vertical-align: middle;
+    border: 1px solid var(--border-kbd);
+    border-radius: 6px;
+    box-shadow: inset 0 -1px 0 var(--border-kbd);
+}
+
+#help_panel .legend {
+	font-size: 12px;
+	font-weight: 600;
+}
+
+#source p .n.highlight {
+	background-color: var(--highlight);
+}
+
+
+#index th {
+	color: var(--color);
+}
+
+#filter_container input {
+	width: 10em;
+	font-size: 14px;
+	line-height: 20px;
+	padding: 5px 12px;
+	color: var(--color);
+	border: 2px solid var(--border);
+	background-color: var(--bg);
+	border-radius: 6px;
+	vertical-align: middle;
+	transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition-property: color,background-color,box-shadow,border-color;
+}
+
+#filter_container input:focus:not(:focus-visible) {
+	border-color: var(--outline);
+	outline: none;
+	box-shadow: inset 0 0 0 1px transparent;
+}
+
+#filter_container input:focus-visible {
+	border-color: var(--outline);
+	outline: none;
+	box-shadow: inset 0 0 0 1px var(--outline);
+}
+
+#index th:hover, #index tr.file:hover {
+	background-color: var(--bg2);
+}
+
+#index th[aria-sort="ascending"], #index th[aria-sort="descending"] {
+	background-color: var(--bg2);
+}
+
+#index td, #index th {
+	border-bottom-color: var(--border);
+	padding: 8px;
+}
+
+body.indexfile header .content {
+	display: flex;
+	align-items: center;
+	padding: 16px;
+	gap: 16px;
+}
+
+body.indexfile header .content h1 {
+	flex-grow: 1;
+}
+
+body.indexfile #help_panel_wrapper {
+	float: initial;
+	order: 1;
+}
+
+body.indexfile #filter_container {
+	float: initial;
+	margin: 0;
+}
+
+a:active, a:focus {
+	outline: 2px solid var(--outline);
+	outline-offset: -2px;
+}
\ No newline at end of file

From 0c0508cf32554314e2e61ba515ab267344c2aa58 Mon Sep 17 00:00:00 2001
From: LordBaryhobal <47377497+LordBaryhobal@users.noreply.github.com>
Date: Fri, 1 Jul 2022 14:01:13 +0200
Subject: [PATCH 02/16] added default dark theme config value

---
 coverage/config.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/coverage/config.py b/coverage/config.py
index 1ad46597c..3429e49c5 100644
--- a/coverage/config.py
+++ b/coverage/config.py
@@ -218,6 +218,7 @@ def __init__(self):
         self.html_skip_empty = None
         self.html_title = "Coverage report"
         self.show_contexts = False
+        self.dark_theme = False
 
         # Defaults for [xml]
         self.xml_output = "coverage.xml"

From edb6f78d8ef8bab324b6a973a5e51d55205b43ae Mon Sep 17 00:00:00 2001
From: LordBaryhobal <47377497+LordBaryhobal@users.noreply.github.com>
Date: Fri, 1 Jul 2022 14:06:03 +0200
Subject: [PATCH 03/16] added dark_theme config

---
 coverage/html.py | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/coverage/html.py b/coverage/html.py
index 21b5189e3..40c73bf0b 100644
--- a/coverage/html.py
+++ b/coverage/html.py
@@ -164,6 +164,8 @@ def __init__(self, cov):
             self.extra_css = os.path.basename(self.config.extra_css)
         else:
             self.extra_css = None
+        
+        self.dark_theme = self.config.dark_theme
 
         self.data = self.coverage.get_data()
         self.has_arcs = self.data.has_arcs()
@@ -189,6 +191,7 @@ def __init__(self, cov):
             'title': title,
             'time_stamp': format_local_datetime(datetime.datetime.now()),
             'extra_css': self.extra_css,
+            'dark_theme': self.dark_theme,
             'has_arcs': self.has_arcs,
             'show_contexts': self.config.show_contexts,
 
@@ -265,6 +268,10 @@ def make_local_static_report_files(self):
         # The files we provide must always be copied.
         for static in self.STATIC_FILES:
             shutil.copyfile(data_filename(static), os.path.join(self.directory, static))
+        
+        # If dark theme is on, copy the corresponding css file
+        if self.config.dark_theme:
+            shutil.copyfile(data_filename("dark.css"), os.path.join(self.directory, "dark.css"))
 
         # Only write the .gitignore file if the directory was originally empty.
         # .gitignore can't be copied from the source tree because it would

From 895db245dda273f43681e3628457e24af0ec9d7b Mon Sep 17 00:00:00 2001
From: LordBaryhobal <47377497+LordBaryhobal@users.noreply.github.com>
Date: Fri, 1 Jul 2022 14:06:45 +0200
Subject: [PATCH 04/16] added dark theme stylesheet link

---
 coverage/htmlfiles/index.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/coverage/htmlfiles/index.html b/coverage/htmlfiles/index.html
index bde46eafe..c4a5c2c72 100644
--- a/coverage/htmlfiles/index.html
+++ b/coverage/htmlfiles/index.html
@@ -8,6 +8,9 @@
     <title>{{ title|escape }}</title>
     <link rel="icon" sizes="32x32" href="favicon_32.png">
     <link rel="stylesheet" href="style.css" type="text/css">
+    {% if dark_theme %}
+        <link rel="stylesheet" href="dark.css" type="text/css">
+    {% endif %}
     {% if extra_css %}
         <link rel="stylesheet" href="{{ extra_css }}" type="text/css">
     {% endif %}

From e9bb5442e2a926204d587131cb67ffb55d13a32e Mon Sep 17 00:00:00 2001
From: LordBaryhobal <47377497+LordBaryhobal@users.noreply.github.com>
Date: Fri, 1 Jul 2022 14:16:23 +0200
Subject: [PATCH 05/16] added dark_theme to CONFIG_FILE_OPTIONS

---
 coverage/config.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/coverage/config.py b/coverage/config.py
index 3429e49c5..2ec8156ee 100644
--- a/coverage/config.py
+++ b/coverage/config.py
@@ -389,6 +389,7 @@ def copy(self):
 
         # [html]
         ('extra_css', 'html:extra_css'),
+        ('dark_theme', 'html:dark_theme'),
         ('html_dir', 'html:directory'),
         ('html_skip_covered', 'html:skip_covered', 'boolean'),
         ('html_skip_empty', 'html:skip_empty', 'boolean'),

From 79c0d69e3b9db5e93fea807b1508cfe3f1b8bd0f Mon Sep 17 00:00:00 2001
From: LordBaryhobal <47377497+LordBaryhobal@users.noreply.github.com>
Date: Fri, 1 Jul 2022 14:33:18 +0200
Subject: [PATCH 06/16] fixed missing type for dark_theme option

---
 coverage/config.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/coverage/config.py b/coverage/config.py
index 2ec8156ee..81d059f34 100644
--- a/coverage/config.py
+++ b/coverage/config.py
@@ -389,7 +389,7 @@ def copy(self):
 
         # [html]
         ('extra_css', 'html:extra_css'),
-        ('dark_theme', 'html:dark_theme'),
+        ('dark_theme', 'html:dark_theme', 'boolean'),
         ('html_dir', 'html:directory'),
         ('html_skip_covered', 'html:skip_covered', 'boolean'),
         ('html_skip_empty', 'html:skip_empty', 'boolean'),

From fab2e9e314753627f3957cae6df25f7fc1bb556a Mon Sep 17 00:00:00 2001
From: LordBaryhobal <47377497+LordBaryhobal@users.noreply.github.com>
Date: Fri, 1 Jul 2022 14:42:52 +0200
Subject: [PATCH 07/16] added css for body.indexfile header .content .text

---
 coverage/htmlfiles/dark.css | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/coverage/htmlfiles/dark.css b/coverage/htmlfiles/dark.css
index 4aaf1fe03..a1e97e45d 100644
--- a/coverage/htmlfiles/dark.css
+++ b/coverage/htmlfiles/dark.css
@@ -277,12 +277,19 @@ body.indexfile header .content {
 	align-items: center;
 	padding: 16px;
 	gap: 16px;
+    flex-wrap: wrap;
 }
 
 body.indexfile header .content h1 {
 	flex-grow: 1;
 }
 
+body.indexfile header .content .text {
+    margin: 0;
+    order: 2;
+    flex-basis: 100%;
+}
+
 body.indexfile #help_panel_wrapper {
 	float: initial;
 	order: 1;
@@ -296,4 +303,4 @@ body.indexfile #filter_container {
 a:active, a:focus {
 	outline: 2px solid var(--outline);
 	outline-offset: -2px;
-}
\ No newline at end of file
+}

From a74825f31ecff3f260365859250ca5d35cd9d6e7 Mon Sep 17 00:00:00 2001
From: LordBaryhobal <47377497+LordBaryhobal@users.noreply.github.com>
Date: Fri, 1 Jul 2022 14:44:19 +0200
Subject: [PATCH 08/16] added dark theme stylesheet link to pyfile.html

---
 coverage/htmlfiles/pyfile.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/coverage/htmlfiles/pyfile.html b/coverage/htmlfiles/pyfile.html
index 8fcfc660a..2d3dccd9d 100644
--- a/coverage/htmlfiles/pyfile.html
+++ b/coverage/htmlfiles/pyfile.html
@@ -8,6 +8,9 @@
     <title>Coverage for {{relative_filename|escape}}: {{nums.pc_covered_str}}%</title>
     <link rel="icon" sizes="32x32" href="favicon_32.png">
     <link rel="stylesheet" href="style.css" type="text/css">
+    {% if dark_theme %}
+        <link rel="stylesheet" href="dark.css" type="text/css">
+    {% endif %}
     {% if extra_css %}
         <link rel="stylesheet" href="{{ extra_css }}" type="text/css">
     {% endif %}

From 27578537367133abf550b7ff8eae0102cf6449b8 Mon Sep 17 00:00:00 2001
From: LordBaryhobal <47377497+LordBaryhobal@users.noreply.github.com>
Date: Fri, 1 Jul 2022 15:04:17 +0200
Subject: [PATCH 09/16] removed trailing whitespaces

---
 coverage/html.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/coverage/html.py b/coverage/html.py
index 40c73bf0b..64bce3fb8 100644
--- a/coverage/html.py
+++ b/coverage/html.py
@@ -164,7 +164,7 @@ def __init__(self, cov):
             self.extra_css = os.path.basename(self.config.extra_css)
         else:
             self.extra_css = None
-        
+
         self.dark_theme = self.config.dark_theme
 
         self.data = self.coverage.get_data()
@@ -268,7 +268,7 @@ def make_local_static_report_files(self):
         # The files we provide must always be copied.
         for static in self.STATIC_FILES:
             shutil.copyfile(data_filename(static), os.path.join(self.directory, static))
-        
+
         # If dark theme is on, copy the corresponding css file
         if self.config.dark_theme:
             shutil.copyfile(data_filename("dark.css"), os.path.join(self.directory, "dark.css"))

From b22ceae929f9b0a26efd8c765b850b0fb62ee386 Mon Sep 17 00:00:00 2001
From: LordBaryhobal <47377497+LordBaryhobal@users.noreply.github.com>
Date: Fri, 1 Jul 2022 17:15:18 +0200
Subject: [PATCH 10/16] added css for contexts list

---
 coverage/htmlfiles/dark.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/coverage/htmlfiles/dark.css b/coverage/htmlfiles/dark.css
index a1e97e45d..e1df846f7 100644
--- a/coverage/htmlfiles/dark.css
+++ b/coverage/htmlfiles/dark.css
@@ -49,6 +49,8 @@ body {
 	--line-grey-border: #7683904d;
 	--line-grey-hover: #76839098;
 
+	--line-blue:  #4184e426;
+
 	--outline: #539bf5;
 
 	--overlay: #2d333b;
@@ -304,3 +306,10 @@ a:active, a:focus {
 	outline: 2px solid var(--outline);
 	outline-offset: -2px;
 }
+
+#source p .ctxs,
+#source p input:checked ~ .r label.ctx,
+#source p input ~ .r label.ctx:hover {
+	background-color: var(--line-blue);
+	color: var(--color);
+}

From df8cbfd9f12291ab90a486f940e8311de06d4e23 Mon Sep 17 00:00:00 2001
From: LordBaryhobal <47377497+LordBaryhobal@users.noreply.github.com>
Date: Fri, 1 Jul 2022 18:06:39 +0200
Subject: [PATCH 11/16] changed color of header p.text

---
 coverage/htmlfiles/dark.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/coverage/htmlfiles/dark.css b/coverage/htmlfiles/dark.css
index e1df846f7..bb5065d24 100644
--- a/coverage/htmlfiles/dark.css
+++ b/coverage/htmlfiles/dark.css
@@ -292,6 +292,10 @@ body.indexfile header .content .text {
     flex-basis: 100%;
 }
 
+header p.text {
+    color: var(--color);
+}
+
 body.indexfile #help_panel_wrapper {
 	float: initial;
 	order: 1;

From 793d3481f91872e6e07e587568548e729d98fd29 Mon Sep 17 00:00:00 2001
From: Lord Baryhobal <lordbaryhobal@gmail.com>
Date: Sat, 2 Jul 2022 03:26:04 +0200
Subject: [PATCH 12/16] switched to .scss and implemented theme choice

---
 coverage/config.py                            |   4 +-
 coverage/html.py                              |  21 +-
 coverage/htmlfiles/dark.css                   | 319 -------------
 coverage/htmlfiles/index.html                 |   4 +-
 coverage/htmlfiles/pyfile.html                |   4 +-
 .../htmlfiles/themes/github_dark_dimmed.css   |  86 ++++
 .../htmlfiles/themes/github_dark_dimmed.scss  | 448 ++++++++++++++++++
 7 files changed, 556 insertions(+), 330 deletions(-)
 delete mode 100644 coverage/htmlfiles/dark.css
 create mode 100644 coverage/htmlfiles/themes/github_dark_dimmed.css
 create mode 100644 coverage/htmlfiles/themes/github_dark_dimmed.scss

diff --git a/coverage/config.py b/coverage/config.py
index 81d059f34..cbaf99625 100644
--- a/coverage/config.py
+++ b/coverage/config.py
@@ -218,7 +218,7 @@ def __init__(self):
         self.html_skip_empty = None
         self.html_title = "Coverage report"
         self.show_contexts = False
-        self.dark_theme = False
+        self.theme = None
 
         # Defaults for [xml]
         self.xml_output = "coverage.xml"
@@ -389,7 +389,7 @@ def copy(self):
 
         # [html]
         ('extra_css', 'html:extra_css'),
-        ('dark_theme', 'html:dark_theme', 'boolean'),
+        ('theme', 'html:theme'),
         ('html_dir', 'html:directory'),
         ('html_skip_covered', 'html:skip_covered', 'boolean'),
         ('html_skip_empty', 'html:skip_empty', 'boolean'),
diff --git a/coverage/html.py b/coverage/html.py
index 64bce3fb8..d0ee99b4f 100644
--- a/coverage/html.py
+++ b/coverage/html.py
@@ -144,6 +144,10 @@ class HtmlReporter:
         "favicon_32.png",
     ]
 
+    THEMES = {
+        "github_dark_dimmed": "github_dark_dimmed.css"
+    }
+
     def __init__(self, cov):
         self.coverage = cov
         self.config = self.coverage.config
@@ -165,7 +169,14 @@ def __init__(self, cov):
         else:
             self.extra_css = None
 
-        self.dark_theme = self.config.dark_theme
+        self.theme = None
+
+        if self.config.theme in self.THEMES:
+            self.theme = self.THEMES[self.config.theme]
+
+        elif self.config.theme:
+            self.coverage._message(f"Unknown theme '{self.config.theme}'")
+            self.coverage._message(f"Available themes: {list(self.THEMES.keys())}")
 
         self.data = self.coverage.get_data()
         self.has_arcs = self.data.has_arcs()
@@ -191,7 +202,7 @@ def __init__(self, cov):
             'title': title,
             'time_stamp': format_local_datetime(datetime.datetime.now()),
             'extra_css': self.extra_css,
-            'dark_theme': self.dark_theme,
+            'theme': self.theme,
             'has_arcs': self.has_arcs,
             'show_contexts': self.config.show_contexts,
 
@@ -269,9 +280,9 @@ def make_local_static_report_files(self):
         for static in self.STATIC_FILES:
             shutil.copyfile(data_filename(static), os.path.join(self.directory, static))
 
-        # If dark theme is on, copy the corresponding css file
-        if self.config.dark_theme:
-            shutil.copyfile(data_filename("dark.css"), os.path.join(self.directory, "dark.css"))
+        # If a theme is set, copy the corresponding css file
+        if self.theme:
+            shutil.copyfile(data_filename(os.path.join("themes", self.theme)), os.path.join(self.directory, self.theme))
 
         # Only write the .gitignore file if the directory was originally empty.
         # .gitignore can't be copied from the source tree because it would
diff --git a/coverage/htmlfiles/dark.css b/coverage/htmlfiles/dark.css
deleted file mode 100644
index bb5065d24..000000000
--- a/coverage/htmlfiles/dark.css
+++ /dev/null
@@ -1,319 +0,0 @@
-:root {
-	color-scheme: dark;
-}
-
-body {
-	--bg: #22272e;
-	--bg2: #2d333b;
-	--border: #444c56;
-	--color: #adbac7;
-	--comment: #768390;
-	--string: #96d0ff;
-	--keyword: #f47067;
-
-	--variable: #f69d50;
-
-	--green: #57ab5a;
-	--yellow: #c69026;
-	--red: #c93c37;
-	--grey: #373e47;
-
-	--green-active: #8ddb8c;
-	--yellow-active: #eac55f;
-	--red-active: #f47067;
-	--grey-active: #545d68;
-
-	--btn-border: #cdd9e51a;
-
-	--green-txt: #ffffff;
-	--yellow-txt: #444;
-	--red-txt: #222;
-	--grey-txt: #adbac7;
-
-	--footer: #768390;
-	--hover: #ae7c1426;
-
-	--line-green: #57ab5a26;
-	--line-green-border: #57ab5a4d;
-	--line-green-hover: #57ab5a98;
-
-	--line-yellow: #ae7c1426;
-	--line-yellow-border: #ae7c144d;
-	--line-yellow-hover: #ae7c1498;
-
-	--line-red: #e5534b26;
-	--line-red-border: #e5534b4d;
-	--line-red-hover: #e5534b98;
-
-	--line-grey: #76839026;
-	--line-grey-border: #7683904d;
-	--line-grey-hover: #76839098;
-
-	--line-blue:  #4184e426;
-
-	--outline: #539bf5;
-
-	--overlay: #2d333b;
-	--border-kbd: #636e7b66;
-
-	--highlight: #ffd54f52;
-}
-
-body {
-	background-color: var(--bg);
-	color: var(--color);
-	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
-}
-html > body {
-	font-size: 12px;
-}
-
-html > body.indexfile {
-	font-size: 16px;
-}
-
-p {
-	font-size: inherit;
-	line-height: 20px;
-}
-
-#source {
-	font-family: SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
-}
-
-#scroll_marker {
-	background-color: var(--bg);
-	border-color: var(--border);
-}
-
-#scroll_marker .marker {
-	background-color: var(--border);
-}
-
-header {
-	background-color: var(--bg2);
-	border-bottom-color: var(--border);
-}
-
-header.sticky {
-	height: unset;
-}
-
-#source p .t .com {
-	color: var(--comment);
-}
-
-#source p .t .key {
-	color: var(--keyword);
-	font-weight: normal;
-}
-
-#source p .t .str {
-	color: var(--string);
-}
-
-header button {
-	padding: 5px 16px;
-	font-size: 14px;
-	font-weight: 500;
-	line-height: 20px;
-	vertical-align: middle;
-	border: 1px solid;
-	border-radius: 6px;
-	appearance: none;
-}
-
-header button.run {
-	background-color: var(--green);
-	color: var(--green-txt);
-	border-color: var(--btn-border);
-}
-
-header button.mis {
-	background-color: var(--red);
-	color: var(--red-txt);
-	border-color: var(--btn-border);
-}
-
-header button.exc {
-	background-color: var(--grey);
-	color: var(--grey-txt);
-	border-color: var(--btn-border);
-}
-
-header button.par {
-	background-color: var(--yellow);
-	color: var(--yellow-txt);
-	border-color: var(--btn-border);
-}
-
-header button.run.show_run {
-	background-color: var(--green-active);
-	border-color: var(--btn-border);
-}
-
-header button.mis.show_mis {
-	background-color: var(--red-active);
-	border-color: var(--btn-border);
-}
-
-header button.exc.show_exc {
-	background-color: var(--grey-active);
-	border-color: var(--btn-border);
-}
-
-header button.par.show_par {
-	background-color: var(--yellow-active);
-	border-color: var(--btn-border);
-}
-
-header button:active, header button:focus {
-	outline: 2px solid var(--outline);
-	outline-offset: -2px;
-}
-
-footer .content {
-	color: var(--footer);
-}
-
-#source p .t:hover {
-	background-color: var(--hover);
-}
-
-#source p .t { border-left-color: var(--border); }
-#source p.run .t { border-left-color: var(--line-green-border); }
-#source p.mis .t { border-left-color: var(--line-red-border); }
-#source p.exc .t { border-left-color: var(--line-grey-border); }
-#source p.par .t { border-left-color: var(--line-yellow-border); }
-
-#source p.run.show_run .t { background-color: var(--line-green); }
-#source p.mis.show_mis .t { background-color: var(--line-red); }
-#source p.exc.show_exc .t { background-color: var(--line-grey); }
-#source p.par.show_par .t { background-color: var(--line-yellow); }
-
-#source p.run.show_run .t:hover { background-color: var(--line-green-hover); }
-#source p.mis.show_mis .t:hover { background-color: var(--line-red-hover); }
-#source p.exc.show_exc .t:hover { background-color: var(--line-grey-hover); }
-#source p.par.show_par .t:hover { background-color: var(--line-yellow-hover); }
-
-#help_panel, #source p .annotate.long {
-	background-color: var(--overlay);
-	border-radius: 6px;
-	border-color: var(--border);
-	color: var(--color);
-	padding: 8px 16px;
-}
-
-#help_panel_state + label {
-	cursor: pointer;
-}
-
-kbd {
-	color: var(--color);
-    background-color: var(--bg2);
-	display: inline-block;
-    padding: 3px 5px;
-    font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
-    line-height: 10px;
-    vertical-align: middle;
-    border: 1px solid var(--border-kbd);
-    border-radius: 6px;
-    box-shadow: inset 0 -1px 0 var(--border-kbd);
-}
-
-#help_panel .legend {
-	font-size: 12px;
-	font-weight: 600;
-}
-
-#source p .n.highlight {
-	background-color: var(--highlight);
-}
-
-
-#index th {
-	color: var(--color);
-}
-
-#filter_container input {
-	width: 10em;
-	font-size: 14px;
-	line-height: 20px;
-	padding: 5px 12px;
-	color: var(--color);
-	border: 2px solid var(--border);
-	background-color: var(--bg);
-	border-radius: 6px;
-	vertical-align: middle;
-	transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
-    transition-property: color,background-color,box-shadow,border-color;
-}
-
-#filter_container input:focus:not(:focus-visible) {
-	border-color: var(--outline);
-	outline: none;
-	box-shadow: inset 0 0 0 1px transparent;
-}
-
-#filter_container input:focus-visible {
-	border-color: var(--outline);
-	outline: none;
-	box-shadow: inset 0 0 0 1px var(--outline);
-}
-
-#index th:hover, #index tr.file:hover {
-	background-color: var(--bg2);
-}
-
-#index th[aria-sort="ascending"], #index th[aria-sort="descending"] {
-	background-color: var(--bg2);
-}
-
-#index td, #index th {
-	border-bottom-color: var(--border);
-	padding: 8px;
-}
-
-body.indexfile header .content {
-	display: flex;
-	align-items: center;
-	padding: 16px;
-	gap: 16px;
-    flex-wrap: wrap;
-}
-
-body.indexfile header .content h1 {
-	flex-grow: 1;
-}
-
-body.indexfile header .content .text {
-    margin: 0;
-    order: 2;
-    flex-basis: 100%;
-}
-
-header p.text {
-    color: var(--color);
-}
-
-body.indexfile #help_panel_wrapper {
-	float: initial;
-	order: 1;
-}
-
-body.indexfile #filter_container {
-	float: initial;
-	margin: 0;
-}
-
-a:active, a:focus {
-	outline: 2px solid var(--outline);
-	outline-offset: -2px;
-}
-
-#source p .ctxs,
-#source p input:checked ~ .r label.ctx,
-#source p input ~ .r label.ctx:hover {
-	background-color: var(--line-blue);
-	color: var(--color);
-}
diff --git a/coverage/htmlfiles/index.html b/coverage/htmlfiles/index.html
index c4a5c2c72..c66048cb9 100644
--- a/coverage/htmlfiles/index.html
+++ b/coverage/htmlfiles/index.html
@@ -8,8 +8,8 @@
     <title>{{ title|escape }}</title>
     <link rel="icon" sizes="32x32" href="favicon_32.png">
     <link rel="stylesheet" href="style.css" type="text/css">
-    {% if dark_theme %}
-        <link rel="stylesheet" href="dark.css" type="text/css">
+    {% if theme %}
+        <link rel="stylesheet" href="{{ theme }}" type="text/css">
     {% endif %}
     {% if extra_css %}
         <link rel="stylesheet" href="{{ extra_css }}" type="text/css">
diff --git a/coverage/htmlfiles/pyfile.html b/coverage/htmlfiles/pyfile.html
index 2d3dccd9d..5429423c9 100644
--- a/coverage/htmlfiles/pyfile.html
+++ b/coverage/htmlfiles/pyfile.html
@@ -8,8 +8,8 @@
     <title>Coverage for {{relative_filename|escape}}: {{nums.pc_covered_str}}%</title>
     <link rel="icon" sizes="32x32" href="favicon_32.png">
     <link rel="stylesheet" href="style.css" type="text/css">
-    {% if dark_theme %}
-        <link rel="stylesheet" href="dark.css" type="text/css">
+    {% if theme %}
+        <link rel="stylesheet" href="{{ theme }}" type="text/css">
     {% endif %}
     {% if extra_css %}
         <link rel="stylesheet" href="{{ extra_css }}" type="text/css">
diff --git a/coverage/htmlfiles/themes/github_dark_dimmed.css b/coverage/htmlfiles/themes/github_dark_dimmed.css
new file mode 100644
index 000000000..4dda783b3
--- /dev/null
+++ b/coverage/htmlfiles/themes/github_dark_dimmed.css
@@ -0,0 +1,86 @@
+/* Licensed under the Apache License: http://www.apache.org/licenses/LICENSE-2.0 */
+/* For details: https://github.com/nedbat/coveragepy/blob/master/NOTICE.txt */
+/* Don't edit this .css file. Edit the .scss file instead! */
+:root { color-scheme: dark; }
+
+body { background-color: #22272e; color: #adbac7; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; }
+
+html > body { font-size: 12px; }
+
+html > body.indexfile { font-size: 16px; }
+
+p { font-size: inherit; line-height: 20px; }
+
+a:active, a:focus { outline: 2px solid #539bf5; outline-offset: -2px; }
+
+body.indexfile header h1 { flex-grow: 1; }
+body.indexfile header .content { display: flex; align-items: center; padding: 16px; gap: 16px; flex-wrap: wrap; }
+body.indexfile header .content .text { margin: 0; order: 2; flex-basis: 100%; }
+
+header { background-color: #2d333b; border-bottom-color: #444c56; }
+header p.text { color: #adbac7; }
+header.sticky { height: unset; }
+header.sticky .text { display: none; }
+
+footer .content { color: #768390; }
+
+body.indexfile #filter_container { float: initial; margin: 0; }
+
+#filter_container input { width: 10em; font-size: 14px; line-height: 20px; padding: 5px 12px; color: #adbac7; border: 2px solid #444c56; background-color: #22272e; border-radius: 6px; vertical-align: middle; transition: 80ms cubic-bezier(0.33, 1, 0.68, 1); transition-property: color,background-color,box-shadow,border-color; }
+#filter_container input:focus:not(:focus-visible) { outline: none; box-shadow: inset 0 0 0 1px transparent; }
+#filter_container input:focus-visible { outline: none; box-shadow: inset 0 0 0 1px #539bf5; }
+
+header button { padding: 5px 16px; font-size: 14px; font-weight: 500; line-height: 20px; vertical-align: middle; border: 1px solid; border-radius: 6px; border-color: rgba(205, 217, 229, 0.1); appearance: none; }
+header button:active, header button:focus { outline: 2px solid #539bf5; outline-offset: -2px; }
+header button.run { background-color: #57ab5a; color: #ffffff; }
+header button.run.show_run { background-color: #8ddb8c; border-color: rgba(205, 217, 229, 0.1); }
+header button.mis { background-color: #c93c37; color: #222; }
+header button.mis.show_mis { background-color: #f47067; border-color: rgba(205, 217, 229, 0.1); }
+header button.exc { background-color: #373e47; color: #adbac7; }
+header button.exc.show_exc { background-color: #545d68; border-color: rgba(205, 217, 229, 0.1); }
+header button.par { background-color: #c69026; color: #444; }
+header button.par.show_par { background-color: #eac55f; border-color: rgba(205, 217, 229, 0.1); }
+
+#help_panel { background-color: #2d333b; border-radius: 6px; border-color: #444c56; color: #adbac7; padding: 8px 16px; }
+
+#help_panel_wrapper { float: initial; order: 1; }
+#help_panel_wrapper label { cursor: pointer; }
+
+#help_panel .legend { font-size: 12px; font-weight: 600; }
+
+kbd { color: #adbac7; background-color: #2d333b; display: inline-block; padding: 3px 5px; font: 11px ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; line-height: 10px; vertical-align: middle; border: 1px solid rgba(99, 110, 123, 0.4); border-radius: 6px; box-shadow: inset 0 -1px 0 rgba(99, 110, 123, 0.4); }
+
+#source { font-family: SFMono-Regular, SF Mono, Menlo, Consolas, "Liberation Mono", monospace; }
+#source p .n.highlight { background-color: rgba(255, 213, 79, 0.3); }
+#source p .t { border-left-color: #444c56; }
+#source p .t:hover { background-color: rgba(174, 124, 20, 0.15); }
+#source p .t .com { color: #768390; }
+#source p .t .key { color: #f47067; font-weight: normal; }
+#source p .t .str { color: #96d0ff; }
+#source p.mis .t { border-left-color: rgba(229, 83, 75, 0.3); }
+#source p.mis.show_mis .t { background-color: rgba(229, 83, 75, 0.15); }
+#source p.mis.show_mis .t:hover { background-color: rgba(229, 83, 75, 0.6); }
+#source p.run .t { border-left-color: rgba(87, 171, 90, 0.3); }
+#source p.run.show_run .t { background-color: rgba(87, 171, 90, 0.15); }
+#source p.run.show_run .t:hover { background-color: rgba(87, 171, 90, 0.6); }
+#source p.exc .t { border-left-color: rgba(118, 131, 144, 0.3); }
+#source p.exc.show_exc .t { background-color: rgba(118, 131, 144, 0.15); }
+#source p.exc.show_exc .t:hover { background-color: rgba(118, 131, 144, 0.6); }
+#source p.par .t { border-left-color: rgba(174, 124, 20, 0.3); }
+#source p.par.show_par .t { background-color: rgba(174, 124, 20, 0.15); }
+#source p.par.show_par .t:hover { background-color: rgba(174, 124, 20, 0.6); }
+#source p .annotate { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; color: #adbac7; }
+#source p input ~ .r label.ctx:hover { background-color: rgba(65, 132, 228, 0.15); color: #adbac7; }
+#source p input:checked ~ .r label.ctx { background-color: rgba(65, 132, 228, 0.15); color: #adbac7; }
+#source p label.ctxt { color: #adbac7; }
+#source p .ctxs { background-color: rgba(65, 132, 228, 0.15); color: #adbac7; }
+
+#index { font-family: SFMono-Regular, SF Mono, Menlo, Consolas, "Liberation Mono", monospace; }
+#index td, #index th { border-bottom-color: #444c56; padding: 8px; }
+#index th { color: #adbac7; }
+#index th:hover, #index th[aria-sort="ascending"], #index th[aria-sort="descending"] { background-color: #2d333b; }
+#index tr.total td, #index tr.total_dynamic td { border-top-color: #444c56; }
+#index tr.file:hover { background-color: #2d333b; }
+
+#scroll_marker { background-color: #22272e; border-color: #444c56; }
+#scroll_marker .marker { background-color: #444c56; }
diff --git a/coverage/htmlfiles/themes/github_dark_dimmed.scss b/coverage/htmlfiles/themes/github_dark_dimmed.scss
new file mode 100644
index 000000000..3cccf5662
--- /dev/null
+++ b/coverage/htmlfiles/themes/github_dark_dimmed.scss
@@ -0,0 +1,448 @@
+/* Licensed under the Apache License: http://www.apache.org/licenses/LICENSE-2.0 */
+/* For details: https://github.com/nedbat/coveragepy/blob/master/NOTICE.txt */
+
+// CSS styles for coverage.py HTML reports.
+// GitHub Dark dimmed theme (implemented by Lord Baryhobal)
+
+// When you edit this file, you need to run "make css" to get the CSS file
+// generated, and then check in both the .scss and the .css files.
+
+// When working on the file, this command is useful:
+//      sass --watch --style=compact --sourcemap=none --no-cache coverage/htmlfiles/dark.scss:htmlcov/dark.css
+//
+// OR you can process sass purely in python with `pip install pysass`, then:
+//      pysassc --style=compact coverage/htmlfiles/dark.scss coverage/htmlfiles/dark.css
+
+// Ignore this comment, it's for the CSS output file:
+/* Don't edit this .css file. Edit the .scss file instead! */
+
+//
+// Declare colors and variables
+//
+
+$font-normal:         -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+$font-code:           SFMono-Regular, SF Mono, Menlo, Consolas, "Liberation Mono", monospace;
+$font-kbd:            11px ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+$bg:                  #22272e;
+$bg2:                 #2d333b;
+$border:              #444c56;
+$color:               #adbac7;
+$comment:             #768390;
+$string:              #96d0ff;
+$keyword:             #f47067;
+
+$green:               #57ab5a;
+$yellow:              #c69026;
+$red:                 #c93c37;
+$grey:                #373e47;
+
+$green-active:        #8ddb8c;
+$yellow-active:       #eac55f;
+$red-active:          #f47067;
+$grey-active:         #545d68;
+
+$btn-border:          rgba(#cdd9e5, 0.1);
+
+$green-txt:           #ffffff;
+$yellow-txt:          #444;
+$red-txt:             #222;
+$grey-txt:            #adbac7;
+
+$green2:              $green;
+$yellow2:             #ae7c14;
+$red2:                #e5534b;
+$grey2:               $comment;
+
+$footer:              #768390;
+$line-hover:          rgba($yellow2, 0.15);
+$line-green:          rgba($green2, 0.15);
+$line-green-border:   rgba($green2, 0.30);
+$line-green-hover:    rgba($green2, 0.60);
+
+$line-yellow:         rgba($yellow2, 0.15);
+$line-yellow-border:  rgba($yellow2, 0.30);
+$line-yellow-hover:   rgba($yellow2, 0.60);
+
+$line-red:            rgba($red2, 0.15);
+$line-red-border:     rgba($red2, 0.30);
+$line-red-hover:      rgba($red2, 0.60);
+
+$line-grey:           rgba($grey2, 0.15);
+$line-grey-border:    rgba($grey2, 0.30);
+$line-grey-hover:     rgba($grey2, 0.60);
+
+$line-blue:           rgba(#4184e4, 0.15);
+
+$outline:             #539bf5;
+
+$overlay:             #2d333b;
+$border-kbd:          rgba(#636e7b, 0.4);
+
+$highlight:           rgba(#ffd54f, 0.3);
+
+//
+// Mixins and utilities
+//
+
+// Add visual outline to navigable elements on focus improve accessibility.
+@mixin focus-border {
+    &:active, &:focus {
+        outline: 2px solid $outline;
+        outline-offset: -2px;
+    }
+}
+
+// Page-wide styles
+:root {
+    color-scheme: dark;
+}
+
+body {
+    background-color: $bg;
+    color: $color;
+    font-family: $font-normal;
+}
+html > body {
+    font-size: 12px;
+}
+
+html > body.indexfile {
+    font-size: 16px;
+}
+
+p {
+    font-size: inherit;
+    line-height: 20px;
+}
+
+a {
+    @include focus-border;
+}
+
+// Page structure
+body.indexfile header {
+    h1 {
+        flex-grow: 1;
+    }
+
+    .content {
+        display: flex;
+        align-items: center;
+        padding: 16px;
+        gap: 16px;
+        flex-wrap: wrap;
+
+        .text {
+            margin: 0;
+            order: 2;
+            flex-basis: 100%;
+        }
+    }
+}
+
+header {
+    background-color: $bg2;
+    border-bottom-color: $border;
+
+    p.text {
+        color: $color;
+    }
+
+    &.sticky {
+        height: unset;
+
+        .text {
+            display: none;
+        }
+    }
+}
+
+footer {
+    .content {
+        color: $footer;
+    }
+}
+
+// Header styles
+body.indexfile #filter_container {
+    float: initial;
+    margin: 0;
+}
+
+
+#filter_container {
+    input {
+        width: 10em;
+        font-size: 14px;
+        line-height: 20px;
+        padding: 5px 12px;
+        color: $color;
+        border: 2px solid $border;
+        background-color: $bg;
+        border-radius: 6px;
+        vertical-align: middle;
+        transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+        transition-property: color,background-color,box-shadow,border-color;
+
+        &:focus:not(:focus-visible) {
+            outline: none;
+            box-shadow: inset 0 0 0 1px transparent;
+        }
+
+        &:focus-visible {
+            outline: none;
+            box-shadow: inset 0 0 0 1px $outline;
+        }
+    }
+}
+
+
+header button {
+    padding: 5px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    vertical-align: middle;
+    border: 1px solid;
+    border-radius: 6px;
+    border-color: $btn-border;
+    appearance: none;
+
+    @include focus-border;
+
+    &.run {
+        background-color: $green;
+        color: $green-txt;
+        &.show_run {
+            background-color: $green-active;
+            border-color: $btn-border;
+        }
+    }
+    &.mis {
+        background-color: $red;
+        color: $red-txt;
+        &.show_mis {
+            background-color: $red-active;
+            border-color: $btn-border;
+        }
+    }
+    &.exc {
+        background-color: $grey;
+        color: $grey-txt;
+        &.show_exc {
+            background-color: $grey-active;
+            border-color: $btn-border;
+        }
+    }
+    &.par {
+        background-color: $yellow;
+        color: $yellow-txt;
+        &.show_par {
+            background-color: $yellow-active;
+            border-color: $btn-border;
+        }
+    }
+}
+
+// Yellow post-it things.
+%popup {
+    background-color: $overlay;
+    border-radius: 6px;
+    border-color: $border;
+    color: $color;
+    padding: 8px 16px;
+}
+
+// Help panel
+#help_panel_wrapper {
+    float: initial;
+    order: 1;
+
+    label {
+        cursor: pointer;
+    }
+}
+
+#help_panel {
+    @extend %popup;
+
+    .legend {
+        font-size: 12px;
+        font-weight: 600;
+    }
+}
+
+kbd {
+    color: $color;
+    background-color: $bg2;
+    display: inline-block;
+    padding: 3px 5px;
+    font: $font-kbd;
+    line-height: 10px;
+    vertical-align: middle;
+    border: 1px solid $border-kbd;
+    border-radius: 6px;
+    box-shadow: inset 0 -1px 0 $border-kbd;
+}
+
+
+// Source file styles
+
+// The slim bar at the left edge of the source lines, colored by coverage.
+$border-indicator-width: .2em;
+
+#source {
+    font-family: $font-code;
+
+    p {
+        // position relative makes position:absolute pop-ups appear in the right place.
+        .n {
+            &.highlight {
+                background-color: $highlight;
+            }
+        }
+
+        .t {
+            border-left-color: $border;
+
+            &:hover {
+                background-color: $line-hover;
+            }
+
+            // Syntax coloring
+            .com {
+                color: $comment;
+            }
+            .key {
+                color: $keyword;
+                font-weight: normal;
+            }
+            .str {
+                color: $string;
+            }
+        }
+
+        &.mis {
+            .t {
+                border-left-color: $line-red-border;
+            }
+
+            &.show_mis .t {
+                background-color: $line-red;
+
+                &:hover {
+                    background-color: $line-red-hover;
+                }
+            }
+        }
+
+        &.run {
+            .t {
+                border-left-color: $line-green-border;
+            }
+
+            &.show_run .t {
+                background-color: $line-green;
+
+                &:hover {
+                    background-color: $line-green-hover;
+                }
+            }
+        }
+
+        &.exc {
+            .t {
+                border-left-color: $line-grey-border;
+            }
+
+            &.show_exc .t {
+                background-color: $line-grey;
+
+                &:hover {
+                    background-color: $line-grey-hover;
+                }
+            }
+        }
+
+        &.par {
+            .t {
+                border-left-color: $line-yellow-border;
+            }
+
+            &.show_par .t {
+                background-color: $line-yellow;
+
+                &:hover {
+                    background-color: $line-yellow-hover;
+                }
+            }
+
+        }
+
+        .annotate {
+            font-family: $font-normal;
+            color: $color;
+        }
+
+        input {
+            & ~ .r label.ctx {
+                &:hover {
+                    background-color: $line-blue;
+                    color: $color;
+                }
+            }
+
+            &:checked ~ .r label.ctx {
+                background-color: $line-blue;
+                color: $color;
+            }
+        }
+
+        label.ctxt {
+            color: $color;
+        }
+
+        .ctxs {
+            background-color: $line-blue;
+            color: $color;
+        }
+    }
+}
+
+
+// index styles
+#index {
+    font-family: $font-code;
+
+    td, th {
+        border-bottom-color: $border;
+        padding: 8px;
+    }
+    th {
+        color: $color;
+
+        &:hover,
+        &[aria-sort="ascending"], &[aria-sort="descending"] {
+            background-color: $bg2;
+        }
+    }
+
+    tr.total td,
+    tr.total_dynamic td {
+        border-top-color: $border;
+    }
+    tr.file:hover {
+        background-color: $bg2;
+    }
+}
+
+// scroll marker styles
+#scroll_marker {
+    background-color: $bg;
+    border-color: $border;
+
+    .marker {
+        background-color: $border;
+    }
+}

From d83184b696835702bf508790c067960f2b7f6a52 Mon Sep 17 00:00:00 2001
From: LordBaryhobal <47377497+LordBaryhobal@users.noreply.github.com>
Date: Sat, 2 Jul 2022 03:33:43 +0200
Subject: [PATCH 13/16] fixed typo in comment of github_dark_dimmed.scss

---
 coverage/htmlfiles/themes/github_dark_dimmed.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/coverage/htmlfiles/themes/github_dark_dimmed.scss b/coverage/htmlfiles/themes/github_dark_dimmed.scss
index 3cccf5662..b7db4f2ab 100644
--- a/coverage/htmlfiles/themes/github_dark_dimmed.scss
+++ b/coverage/htmlfiles/themes/github_dark_dimmed.scss
@@ -8,10 +8,10 @@
 // generated, and then check in both the .scss and the .css files.
 
 // When working on the file, this command is useful:
-//      sass --watch --style=compact --sourcemap=none --no-cache coverage/htmlfiles/dark.scss:htmlcov/dark.css
+//      sass --watch --style=compact --sourcemap=none --no-cache coverage/htmlfiles/themes/github_dark_dimmed.scss:coverage/htmfiles/themes/github_dark_dimmed.css
 //
 // OR you can process sass purely in python with `pip install pysass`, then:
-//      pysassc --style=compact coverage/htmlfiles/dark.scss coverage/htmlfiles/dark.css
+//      pysassc --style=compact coverage/htmlfiles/themes/github_dark_dimmed.scss coverage/htmlfiles/themes/github_dark_dimmed.css
 
 // Ignore this comment, it's for the CSS output file:
 /* Don't edit this .css file. Edit the .scss file instead! */

From 14b67528a1206ab3b7100e81451b759e2ab54666 Mon Sep 17 00:00:00 2001
From: LordBaryhobal <47377497+LordBaryhobal@users.noreply.github.com>
Date: Sat, 2 Jul 2022 03:44:22 +0200
Subject: [PATCH 14/16] fixed line too long...

---
 coverage/html.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/coverage/html.py b/coverage/html.py
index d0ee99b4f..4131dd7b0 100644
--- a/coverage/html.py
+++ b/coverage/html.py
@@ -282,7 +282,9 @@ def make_local_static_report_files(self):
 
         # If a theme is set, copy the corresponding css file
         if self.theme:
-            shutil.copyfile(data_filename(os.path.join("themes", self.theme)), os.path.join(self.directory, self.theme))
+            shutil.copyfile(
+                data_filename(os.path.join("themes", self.theme)),
+                os.path.join(self.directory, self.theme))
 
         # Only write the .gitignore file if the directory was originally empty.
         # .gitignore can't be copied from the source tree because it would

From f785b767454795e376b7cc1ae6977a59c37bb2ba Mon Sep 17 00:00:00 2001
From: Lord Baryhobal <lordbaryhobal@gmail.com>
Date: Sat, 2 Jul 2022 14:28:44 +0200
Subject: [PATCH 15/16] changed setup.py and igor.py to include (s)css themes

---
 igor.py  | 1 +
 setup.py | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/igor.py b/igor.py
index 10c82cb41..150f92857 100644
--- a/igor.py
+++ b/igor.py
@@ -336,6 +336,7 @@ def check_files(root, patterns, **kwargs):
     check_files("coverage", ["*.py"])
     check_files("coverage/ctracer", ["*.c", "*.h"])
     check_files("coverage/htmlfiles", ["*.html", "*.scss", "*.css", "*.js"])
+    check_files("coverage/htmlfiles/themes", ["*.scss", "*.css"])
     check_files("tests", ["*.py"])
     check_files("tests", ["*,cover"], trail_white=False)
     check_files("tests/js", ["*.js", "*.html"])
diff --git a/setup.py b/setup.py
index 67aedc1bf..9b7e5ebf8 100644
--- a/setup.py
+++ b/setup.py
@@ -91,7 +91,7 @@ def better_set_verbosity(v):
 
     package_data={
         'coverage': [
-            'htmlfiles/*.*',
+            'htmlfiles/**/*.*',
             'fullcoverage/*.*',
         ]
     },

From e01f75d85b4b3dc0cff0f6eae83879464746c9bf Mon Sep 17 00:00:00 2001
From: Lord Baryhobal <lordbaryhobal@gmail.com>
Date: Sat, 2 Jul 2022 14:54:15 +0200
Subject: [PATCH 16/16] fixed help_panel_wrapper

---
 coverage/htmlfiles/themes/github_dark_dimmed.css  | 3 ++-
 coverage/htmlfiles/themes/github_dark_dimmed.scss | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/coverage/htmlfiles/themes/github_dark_dimmed.css b/coverage/htmlfiles/themes/github_dark_dimmed.css
index 4dda783b3..e2ce33e94 100644
--- a/coverage/htmlfiles/themes/github_dark_dimmed.css
+++ b/coverage/htmlfiles/themes/github_dark_dimmed.css
@@ -43,7 +43,8 @@ header button.par.show_par { background-color: #eac55f; border-color: rgba(205,
 
 #help_panel { background-color: #2d333b; border-radius: 6px; border-color: #444c56; color: #adbac7; padding: 8px 16px; }
 
-#help_panel_wrapper { float: initial; order: 1; }
+body.indexfile #help_panel_wrapper { float: initial; order: 1; }
+
 #help_panel_wrapper label { cursor: pointer; }
 
 #help_panel .legend { font-size: 12px; font-weight: 600; }
diff --git a/coverage/htmlfiles/themes/github_dark_dimmed.scss b/coverage/htmlfiles/themes/github_dark_dimmed.scss
index b7db4f2ab..ba53f900f 100644
--- a/coverage/htmlfiles/themes/github_dark_dimmed.scss
+++ b/coverage/htmlfiles/themes/github_dark_dimmed.scss
@@ -255,10 +255,12 @@ header button {
 }
 
 // Help panel
-#help_panel_wrapper {
+body.indexfile #help_panel_wrapper {
     float: initial;
     order: 1;
+}
 
+#help_panel_wrapper {
     label {
         cursor: pointer;
     }