diff --git a/extension/data/options/index.css b/extension/data/options/index.css
index e137c8f..6257c5c 100644
--- a/extension/data/options/index.css
+++ b/extension/data/options/index.css
@@ -1,5 +1,31 @@
+:root {
+  --color: #444;
+  --bg-color: #fff;
+  --color-admin: #444;
+  --color-desc: #2f2f2f;
+  --bg-desc: #e8e8e8;
+  --color-note: #2f2f2f;
+  --bg-note: #e8e8e8;
+  --bg-admin: #ffffed;
+  --border-admin: #e8ec3a;
+  --color-light: #636363;
+  --bg-color-light: #f5f5f5;
+  --bg-focus: #eff6f9;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color: #d1d2cc;
+    --bg-color: #272d37;
+    --color-light: #f5f5f5;
+    --bg-color-light: #343946;
+    --bg-focus: #454b5d;
+  }
+}
+
 body {
   min-width: 600px;
+  color: var(--color);
+  background-color: var(--bg-color);
 }
 @media (pointer: none), (pointer: coarse) {
   body {
@@ -16,13 +42,12 @@ body {
   }
   textarea {
     padding: 5px;
-    border: solid 1px #ccc;
   }
   button,
   input[type=submit],
   input[type=button] {
     height: 24px;
-    color: rgb(68, 68, 68);
+    color: #444;
     background-image: linear-gradient(rgb(237, 237, 237), rgb(237, 237, 237) 38%, rgb(222, 222, 222));
     box-shadow: rgba(0, 0, 0, 0.08) 0 1px 0, rgba(255, 255, 255, 0.75) 0 1px 2px inset;
     text-shadow: rgb(240, 240, 240) 0 1px 0;
@@ -32,13 +57,25 @@ body {
     opacity: 0.5;
   }
 }
+button,
+input[type=submit],
+input[type=button] {
+  cursor: pointer;
+}
+textarea {
+  color: var(--color-light);
+  background-color: var(--bg-color-light);
+  border: none;
+  width: 100%;
+  outline: none;
+}
+textarea:focus {
+  background-color: var(--bg-focus);
+}
 h1 {
   font-size: 15px;
   font-weight: normal;
 }
-textarea {
-  width: 100%;
-}
 .mode-2,
 .mode {
   display: grid;
@@ -59,13 +96,13 @@ textarea {
 #toggle-whitelist-desc,
 #toggle-blacklist-desc {
   cursor: pointer;
-  color: #2f2f2f;
-  background-color: #e8e8e8;
+  color: var(--color-desc);
+  background-color: var(--bg-desc);
   padding: 1px 4px;
 }
 .note {
-  background: #e8e8e8;
-  color: #2f2f2f;
+  background-color: var(--bg-note);
+  color: var(--color-note);
   padding: 5px;
   margin: 0 0 10px 0;
 }
@@ -102,21 +139,9 @@ textarea {
   }
 }
 .admin {
-  background-color: #ffffed;
-  border: solid 1px #e8ec3a;
+  color: var(--color-admin);
+  background-color: var(--bg-admin);
+  border: solid 1px var(--border-admin);
   padding: 10px;
   margin: 15px 0;
 }
-
-@media (prefers-color-scheme: dark) {
-  body,
-  textarea,
-  .note {
-    background-color: #313131;
-    color: #bfbfbf;
-  }
-  .admin {
-    background-color: #545709;
-    color: #bfbfbf;
-  }
-}
diff --git a/extension/data/popup/index.css b/extension/data/popup/index.css
index 5dc89a8..70549fa 100644
--- a/extension/data/popup/index.css
+++ b/extension/data/popup/index.css
@@ -1,3 +1,18 @@
+:root {
+  --color: #000;
+  --bg-color: #fff;
+  --color-light: #636363;
+  --bg-color-light: #f5f5f5;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color: #d1d2cc;
+    --bg-color: #272d37;
+    --color-light: #f5f5f5;
+    --bg-color-light: #343946;
+  }
+}
+
 [hbox] {
   display: flex;
   flex-direction: row;
@@ -23,8 +38,8 @@
 }
 
 body {
-  color: #000;
-  background-color: #fff;
+  color: var(--color);
+  background-color: var(--bg-color);
   font-family: "Helvetica Neue", Helvetica, arial, sans-serif;
   font-size: 13px;
   width: 600px;
@@ -50,13 +65,13 @@ input[type=text] {
   width: 100%;
 }
 input[type=text]:read-only {
-  color: #636363;
+  color: var(--color-light);
   background-color: transparent;
 }
 input {
   outline: none;
-  background-color: #fff;
-  color: #000;
+  background-color: var(--bg-color);
+  color: var(--color);
   border: none;
   box-sizing: border-box;
   height: 28px;
@@ -82,18 +97,23 @@ select {
   -moz-appearance: none;
   user-select: none;
   outline: none;
-  color: #000;
-  background: #fff url(list.svg) no-repeat center right 4px;
+  color: var(--color);
+  background: var(--bg-color) url(list-black.svg) no-repeat center right 4px;
   background-size: 8px;
   font-size: 13px;
   border-radius: 0;
   padding: 6px 16px 6px 4px;
   border: none;
 }
+@media (prefers-color-scheme: dark) {
+  select {
+    background-image: url(list-white.svg);
+  }
+}
 #list {
   overflow: auto;
   height: 240px;
-  color: #000;
+  color: var(--color);
   background-position: top 120px center;
   background-repeat: no-repeat;
   font-size: 11px;
@@ -107,8 +127,8 @@ select {
 }
 #list th {
   height: 32px;
-  color: #000;
-  background-color: #f5f5f5;
+  color: var(--color);
+  background-color: var(--bg-color-light);
   white-space: nowrap;
   padding-left: 10px;
 }
@@ -122,12 +142,12 @@ select {
   position: relative;
 }
 #list tbody tr:nth-child(odd) {
-  color: #000;
-  background-color: #fff;
+  color: var(--color);
+  background-color: var(--bg-color);
 }
 #list tbody tr:nth-child(even) {
-  color: #000;
-  background-color: #f5f5f5;
+  color: var(--color);
+  background-color: var(--bg-color-light);
 }
 #list[data-loading=false] tbody:empty::before {
   content: attr(data-content);
@@ -158,7 +178,7 @@ select {
 }
 
 #filter {
-  background-color: #f5f5f5;
+  background-color: var(--bg-color-light);
 }
 #filter th {
   height: 32px;
@@ -188,30 +208,37 @@ select {
 
 [data-cmd="test"] {
   background-color: #4d72b7;
-  color: #fff;
+  color: var(--bg-color);
 }
 [data-cmd="container"] {
   background-color: #92773c;
-  color: #fff;
+  color: var(--bg-color);
 }
 [data-cmd="window"],
 [data-cmd="apply"] {
   background-color: #3c923c;
-  color: #fff;
+  color: var(--bg-color);
 }
 
 [data-cmd="reset"] {
-  color: #fff;
+  color: var(--bg-color);
   background-color: #e6850b;
 }
 
 [data-cmd="reload"],
 [data-cmd="options"],
 [data-cmd="refresh"] {
-  color: #000;
-  background-color: #f5f5f5;
+  color: var(--color);
+  background-color: var(--bg-color-light);
 }
 
+#explore {
+  color: var(--color) !important;
+  background-color: var(--bg-color) !important;
+}
+#explore .title {
+  color: var(--color) !important;
+}
 #explore:not([data-loaded="true"]) {
   height: 18px;
 }
@@ -221,7 +248,7 @@ body[data-android="true"] [data-cmd="window"] {
   display: none;
 }
 #view {
-  background-color: #f5f5f5;
+  background-color: var(--bg-color-light);
   padding: 5px 0;
 }
 #view td {
@@ -238,7 +265,7 @@ body[data-android="true"] [data-cmd="window"] {
   bottom: 95px;
   right: 10px;
   background-color: #e68509;
-  color: #fff;
+  color: var(--bg-color);
   padding: 2px 5px;
   box-shadow: 0 0 2px #ca7403;
 }
@@ -249,15 +276,3 @@ body[data-android="true"] [data-cmd="window"] {
 .hide {
   visibility: hidden;
 }
-
-@media (prefers-color-scheme: dark) {
-  body,
-  th,
-  select,
-  input,
-  #view,
-  table {
-    background-color: #313131;
-    color: #bfbfbf;
-  }
-}
diff --git a/extension/data/popup/list.svg b/extension/data/popup/list-black.svg
similarity index 100%
rename from extension/data/popup/list.svg
rename to extension/data/popup/list-black.svg
diff --git a/extension/data/popup/list-white.svg b/extension/data/popup/list-white.svg
new file mode 100644
index 0000000..f883d99
--- /dev/null
+++ b/extension/data/popup/list-white.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 48 48" height="48px" id="Layer_3" version="1.1" viewBox="0 0 48 48" width="48px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="#d1d2cc" points="0,12.438 48,12.438 24,35.562 "/></svg>