diff --git a/README.md b/README.md
index 8ed6435..7b0fea2 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,21 @@
+website: https://github.com/Boruch-Baum/uBO-Scope
+
+This is a fork of [Raymond Hill](https://github.com/gorhill/)'s
+[uBO-Scope](https://github.com/gorhill/uBO-Scope), for the purpose of
+improving its visibility for users who opt for a dark firefox theme, or
+any theme for which the default font color is light. For this git
+branch, *light-theme*, minor changes were made to a single file
+[popup.css](./css/popup.css), which retains the original's preference
+for a white background, while making the foreground colors friendly
+for dark firefox themes. A second file,
+[popup.css-dark-theme](./css/popup.css-dark-theme), applies a dark
+theme to the add-on. In order to use the dark theme, just copy the
+file over popup.css. A backup of the popup.css file has already been
+created as [popup.css-light-theme](./css/popup.css-light-theme). On
+the complementary git branch *dark-theme*, that step has already been taken.
+
+Also, the visibility of the popup's two icons was improved.
+
 ## Preamble
 
 The mindset of this project is as follow:
@@ -18,7 +36,7 @@ A network request to a remote server which has a different base domain name than
 
 A 3rd-party exposure score is derived not only from the number of distinct third parties on a web page, but also from the ubiquitousness of each of these distinct third parties.
 
-The ubiquitousness of a specific 3rd party is measured according to how frequently this 3rd party is used on web pages you visit. This means the ubiquitousness of a 3rd party will be representative of your browsing history and whether the 3rd party was blocked or not on the pages you visited. 
+The ubiquitousness of a specific 3rd party is measured according to how frequently this 3rd party is used on web pages you visit. This means the ubiquitousness of a 3rd party will be representative of your browsing history and whether the 3rd party was blocked or not on the pages you visited.
 
 ## Status
 
diff --git a/css/popup.css b/css/popup.css
index a6c73ed..f36b304 100644
--- a/css/popup.css
+++ b/css/popup.css
@@ -9,6 +9,7 @@ body {
 .svgIcon {
     display: inline-block;
     padding: 0;
+    mix-blend-mode: exclusion;
 }
 svg {
     height: 100%;
@@ -16,6 +17,7 @@ svg {
 }
 #topPane {
     background-color: white;
+    color: black;
     left: 0;
     position: fixed;
     right: 0;
@@ -85,6 +87,7 @@ body.nodata .nodata {
 }
 #domain3rdDetails {
     background-color: #f6f6ff;
+    color: black;
     border: 1px solid #e5e5ff;
     bottom: 2px;
     display: flex;
@@ -117,6 +120,7 @@ body.nodata .nodata {
 }
 #domain3rdDetails #authority {
     background-color: #e5e5ff;
+    color: black;
     position: relative;
 }
 #domain3rdDetails #authority .details {
@@ -163,6 +167,7 @@ body.oneDay #domain3rdDetails .oneDay {
 }
 #heatmaps {
     background-color: white;
+    color: black;
 }
 body.nodata #heatmaps {
     display: none;
@@ -232,6 +237,7 @@ body.theoretical #heatmaps .heatmap.theoretical {
 }
 .hmcell[data-domain] {
     background-color: #eee;
+    color: black;
 }
 .hmcell.blocked {
     color: #777;
@@ -254,6 +260,7 @@ body.theoretical #heatmaps .heatmap.theoretical {
 }
 .hmcell[data-domain].blocked .hmcolor {
     background-color: #eee;
+    color: black;
 }
 .hmlabel {
     display: none;
@@ -266,6 +273,7 @@ body.theoretical #heatmaps .heatmap.theoretical {
 }
 #heatmaps.list .hmcell {
     background-color: #f8f8f8;
+    color: black;
     display: block;
     height: 28px;
     margin: 0;
diff --git a/css/popup.css-dark-theme b/css/popup.css-dark-theme
new file mode 100644
index 0000000..d8c9ab0
--- /dev/null
+++ b/css/popup.css-dark-theme
@@ -0,0 +1,301 @@
+body {
+    box-sizing: content-box;
+    font-size: 14px;
+    margin: 0;
+    min-width: 289px;
+    overflow-x: hidden;
+    padding: 0 1px 1px 1px;
+}
+.svgIcon {
+    display: inline-block;
+    padding: 0;
+    mix-blend-mode: exclusion;
+}
+svg {
+    height: 100%;
+    width: 100%;
+}
+#topPane {
+    background-color: black;
+    color: white;
+    left: 0;
+    position: fixed;
+    right: 0;
+    z-index: 1024;
+}
+body.nodata #topPane {
+    display: none;
+}
+#domain1st {
+    border: 0;
+    margin: 0;
+    padding: 0.5rem;
+    text-align: center;
+}
+#domain1st > div:first-of-type {
+    font-size: 1.1rem;
+    padding: 0 0.5em;
+    white-space: nowrap;
+}
+#domain1st > div:last-of-type {
+    color: #888;
+    font-size: 0.8rem;
+    padding: 0 0.5em;
+    white-space: nowrap;
+}
+#scores {
+    border: 0;
+    margin: 0;
+    padding: 0 0 1rem 0;
+    text-align: center;
+}
+#scores .scores {
+    margin: 0;
+    overflow: hidden;
+}
+#scores .scores .score {
+    cursor: pointer;
+    display: inline-block;
+    line-height: 1;
+    margin: 0;
+}
+#scores .scores .score.actual {
+    color: #444;
+    font-size: 7rem;
+}
+#scores .scores .score.theoretical {
+    color: #ccc;
+    font-size: 1.6rem;
+}
+body.theoretical #scores .scores .score.actual {
+    color: #ddd;
+}
+body.theoretical #scores .scores .score.theoretical {
+    color: #222;
+}
+body .nodata {
+    color: #aaa;
+    display: none;
+    font-size: 2em;
+    line-height: 1.8;
+    padding: 1em;
+    text-align: center;
+    white-space: nowrap;
+}
+body.nodata .nodata {
+    display: block;
+}
+#domain3rdDetails {
+    background-color: #020202;
+    color: white;
+    border: 1px solid #aaaaaa;
+    bottom: 2px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    left: 2px;
+    overflow: hidden;
+    padding: 0;
+    padding-bottom: 3px;
+    position: absolute;
+    right: 2px;
+    text-align: start;
+    top: 2px;
+}
+#domain3rdDetails.hide:not(.sticky) {
+    display: none;
+}
+#domain3rdDetails p {
+    margin: 0;
+}
+#domain3rdDetails ul {
+    margin: 0;
+    padding: 0 2em;
+}
+#domain3rdDetails > div {
+    padding: 0 3px;
+}
+#domain3rdDetails .important {
+    font-size: 110%;
+}
+#domain3rdDetails #authority {
+    background-color: #020202;
+    color: white;
+    position: relative;
+}
+#domain3rdDetails #authority .details {
+    color: #666;
+    font-size: 90%;
+    padding: 0.25rem;
+}
+#domain3rdDetails #authority .details.hide {
+    visibility: hidden;
+}
+#domain3rdDetails #authority .details .category:not(:empty):before {
+    content: '(';
+}
+#domain3rdDetails #authority .details .category:not(:empty):after {
+    content: ')';
+}
+#domain3rdDetails #authority .removeIcon {
+    cursor: pointer;
+    height: 12px;
+    position: absolute;
+    right: 3px;
+    top: 0;
+    width: 12px;
+}
+#domain3rdDetails #authority .removeIcon svg path {
+    stroke: black;
+}
+#domain3rdDetails:not(.sticky) #authority .removeIcon {
+    display: none;
+}
+#domain3rdDetails .aExposure,
+#domain3rdDetails .tExposure,
+#domain3rdDetails .since {
+    font-weight: bold;
+}
+#domain3rdDetails .oneDay {
+    display: none;
+}
+body.oneDay #domain3rdDetails .manyDays {
+    display: none;
+}
+body.oneDay #domain3rdDetails .oneDay {
+    display: inline;
+}
+#heatmaps {
+    background-color: black;
+    color: white;
+}
+body.nodata #heatmaps {
+    display: none;
+}
+#heatmaps .togglerBar {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 15px;
+}
+#heatmaps .togglerBar .svgIcon {
+    cursor: pointer;
+    height: 100%;
+    width: 15px;
+}
+#heatmaps .togglerBar .svgIcon > svg path {
+    fill: #eee;
+}
+#heatmaps .togglerBar .svgIcon:hover > svg path {
+    fill: #aaa !important;
+}
+#heatmaps .togglerBar .togglerIcon > svg#th {
+    display: none;
+}
+#heatmaps.list .togglerBar .togglerIcon > svg#th-list {
+    display: none;
+}
+#heatmaps.list .togglerBar .togglerIcon > svg#th {
+    display: block;
+}
+#heatmaps.hideBlocked .togglerBar .filterIcon > svg path {
+    fill: #444;
+}
+#heatmaps .heatmap {
+    border: none;
+}
+body #heatmaps .heatmap.theoretical {
+    display: none;
+}
+body.theoretical #heatmaps .heatmap.actual {
+    display: none;
+}
+body.theoretical #heatmaps .heatmap.theoretical {
+    display: block;
+}
+.hmrow {
+    border: none;
+    box-sizing: border-box;
+    height: 28px;
+    margin-bottom: 1px;
+    position: relative;
+    white-space: nowrap;
+}
+.hmcell {
+    border: 0;
+    box-sizing: border-box;
+    color: black;
+    display: inline-block;
+    font-size: 95%;
+    height: 100%;
+    line-height: 28px;
+    margin: 0;
+    margin-right: 1px;
+    overflow: hidden;
+    text-align: center;
+    vertical-align: middle;
+}
+.hmcell[data-domain] {
+    background-color: #eee;
+    color: white;
+}
+.hmcell.blocked {
+    color: #777;
+}
+#heatmaps.hideBlocked .hmcell.blocked {
+    display: none;
+}
+.hmrow .hmcell:last-of-type {
+    margin: 0;
+}
+.hmrow:last-of-type {
+    margin: 0;
+}
+.hmcolor {
+    border: 0;
+    box-sizing: border-box;
+    display: inline-block;
+    height: 100%;
+    width: 28px;
+}
+.hmcell[data-domain].blocked .hmcolor {
+    background-color: #eee;
+    color: white;
+}
+.hmlabel {
+    display: none;
+    margin: 0 0.25rem;
+    position: relative;
+}
+#heatmaps.list .hmrow {
+    height: auto;
+    margin: 0;
+}
+#heatmaps.list .hmcell {
+    background-color: #020202;
+    color: white;
+    display: block;
+    height: 28px;
+    margin: 0;
+    margin-top: 1px;
+    padding: 0;
+    text-align: right;
+    width: auto;
+}
+#heatmaps .hmcell:hover {
+    opacity: 0.8;
+}
+#heatmaps.list .hmcell:not([data-domain]) {
+    display: none;
+}
+#heatmaps.list .hmrow:first-of-type .hmcell:first-of-type {
+    margin: 0;
+}
+#heatmaps.list .hmcolor {
+    height: 28px;
+    left: 0;
+    position: absolute;
+}
+#heatmaps.list .hmlabel {
+    display: inline;
+}
diff --git a/css/popup.css-light-theme b/css/popup.css-light-theme
new file mode 100644
index 0000000..f36b304
--- /dev/null
+++ b/css/popup.css-light-theme
@@ -0,0 +1,301 @@
+body {
+    box-sizing: content-box;
+    font-size: 14px;
+    margin: 0;
+    min-width: 289px;
+    overflow-x: hidden;
+    padding: 0 1px 1px 1px;
+}
+.svgIcon {
+    display: inline-block;
+    padding: 0;
+    mix-blend-mode: exclusion;
+}
+svg {
+    height: 100%;
+    width: 100%;
+}
+#topPane {
+    background-color: white;
+    color: black;
+    left: 0;
+    position: fixed;
+    right: 0;
+    z-index: 1024;
+}
+body.nodata #topPane {
+    display: none;
+}
+#domain1st {
+    border: 0;
+    margin: 0;
+    padding: 0.5rem;
+    text-align: center;
+}
+#domain1st > div:first-of-type {
+    font-size: 1.1rem;
+    padding: 0 0.5em;
+    white-space: nowrap;
+}
+#domain1st > div:last-of-type {
+    color: #888;
+    font-size: 0.8rem;
+    padding: 0 0.5em;
+    white-space: nowrap;
+}
+#scores {
+    border: 0;
+    margin: 0;
+    padding: 0 0 1rem 0;
+    text-align: center;
+}
+#scores .scores {
+    margin: 0;
+    overflow: hidden;
+}
+#scores .scores .score {
+    cursor: pointer;
+    display: inline-block;
+    line-height: 1;
+    margin: 0;
+}
+#scores .scores .score.actual {
+    color: #444;
+    font-size: 7rem;
+}
+#scores .scores .score.theoretical {
+    color: #ccc;
+    font-size: 1.6rem;
+}
+body.theoretical #scores .scores .score.actual {
+    color: #ddd;
+}
+body.theoretical #scores .scores .score.theoretical {
+    color: #222;
+}
+body .nodata {
+    color: #aaa;
+    display: none;
+    font-size: 2em;
+    line-height: 1.8;
+    padding: 1em;
+    text-align: center;
+    white-space: nowrap;
+}
+body.nodata .nodata {
+    display: block;
+}
+#domain3rdDetails {
+    background-color: #f6f6ff;
+    color: black;
+    border: 1px solid #e5e5ff;
+    bottom: 2px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    left: 2px;
+    overflow: hidden;
+    padding: 0;
+    padding-bottom: 3px;
+    position: absolute;
+    right: 2px;
+    text-align: start;
+    top: 2px;
+}
+#domain3rdDetails.hide:not(.sticky) {
+    display: none;
+}
+#domain3rdDetails p {
+    margin: 0;
+}
+#domain3rdDetails ul {
+    margin: 0;
+    padding: 0 2em;
+}
+#domain3rdDetails > div {
+    padding: 0 3px;
+}
+#domain3rdDetails .important {
+    font-size: 110%;
+}
+#domain3rdDetails #authority {
+    background-color: #e5e5ff;
+    color: black;
+    position: relative;
+}
+#domain3rdDetails #authority .details {
+    color: #666;
+    font-size: 90%;
+    padding: 0.25rem;
+}
+#domain3rdDetails #authority .details.hide {
+    visibility: hidden;
+}
+#domain3rdDetails #authority .details .category:not(:empty):before {
+    content: '(';
+}
+#domain3rdDetails #authority .details .category:not(:empty):after {
+    content: ')';
+}
+#domain3rdDetails #authority .removeIcon {
+    cursor: pointer;
+    height: 12px;
+    position: absolute;
+    right: 3px;
+    top: 0;
+    width: 12px;
+}
+#domain3rdDetails #authority .removeIcon svg path {
+    stroke: black;
+}
+#domain3rdDetails:not(.sticky) #authority .removeIcon {
+    display: none;
+}
+#domain3rdDetails .aExposure,
+#domain3rdDetails .tExposure,
+#domain3rdDetails .since {
+    font-weight: bold;
+}
+#domain3rdDetails .oneDay {
+    display: none;
+}
+body.oneDay #domain3rdDetails .manyDays {
+    display: none;
+}
+body.oneDay #domain3rdDetails .oneDay {
+    display: inline;
+}
+#heatmaps {
+    background-color: white;
+    color: black;
+}
+body.nodata #heatmaps {
+    display: none;
+}
+#heatmaps .togglerBar {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 15px;
+}
+#heatmaps .togglerBar .svgIcon {
+    cursor: pointer;
+    height: 100%;
+    width: 15px;
+}
+#heatmaps .togglerBar .svgIcon > svg path {
+    fill: #eee;
+}
+#heatmaps .togglerBar .svgIcon:hover > svg path {
+    fill: #aaa !important;
+}
+#heatmaps .togglerBar .togglerIcon > svg#th {
+    display: none;
+}
+#heatmaps.list .togglerBar .togglerIcon > svg#th-list {
+    display: none;
+}
+#heatmaps.list .togglerBar .togglerIcon > svg#th {
+    display: block;
+}
+#heatmaps.hideBlocked .togglerBar .filterIcon > svg path {
+    fill: #444;
+}
+#heatmaps .heatmap {
+    border: none;
+}
+body #heatmaps .heatmap.theoretical {
+    display: none;
+}
+body.theoretical #heatmaps .heatmap.actual {
+    display: none;
+}
+body.theoretical #heatmaps .heatmap.theoretical {
+    display: block;
+}
+.hmrow {
+    border: none;
+    box-sizing: border-box;
+    height: 28px;
+    margin-bottom: 1px;
+    position: relative;
+    white-space: nowrap;
+}
+.hmcell {
+    border: 0;
+    box-sizing: border-box;
+    color: black;
+    display: inline-block;
+    font-size: 95%;
+    height: 100%;
+    line-height: 28px;
+    margin: 0;
+    margin-right: 1px;
+    overflow: hidden;
+    text-align: center;
+    vertical-align: middle;
+}
+.hmcell[data-domain] {
+    background-color: #eee;
+    color: black;
+}
+.hmcell.blocked {
+    color: #777;
+}
+#heatmaps.hideBlocked .hmcell.blocked {
+    display: none;
+}
+.hmrow .hmcell:last-of-type {
+    margin: 0;
+}
+.hmrow:last-of-type {
+    margin: 0;
+}
+.hmcolor {
+    border: 0;
+    box-sizing: border-box;
+    display: inline-block;
+    height: 100%;
+    width: 28px;
+}
+.hmcell[data-domain].blocked .hmcolor {
+    background-color: #eee;
+    color: black;
+}
+.hmlabel {
+    display: none;
+    margin: 0 0.25rem;
+    position: relative;
+}
+#heatmaps.list .hmrow {
+    height: auto;
+    margin: 0;
+}
+#heatmaps.list .hmcell {
+    background-color: #f8f8f8;
+    color: black;
+    display: block;
+    height: 28px;
+    margin: 0;
+    margin-top: 1px;
+    padding: 0;
+    text-align: right;
+    width: auto;
+}
+#heatmaps .hmcell:hover {
+    opacity: 0.8;
+}
+#heatmaps.list .hmcell:not([data-domain]) {
+    display: none;
+}
+#heatmaps.list .hmrow:first-of-type .hmcell:first-of-type {
+    margin: 0;
+}
+#heatmaps.list .hmcolor {
+    height: 28px;
+    left: 0;
+    position: absolute;
+}
+#heatmaps.list .hmlabel {
+    display: inline;
+}