diff --git a/src/img/ui-https64.png b/src/img/ui-https64.png
index 1cf26b5..7eb0940 100644
Binary files a/src/img/ui-https64.png and b/src/img/ui-https64.png differ
diff --git a/src/img/ui-reload64.png b/src/img/ui-reload64.png
index dfb0e47..e05097d 100644
Binary files a/src/img/ui-reload64.png and b/src/img/ui-reload64.png differ
diff --git a/src/ui/common.css b/src/ui/common.css
new file mode 100644
index 0000000..4f5aec4
--- /dev/null
+++ b/src/ui/common.css
@@ -0,0 +1,129 @@
+/*
+ * Copyright (C) 2005-2022 Giorgio Maone <https://maone.net>
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+:root, :root[data-theme="dark"] {
+  --accent-color: #d12027;
+  --fg-color1: #ccc;
+  --fg-color2: #fff;
+  --text-color: #ddd;
+  --bg-color1: #000;
+  --bg-color2: #212026;
+  --form-color1: #333;
+  --form-color2: #111;
+  --focus-color: #4007;
+  --tab-color1: #6668;
+  --tab-color2: #3348;
+  --form-check-color: var(--bg-color2);
+  --form-control-color: var(--accent-color);
+  --hilite-color: #8008;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --fg-color1: #555;
+    --fg-color2: #000;
+    --text-color: #333;
+    --bg-color1: #ddd;
+    --bg-color2: #fff;
+    --form-color1: #ccc;
+    --form-color2: #eee;
+    --tab-color1: #ddda;
+    --tab-color2: #8888;
+    --focus-color: #faa7;
+  }
+}
+
+body {
+  background-color: var(--bg-color2);
+  color: var(--text-color);
+  font-size: 12px;
+  font-family: sistem-ui, sans-serif;
+  font: use-system-font;
+  image-rendering: -webkit-optimize-contrast;
+}
+
+html.mobile > body {
+  font-family: Inter, sans-serif;
+  font-size: 4mm;
+}
+
+html.mobile .desktop {
+  display: none !important;
+}
+
+html:not(.tor) .tor, html.tor .not-tor {
+  display: none;
+}
+html.tor .tor, html:not(.tor) .not-tor {
+  display: initial;
+}
+
+a, a:visited {
+  color: var(--accent-color);
+}
+
+button {
+  appearance: none;
+  background: var(--form-color1);
+  border: 1px solid var(--fg-color1);
+  border-radius: .5em;
+  color: var(--text-color);
+  font-weight: bold;
+  padding: .6em;
+  cursor: pointer;
+}
+
+input[type="text"], textarea {
+  color: var(--text-color);
+  background-color: var(--bg-color2);
+  border: 1px solid var(--fg-color1);
+  padding: 0.5em;
+  margin: 0.5em;
+}
+
+input[type="checkbox"]:not(.https-only, .temp) {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: .4em;
+  font: inherit;
+  color: currentColor;
+  width: 1.2em;
+  height: 1.2em;
+  border: 0.15em solid currentColor;
+  border-radius: 0.2em;
+  transform: translateY(-0.075em);
+  display: grid;
+  place-content: center;
+  background-color: var(--form-check-color);
+}
+
+input[type="checkbox"]:not(.https-only, .temp)::before {
+  content: "";
+  width: 0.65em;
+  height: 0.65em;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  transform: scale(0);
+  transform-origin: bottom left;
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em var(--form-check-color);
+
+}
+input[type="checkbox"]:not(.https-only, .temp):checked::before {
+  transform: scale(1);
+}
+input[type="checkbox"]:not(.https-only, .temp):checked {
+  background-color: var(--form-control-color);
+  border-color: var(--form-control-color);
+}
+
+input:disabled, button:disabled, select:disabled {
+  filter: grayscale(100%);
+  opacity: .7;
+}
+
+:disabled {
+  cursor: not-allowed !important;
+}
diff --git a/src/ui/options.css b/src/ui/options.css
index 2b58a30..a731881 100644
--- a/src/ui/options.css
+++ b/src/ui/options.css
@@ -6,7 +6,7 @@
 
 /* @import url("chrome://browser/content/extension.css"); */
 body {
-  background: #eee url("/img/noscript-options.png") no-repeat fixed top right;
+  background: url("/img/noscript-options.png") no-repeat fixed top right;
   background-size: 8em;
   padding: 0 2em 0 0;
   margin: 0.5em 0.5em 0.5em 0.5em;
@@ -25,15 +25,15 @@ body {
   text-align: right;
 }
 #header h1 {
-  color: #d12027;
-  text-shadow: 0.06em 0.06em 0.06em rgba(0,0,0,.5);
+  color: var(--accent-color);
+  text-shadow: 0.06em 0.06em 0.06em #0008;
   font-size: 2em;
   padding: 0;
   margin: 0;
   text-align: right;
 }
 #version {
-  color: #444;
+  color: var(--text-color);
   font-size: 0.75em;
   padding: 0;
   margin: 0 0 0.5em;
@@ -163,15 +163,15 @@ button.add {
 }
 
 .flextabs__content, .flextabs__toggle[aria-expanded="true"] {
-  background-color: rgba(200, 200, 200, .5) !important;
-  border: 0 solid #888;
+  background-color: var(--tab-color2) !important;
+  border: 0 solid var(--fg--color1);
 }
 
 .flextabs__toggle {
   -moz-appearance: none;
   border-width: 0 !important;
   margin: 0 4px 0 0;
-  background: #ccc;
+  background-color: var(--tab-color1);
   outline-width: 0 !important;
   border-radius: 1em 1em 0 0;
   padding: .4em .8em;
@@ -199,3 +199,7 @@ button.add {
 .mozwebext #xss-options {
   display: block;
 }
+
+#presets .sites > .site.customizing {
+	background: transparent !important;
+}
\ No newline at end of file
diff --git a/src/ui/prompt.css b/src/ui/prompt.css
index 63042fb..5465cc2 100644
--- a/src/ui/prompt.css
+++ b/src/ui/prompt.css
@@ -4,17 +4,20 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+
+@import url("./common.css");
+
+
 html {
-  background: linear-gradient(to bottom, #f7f7f7 0%,#ccc 41%,#aaa 90%,#a88 100%) no-repeat;
+  background: linear-gradient(to bottom, var(--form-color1) 0, var(--bg-color2) 41%, var(--bg-color1) 90%, var(--focus-color) 100%) no-repeat;
+  background-color: var(--bg-color1);
 }
 
 body {
   bottom: .8em;
-  font-family: sans-serif;
-  font-size: 12px;
-  color: #222;
   margin: 0px;
   padding: .8em;
+  background-color: transparent;
 }
 
 html.mobile > body {
@@ -29,7 +32,7 @@ html.mobile > body {
   text-align: left;
   margin: 0;
   line-height: 2em;
-  color: #d12027;
+  color: var(--accent-color);
   z-index: 500;
   padding: .8em .8em 0 .8em;
   display: block;
@@ -69,7 +72,7 @@ html.mobile > body {
   font-size: 1em;
   text-align: justify;
   margin-bottom: 1.2em;
-  background: rgba(255,255,255,.5);
+  background: var(--focus-color);
 }
 #message.multiline p {
   margin: .1em;
diff --git a/src/ui/ui.css b/src/ui/ui.css
index 9e81d55..2cc1ff2 100644
--- a/src/ui/ui.css
+++ b/src/ui/ui.css
@@ -4,43 +4,16 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-
- :root {
-  --accent-color: #d00a25;
-  --form-check-color: white;
-  --form-control-color: var(--accent-color);
-  --form-control-disabled: #959495;
-}
+ @import url("./common.css");
 
 body {
-  font-family: sistem-ui, sans-serif;
-  font: -moz-use-system-font;
-  font-size: 12px;
-  min-width: 600px;
-  image-rendering: -webkit-optimize-contrast;
-}
-
-a, a:visited {
-  color: var(--accent-color);
+  min-width: 700px;
 }
 
 html.mobile > body {
-  font-family: Inter, sans-serif;
-  font-size: 4mm;
   min-width: auto;
 }
 
-html.mobile .desktop {
-  display: none !important;
-}
-
-html:not(.tor) .tor, html.tor .not-tor {
-  display: none;
-}
-html.tor .tor, html:not(.tor) .not-tor {
-  display: initial;
-}
-
 .opt-group {
   display: flex;
   flex-flow: row wrap;
@@ -103,7 +76,7 @@ html.tor .tor, html:not(.tor) .not-tor {
      z-index: 1000;
      top: 1em;
      left: 4em !important;
-     text-shadow: 1px 1px white, -1px -1px white;
+     text-shadow: 1px 1px var(--bg-color2), -1px -1px var(--bg-color2);
    }
 
    #sites .presets input.preset:checked + label {
@@ -144,7 +117,7 @@ html.tor .tor, html:not(.tor) .not-tor {
   td.presets {
     white-space: nowrap !important;
     vertical-align: bottom;
-    border: 1px solid black;
+    border: 1px solid var(--fg-color2);
   }
   .url > span > span {
     white-space: wrap;
@@ -170,6 +143,7 @@ html.tor .tor, html:not(.tor) .not-tor {
 
 .capsContext select {
   display: none;
+  margin: 0 1em;
 }
 
 .contextual .capsContext select {
@@ -180,7 +154,7 @@ html.tor .tor, html:not(.tor) .not-tor {
   position: absolute;
   outline: 3px solid #888;
   z-index: 1000;
-  background-color: white;
+  background-color: var(--bg-color2);
   transform-origin: bottom center;
   transition: transform .5s;
 }
@@ -203,7 +177,6 @@ input[type="checkbox"] {
 }
 .sites {
   border: 0;
-  background: white;
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
@@ -218,14 +191,14 @@ input[type="checkbox"] {
 }
 
 html:not(.mobile) .sites > tr.site:focus-within {
-  background: #ccc;
+  box-shadow: 0 0 2px 2px var(--focus-color);
 }
-.sites > tr:nth-child(even) {background: #fff}
-.sites > tr:nth-child(odd) {background: #eee}
+.sites > tr:nth-child(even) { background: var(--form-color1) }
+.sites > tr:nth-child(odd) { background: var(--bg-color2) }
 
 .site .url {
     padding: 0 0 0 0.5em;
-    color: #000;
+    color: var(--fg-color2);
     vertical-align: top;
     width: 80%;
 }
@@ -244,13 +217,13 @@ html:not(.mobile) .sites > tr.site:focus-within {
 .site .url[data-key="host"] .domain,
 .site .url[data-key="host"] .sub,
 .site .url[data-key="unsafe"] span {
-  color: #a00;
+  color: var(--accent-color);
 }
 
 .site .url[data-key="secure"] .domain,
 .site .url[data-key="secure"] .sub,
 .site .url[data-key="full"] span {
-  color: black;
+  color: var(--fg-color2)
 }
 
 .site .url[data-key="full"] span,
@@ -284,7 +257,7 @@ label.https-only {
 }
 
 .preset label.preset.override {
-  color: #555;
+  color: var(--text-color);
 }
 
 [data-preset="UNTRUSTED"] .https-only, [data-preset="DEFAULT"] .https-only {
@@ -313,7 +286,7 @@ span.preset {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
-  background: url(/img/ui-no64.png) no-repeat center left;
+  background: url(/img/ui-no64.png) no-repeat center;
   background-size: 1.8em;
   width: 2em;
   height: 2em;
@@ -340,8 +313,9 @@ span.preset {
   opacity: 1;
   transform: none;
   min-width: 9.38em;
-  background-color: #ddd;
-  border-radius: 1em;
+  background-color: var(--bg-color1);
+  background-position-x: .1em;
+  border-radius: .5em;
 }
 
 .presets input.preset:focus {
@@ -359,7 +333,7 @@ span.preset {
   overflow: hidden;
   display: none;
   text-transform: uppercase;
-  color: #000;
+  color: var(--fg-color2);
   opacity: .6;
   position: absolute;
   left: 0em;
@@ -385,7 +359,6 @@ span.preset {
 }
 
 :focus-visible, .cap:focus-within {
-  --focus-color: #faa7;
   outline: 0;
   filter:
     drop-shadow(2px 2px 2px var(--focus-color))
@@ -394,14 +367,6 @@ span.preset {
     drop-shadow(-2px -2px 2px var(--focus-color));
 }
 
-:disabled {
-  cursor: not-allowed !important;
-}
-
-input.preset:disabled {
-  filter: grayscale(100%);
-}
-
 input.preset[value="T_TRUSTED"] {
   background-image: url(/img/ui-temp64.png);
 }
@@ -457,17 +422,17 @@ input.preset:checked ~ input.temp {
 }
 
 #presets input.preset:not(:checked) {
-  background-color: #ccc;
+  background-color: var(--form-color1);
 }
 
 .customizing input.preset:checked, #presets input.preset:checked {
-  background-color: #eee;
+  background-color: var(--form-color2);
 }
 
 .customizer fieldset {
-  background-color: #eee;
+  background-color: var(--form-color2);
   margin: 0 0.06em 0.06em 0.06em;
-  box-shadow: #ccc 0 2px 2px;
+  box-shadow: var(--form-color1) 0 2px 2px;
   position: relative;
 }
 
@@ -481,11 +446,7 @@ input.preset:checked ~ input.temp {
 }
 
 .customizing, .customizer {
-  background-color: #ccc !important;
-}
-
-#presets .customizing, #presets .customizer {
-  background-color: #ddd !important;
+  background-color: var(--form-color1) !important;
 }
 
 #presets legend select, #presets legend button {
@@ -518,7 +479,7 @@ span.cap {
 
 span.cap.needed {
   font-weight: bold;
-  background-color: #c88;
+  background-color: var(--hilite-color);
 }
 
 fieldset {
@@ -571,7 +532,7 @@ legend {
 }
 
 #xssChoices option {
-  background: white;
+  background: var(--bg-color2);
 }
 
 #xssChoices option.block {
@@ -579,44 +540,5 @@ legend {
 }
 
 #xssChoices option.allow {
-  color: #222;
+  color: var(--text-color);
 }
-
-input[type="checkbox"]:not(.https-only, .temp) {
-  -webkit-appearance: none;
-  appearance: none;
-  margin: .4em;
-  font: inherit;
-  color: currentColor;
-  width: 1.2em;
-  height: 1.2em;
-  border: 0.15em solid currentColor;
-  border-radius: 0.2em;
-  transform: translateY(-0.075em);
-  display: grid;
-  place-content: center;
-  background-color: var(--form-check-color);
-}
-
-input[type="checkbox"]:not(.https-only, .temp)::before {
-  content: "";
-  width: 0.65em;
-  height: 0.65em;
-  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-  transform: scale(0);
-  transform-origin: bottom left;
-  transition: 120ms transform ease-in-out;
-  box-shadow: inset 1em 1em var(--form-check-color);
-
-}
-input[type="checkbox"]:not(.https-only, .temp):checked::before {
-  transform: scale(1);
-}
-input[type="checkbox"]:not(.https-only, .temp):checked {
-  background-color: var(--form-control-color);
-  border-color: var(--form-control-color);
-}
-input[type="checkbox"]:disabled {
-  --form-control-color: var(--form-control-disabled);
-  color: var(--form-control-disabled);
-}
\ No newline at end of file