diff --git a/extension/css/popup-black.css b/extension/css/popup-black.css
deleted file mode 100644
index 7477b0e1b..000000000
--- a/extension/css/popup-black.css
+++ /dev/null
@@ -1,218 +0,0 @@
-/* this is to reset almost everything under the popup to a sane value */
-
-#rikaichan-window,
-#rikaichan-window * {
-  background: transparent;
-  border: none !important;
-  border-spacing: 0;
-  color: #fff;
-  font: normal 14px sans-serif;
-  height: auto;
-  letter-spacing: normal;
-  margin: 0;
-  padding: 0;
-  text-align: left;
-  text-decoration: none;
-  text-indent: 0;
-  text-transform: none;
-  visibility: visible;
-  white-space: normal;
-  width: auto;
-  word-spacing: normal;
-}
-
-#rikaichan-window {
-  background: #000;
-  border: 1px solid #d0d0d0 !important;
-  border-radius: 5px;
-  left: 5px;
-  min-width: 100px;
-  padding: 4px;
-  position: absolute;
-  top: 5px;
-  z-index: 99992;
-}
-
-/* used for word definitions */
-
-#rikaichan-window .w-kanji {
-  color: #7070e0;
-  font-size: 18px;
-  margin-right: 0.7em;
-}
-
-#rikaichan-window .w-kana {
-  color: #20a020;
-  font-size: 18px;
-}
-
-#rikaichan-window .w-conj {
-  color: #a0a0a0;
-  font-size: 12px;
-}
-
-#rikaichan-window .w-def {
-  font-size: 13px;
-}
-
-#rikaichan-window .w-title {
-  background: #303030;
-  color: #e0e0e0;
-  font-size: 10px;
-  padding: 2px;
-}
-
-#rikaichan-window .w-na-tb td {
-  padding-right: 0.8em;
-  vertical-align: top;
-}
-
-/* used for kanji information */
-
-#rikaichan-window .k-main-tb {
-  width: 300px;
-}
-
-#rikaichan-window .k-kanji {
-  color: #fff;
-  font-family: serif;
-  font-size: 48px;
-}
-
-#rikaichan-window .k-eigo {
-  font-size: 12px;
-}
-
-/* kanji: readings */
-
-#rikaichan-window .k-yomi {
-  color: #20a020;
-  font-size: 14px;
-  margin: 4px 0;
-}
-
-#rikaichan-window .k-yomi-hi {
-  border: 1px solid red;
-  color: #7070e0;
-}
-
-#rikaichan-window .k-yomi-ti {
-  color: #e0e0e0;
-  font-size: 11px;
-}
-
-/* kanji radical, grade, freq, strokes box */
-
-#rikaichan-window .k-abox-tb {
-  clear: right;
-  float: right;
-  margin-bottom: 4px;
-  width: 120px;
-}
-
-#rikaichan-window .k-abox-r {
-  background: #505050;
-  color: #e0e0e0;
-  font-size: 12px;
-  padding: 1px 4px;
-  text-align: center;
-}
-
-#rikaichan-window .k-abox-g {
-  background: #303030;
-  color: #f0f0f0;
-  font-size: 12px;
-  padding: 1px 4px;
-  text-align: center;
-}
-
-#rikaichan-window .k-abox-f {
-  background: #303030;
-  color: #f0f0f0;
-  font-size: 12px;
-  padding: 1px 4px;
-  text-align: center;
-}
-
-#rikaichan-window .k-abox-s {
-  background: #505050;
-  color: #e0e0e0;
-  font-size: 12px;
-  padding: 1px 4px;
-  text-align: center;
-}
-
-/* kanji components box */
-
-#rikaichan-window .k-bbox-tb {
-  clear: right;
-  float: right;
-  margin-bottom: 4px;
-  width: 120px;
-}
-
-#rikaichan-window .k-bbox-0a {
-  background: #505050;
-  color: #e0e0e0;
-  font-size: 11px;
-  padding: 1px 3px;
-  vertical-align: top;
-}
-
-#rikaichan-window .k-bbox-0b {
-  background: #505050;
-  color: #e0e0e0;
-  font-size: 11px;
-  padding: 1px 3px;
-  vertical-align: top;
-}
-
-#rikaichan-window .k-bbox-1a {
-  background: #303030;
-  color: #f0f0f0;
-  font-size: 11px;
-  padding: 1px 3px;
-  vertical-align: top;
-}
-
-#rikaichan-window .k-bbox-1b {
-  background: #303030;
-  color: #f0f0f0;
-  font-size: 11px;
-  padding: 1px 3px;
-  vertical-align: top;
-}
-
-/* kanji: misc index */
-
-#rikaichan-window .k-mix-tb {
-  width: 100%;
-}
-
-#rikaichan-window .k-mix-td0 {
-  background: #505050;
-  color: #f0f0f0;
-  font-size: 12px;
-}
-
-#rikaichan-window .k-mix-td1 {
-  background: #303030;
-  color: #e0e0e0;
-  font-size: 12px;
-}
-
-#rikaichan-window .q-w {
-  border-right: 1px dotted #b0b0b0 !important;
-  min-width: 300px;
-  padding: 0 2px;
-  vertical-align: top;
-}
-
-#rikaichan-window .q-k {
-  padding: 0 2px;
-  vertical-align: top;
-}
-
-#rikaichan-window .small-info {
-  font: small-caption;
-}
diff --git a/extension/css/popup-blue.css b/extension/css/popup-blue.css
deleted file mode 100644
index f04780fca..000000000
--- a/extension/css/popup-blue.css
+++ /dev/null
@@ -1,218 +0,0 @@
-/* this is to reset almost everything under the popup to a sane value */
-
-#rikaichan-window,
-#rikaichan-window * {
-  background: transparent;
-  border: none !important;
-  border-spacing: 0;
-  color: #fff;
-  font: normal 14px sans-serif;
-  height: auto;
-  letter-spacing: normal;
-  margin: 0;
-  padding: 0;
-  text-align: left;
-  text-decoration: none;
-  text-indent: 0;
-  text-transform: none;
-  visibility: visible;
-  white-space: normal;
-  width: auto;
-  word-spacing: normal;
-}
-
-#rikaichan-window {
-  background: #5c73b8;
-  border: 1px solid #d0d0d0 !important;
-  border-radius: 5px;
-  left: 5px;
-  min-width: 100px;
-  padding: 4px;
-  position: absolute;
-  top: 5px;
-  z-index: 99992;
-}
-
-/* used for word definitions */
-
-#rikaichan-window .w-kanji {
-  color: #b7e7ff;
-  font-size: 18px;
-  margin-right: 0.7em;
-}
-
-#rikaichan-window .w-kana {
-  color: #c0ffc0;
-  font-size: 18px;
-}
-
-#rikaichan-window .w-conj {
-  color: #ffe0a0;
-  font-size: 12px;
-}
-
-#rikaichan-window .w-def {
-  font-size: 13px;
-}
-
-#rikaichan-window .w-title {
-  background: #4c63a8;
-  color: #fff;
-  font-size: 10px;
-  padding: 2px;
-}
-
-#rikaichan-window .w-na-tb td {
-  padding-right: 0.8em;
-  vertical-align: top;
-}
-
-/* used for kanji information */
-
-#rikaichan-window .k-main-tb {
-  width: 300px;
-}
-
-#rikaichan-window .k-kanji {
-  color: #b7e7ff;
-  font-family: serif;
-  font-size: 48px;
-}
-
-#rikaichan-window .k-eigo {
-  font-size: 12px;
-}
-
-/* kanji: readings */
-
-#rikaichan-window .k-yomi {
-  color: #c0ffc0;
-  font-size: 14px;
-  margin: 4px 0;
-}
-
-#rikaichan-window .k-yomi-hi {
-  border: 1px solid red;
-  color: #a0d0ff;
-}
-
-#rikaichan-window .k-yomi-ti {
-  color: #e7ffe7;
-  font-size: 11px;
-}
-
-/* kanji radical, grade, freq, strokes box */
-
-#rikaichan-window .k-abox-tb {
-  clear: right;
-  float: right;
-  margin-bottom: 4px;
-  width: 120px;
-}
-
-#rikaichan-window .k-abox-r {
-  background: #5a70b5;
-  color: #fff;
-  font-size: 12px;
-  padding: 1px 4px;
-  text-align: center;
-}
-
-#rikaichan-window .k-abox-g {
-  background: #4c63a8;
-  color: #b7e7ff;
-  font-size: 12px;
-  padding: 1px 4px;
-  text-align: center;
-}
-
-#rikaichan-window .k-abox-f {
-  background: #4c63a8;
-  color: #b7e7ff;
-  font-size: 12px;
-  padding: 1px 4px;
-  text-align: center;
-}
-
-#rikaichan-window .k-abox-s {
-  background: #5a70b5;
-  color: #fff;
-  font-size: 12px;
-  padding: 1px 4px;
-  text-align: center;
-}
-
-/* kanji components box */
-
-#rikaichan-window .k-bbox-tb {
-  clear: right;
-  float: right;
-  margin-bottom: 4px;
-  width: 120px;
-}
-
-#rikaichan-window .k-bbox-0a {
-  background: #5a70b5;
-  color: #fff;
-  font-size: 11px;
-  padding: 1px 3px;
-  vertical-align: top;
-}
-
-#rikaichan-window .k-bbox-0b {
-  background: #5a70b5;
-  color: #fff;
-  font-size: 11px;
-  padding: 1px 3px;
-  vertical-align: top;
-}
-
-#rikaichan-window .k-bbox-1a {
-  background: #4c63a8;
-  color: #b7e7ff;
-  font-size: 11px;
-  padding: 1px 3px;
-  vertical-align: top;
-}
-
-#rikaichan-window .k-bbox-1b {
-  background: #4c63a8;
-  color: #b7e7ff;
-  font-size: 11px;
-  padding: 1px 3px;
-  vertical-align: top;
-}
-
-/* kanji: misc index */
-
-#rikaichan-window .k-mix-tb {
-  width: 100%;
-}
-
-#rikaichan-window .k-mix-td0 {
-  background: #5a70b5;
-  color: #b7e7ff;
-  font-size: 12px;
-}
-
-#rikaichan-window .k-mix-td1 {
-  background: #4c63a8;
-  color: #fff;
-  font-size: 12px;
-}
-
-#rikaichan-window .q-w {
-  border-right: 1px dotted #b0b0b0 !important;
-  min-width: 300px;
-  padding: 0 2px;
-  vertical-align: top;
-}
-
-#rikaichan-window .q-k {
-  padding: 0 2px;
-  vertical-align: top;
-}
-
-#rikaichan-window .small-info {
-  font: small-caption;
-}
diff --git a/extension/css/popup-lightblue.css b/extension/css/popup-lightblue.css
deleted file mode 100644
index 5fcee70f2..000000000
--- a/extension/css/popup-lightblue.css
+++ /dev/null
@@ -1,218 +0,0 @@
-/* this is to reset almost everything under the popup to a sane value */
-
-#rikaichan-window,
-#rikaichan-window * {
-  background: transparent;
-  border: none !important;
-  border-spacing: 0;
-  color: #000;
-  font: normal 14px sans-serif;
-  height: auto;
-  letter-spacing: normal;
-  margin: 0;
-  padding: 0;
-  text-align: left;
-  text-decoration: none;
-  text-indent: 0;
-  text-transform: none;
-  visibility: visible;
-  white-space: normal;
-  width: auto;
-  word-spacing: normal;
-}
-
-#rikaichan-window {
-  background: #e6f4ff;
-  border: 1px solid #d0d0d0 !important;
-  border-radius: 5px;
-  left: 5px;
-  min-width: 100px;
-  padding: 4px;
-  position: absolute;
-  top: 5px;
-  z-index: 99992;
-}
-
-/* used for word definitions */
-
-#rikaichan-window .w-kanji {
-  color: #3082bf;
-  font-size: 18px;
-  margin-right: 0.7em;
-}
-
-#rikaichan-window .w-kana {
-  color: #00b366;
-  font-size: 18px;
-}
-
-#rikaichan-window .w-conj {
-  color: #808080;
-  font-size: 12px;
-}
-
-#rikaichan-window .w-def {
-  font-size: 13px;
-}
-
-#rikaichan-window .w-title {
-  background: #bfe4ff;
-  color: #000;
-  font-size: 10px;
-  padding: 2px;
-}
-
-#rikaichan-window .w-na-tb td {
-  padding-right: 0.8em;
-  vertical-align: top;
-}
-
-/* used for kanji information */
-
-#rikaichan-window .k-main-tb {
-  width: 300px;
-}
-
-#rikaichan-window .k-kanji {
-  color: #000;
-  font-family: serif;
-  font-size: 48px;
-}
-
-#rikaichan-window .k-eigo {
-  font-size: 12px;
-}
-
-/* kanji: readings */
-
-#rikaichan-window .k-yomi {
-  color: #00b366;
-  font-size: 14px;
-  margin: 4px 0;
-}
-
-#rikaichan-window .k-yomi-hi {
-  border: 1px solid red;
-  color: #00868b;
-}
-
-#rikaichan-window .k-yomi-ti {
-  color: #000;
-  font-size: 11px;
-}
-
-/* kanji radical, grade, freq, strokes box */
-
-#rikaichan-window .k-abox-tb {
-  clear: right;
-  float: right;
-  margin-bottom: 4px;
-  width: 120px;
-}
-
-#rikaichan-window .k-abox-r {
-  background: #dff1ff;
-  color: #003d6b;
-  font-size: 12px;
-  padding: 1px 4px;
-  text-align: center;
-}
-
-#rikaichan-window .k-abox-g {
-  background: #fff;
-  color: #003d6b;
-  font-size: 12px;
-  padding: 1px 4px;
-  text-align: center;
-}
-
-#rikaichan-window .k-abox-f {
-  background: #fff;
-  color: #003d6b;
-  font-size: 12px;
-  padding: 1px 4px;
-  text-align: center;
-}
-
-#rikaichan-window .k-abox-s {
-  background: #dff1ff;
-  color: #003d6b;
-  font-size: 12px;
-  padding: 1px 4px;
-  text-align: center;
-}
-
-/* kanji components box */
-
-#rikaichan-window .k-bbox-tb {
-  clear: right;
-  float: right;
-  margin-bottom: 4px;
-  width: 120px;
-}
-
-#rikaichan-window .k-bbox-0a {
-  background: #dff1ff;
-  color: #003d6b;
-  font-size: 11px;
-  padding: 1px 3px;
-  vertical-align: top;
-}
-
-#rikaichan-window .k-bbox-0b {
-  background: #dff1ff;
-  color: #003d6b;
-  font-size: 11px;
-  padding: 1px 3px;
-  vertical-align: top;
-}
-
-#rikaichan-window .k-bbox-1a {
-  background: #fff;
-  color: #003d6b;
-  font-size: 11px;
-  padding: 1px 3px;
-  vertical-align: top;
-}
-
-#rikaichan-window .k-bbox-1b {
-  background: #fff;
-  color: #003d6b;
-  font-size: 11px;
-  padding: 1px 3px;
-  vertical-align: top;
-}
-
-/* kanji: misc index */
-
-#rikaichan-window .k-mix-tb {
-  width: 100%;
-}
-
-#rikaichan-window .k-mix-td0 {
-  background: #dff1ff;
-  color: #003d6b;
-  font-size: 12px;
-}
-
-#rikaichan-window .k-mix-td1 {
-  background: #fff;
-  color: #003d6b;
-  font-size: 12px;
-}
-
-#rikaichan-window .q-w {
-  border-right: 1px dotted #b0b0b0 !important;
-  min-width: 300px;
-  padding: 0 2px;
-  vertical-align: top;
-}
-
-#rikaichan-window .q-k {
-  padding: 0 2px;
-  vertical-align: top;
-}
-
-#rikaichan-window .small-info {
-  font: small-caption;
-}
diff --git a/extension/css/popup-yellow.css b/extension/css/popup-yellow.css
deleted file mode 100644
index d317b6cda..000000000
--- a/extension/css/popup-yellow.css
+++ /dev/null
@@ -1,218 +0,0 @@
-/* this is to reset almost everything under the popup to a sane value */
-
-#rikaichan-window,
-#rikaichan-window * {
-  background: transparent;
-  border: none !important;
-  border-spacing: 0;
-  color: #000;
-  font: normal 14px sans-serif;
-  height: auto;
-  letter-spacing: normal;
-  margin: 0;
-  padding: 0;
-  text-align: left;
-  text-decoration: none;
-  text-indent: 0;
-  text-transform: none;
-  visibility: visible;
-  white-space: normal;
-  width: auto;
-  word-spacing: normal;
-}
-
-#rikaichan-window {
-  background: #ffffbf;
-  border: 1px solid #d0d0d0 !important;
-  border-radius: 5px;
-  left: 5px;
-  min-width: 100px;
-  padding: 4px;
-  position: absolute;
-  top: 5px;
-  z-index: 99992;
-}
-
-/* used for word definitions */
-
-#rikaichan-window .w-kanji {
-  color: #7070e0;
-  font-size: 18px;
-  margin-right: 0.7em;
-}
-
-#rikaichan-window .w-kana {
-  color: #20a020;
-  font-size: 18px;
-}
-
-#rikaichan-window .w-conj {
-  color: #a0a0a0;
-  font-size: 12px;
-}
-
-#rikaichan-window .w-def {
-  font-size: 13px;
-}
-
-#rikaichan-window .w-title {
-  background: #f0f0b0;
-  color: #000;
-  font-size: 10px;
-  padding: 2px;
-}
-
-#rikaichan-window .w-na-tb td {
-  padding-right: 0.8em;
-  vertical-align: top;
-}
-
-/* used for kanji information */
-
-#rikaichan-window .k-main-tb {
-  width: 300px;
-}
-
-#rikaichan-window .k-kanji {
-  color: #000;
-  font-family: serif;
-  font-size: 48px;
-}
-
-#rikaichan-window .k-eigo {
-  font-size: 12px;
-}
-
-/* kanji: readings */
-
-#rikaichan-window .k-yomi {
-  color: #20a020;
-  font-size: 14px;
-  margin: 4px 0;
-}
-
-#rikaichan-window .k-yomi-hi {
-  border: 1px solid red;
-  color: #cd5c5c;
-}
-
-#rikaichan-window .k-yomi-ti {
-  color: #000;
-  font-size: 11px;
-}
-
-/* kanji radical, grade, freq, strokes box */
-
-#rikaichan-window .k-abox-tb {
-  clear: right;
-  float: right;
-  margin-bottom: 4px;
-  width: 120px;
-}
-
-#rikaichan-window .k-abox-r {
-  background: #ffffe6;
-  color: #000;
-  font-size: 12px;
-  padding: 1px 4px;
-  text-align: center;
-}
-
-#rikaichan-window .k-abox-g {
-  background: #f7f7d0;
-  color: #000;
-  font-size: 12px;
-  padding: 1px 4px;
-  text-align: center;
-}
-
-#rikaichan-window .k-abox-f {
-  background: #f7f7d0;
-  color: #000;
-  font-size: 12px;
-  padding: 1px 4px;
-  text-align: center;
-}
-
-#rikaichan-window .k-abox-s {
-  background: #ffffe6;
-  color: #000;
-  font-size: 12px;
-  padding: 1px 4px;
-  text-align: center;
-}
-
-/* kanji components box */
-
-#rikaichan-window .k-bbox-tb {
-  clear: right;
-  float: right;
-  margin-bottom: 4px;
-  width: 120px;
-}
-
-#rikaichan-window .k-bbox-0a {
-  background: #ffffe6;
-  color: #000;
-  font-size: 11px;
-  padding: 1px 3px;
-  vertical-align: top;
-}
-
-#rikaichan-window .k-bbox-0b {
-  background: #ffffe6;
-  color: #000;
-  font-size: 11px;
-  padding: 1px 3px;
-  vertical-align: top;
-}
-
-#rikaichan-window .k-bbox-1a {
-  background: #f7f7d0;
-  color: #000;
-  font-size: 11px;
-  padding: 1px 3px;
-  vertical-align: top;
-}
-
-#rikaichan-window .k-bbox-1b {
-  background: #f7f7d0;
-  color: #000;
-  font-size: 11px;
-  padding: 1px 3px;
-  vertical-align: top;
-}
-
-/* kanji: misc index */
-
-#rikaichan-window .k-mix-tb {
-  width: 100%;
-}
-
-#rikaichan-window .k-mix-td0 {
-  background: #ffffe6;
-  color: #000;
-  font-size: 12px;
-}
-
-#rikaichan-window .k-mix-td1 {
-  background: #f7f7d0;
-  color: #000;
-  font-size: 12px;
-}
-
-#rikaichan-window .q-w {
-  border-right: 1px dotted #b0b0b0 !important;
-  min-width: 300px;
-  padding: 0 2px;
-  vertical-align: top;
-}
-
-#rikaichan-window .q-k {
-  padding: 0 2px;
-  vertical-align: top;
-}
-
-#rikaichan-window .small-info {
-  font: small-caption;
-}
diff --git a/extension/css/popup.css b/extension/css/popup.css
new file mode 100644
index 000000000..ca4ef2565
--- /dev/null
+++ b/extension/css/popup.css
@@ -0,0 +1,250 @@
+/* Theme definitions */
+#rikaichan-window[data-theme='blue'] {
+  --primary-color: #fff;
+  --primary-background-color: #5c73b8;
+  --kanji-color: #b7e7ff;
+  --kana-color: #c0ffc0;
+  --kanji-readings-highlight-color: #a0d0ff;
+  --conjugation-color: #ffe0a0;
+  --title-background-color: #4c63a8;
+  --data-background-color: #5a70b5;
+  --data-background-alternate-color: #4c63a8;
+  --data-color: #fff;
+  --data-alternate-color: #b7e7ff;
+}
+
+#rikaichan-window[data-theme='lightblue'] {
+  --primary-color: #000;
+  --primary-background-color: #e6f4ff;
+  --kanji-color: #3082bf;
+  --kana-color: #00b366;
+  --kanji-readings-highlight-color: #00868b;
+  --conjugation-color: #808080;
+  --title-background-color: #bfe4ff;
+  --data-background-color: #dff1ff;
+  --data-background-alternate-color: #fff;
+  --data-color: #003d6b;
+  --data-alternate-color: #003d6b;
+}
+
+#rikaichan-window[data-theme='black'] {
+  --primary-color: #fff;
+  --primary-background-color: #000;
+  --kanji-color: #7070e0;
+  --kana-color: #20a020;
+  --kanji-readings-highlight-color: #7070e0;
+  --conjugation-color: #a0a0a0;
+  --title-background-color: #303030;
+  --data-background-color: #505050;
+  --data-background-alternate-color: #303030;
+  --data-color: #e0e0e0;
+  --data-alternate-color: #f0f0f0;
+}
+
+#rikaichan-window[data-theme='yellow'] {
+  --primary-color: #000;
+  --primary-background-color: #ffffbf;
+  --kanji-color: #7070e0;
+  --kana-color: #20a020;
+  --kanji-readings-highlight-color: #cd5c5c;
+  --conjugation-color: #a0a0a0;
+  --title-background-color: #f0f0b0;
+  --data-background-color: #ffffe6;
+  --data-background-alternate-color: #f7f7d0;
+  --data-color: #000;
+  --data-alternate-color: #000;
+}
+
+/* End theme definitions */
+
+/* this is to reset almost everything under the popup to a sane value */
+#rikaichan-window,
+#rikaichan-window * {
+  background: transparent;
+  border: none !important;
+  border-spacing: 0;
+  color: var(--primary-color);
+  font: normal 14px sans-serif;
+  height: auto;
+  letter-spacing: normal;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  text-decoration: none;
+  text-indent: 0;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  width: auto;
+  word-spacing: normal;
+}
+
+#rikaichan-window {
+  background: var(--primary-background-color);
+  border: 1px solid #d0d0d0 !important;
+  border-radius: 5px;
+  left: 5px;
+  min-width: 100px;
+  padding: 4px;
+  position: absolute;
+  top: 5px;
+  z-index: 99992;
+}
+
+/* used for word definitions */
+
+#rikaichan-window .w-kanji {
+  color: var(--kanji-color);
+  font-size: 18px;
+  margin-right: 0.7em;
+}
+
+#rikaichan-window .w-kana {
+  color: var(--kana-color);
+  font-size: 18px;
+}
+
+#rikaichan-window .w-conj {
+  color: var(--conjugation-color);
+  font-size: 12px;
+}
+
+#rikaichan-window .w-def {
+  font-size: 13px;
+}
+
+#rikaichan-window .w-title {
+  background: var(--title-background-color);
+  color: var(--primary-color);
+  font-size: 10px;
+  padding: 2px;
+}
+
+#rikaichan-window .w-na-tb td {
+  padding-right: 0.8em;
+  vertical-align: top;
+}
+
+/* used for kanji information */
+
+#rikaichan-window .k-main-tb {
+  width: 300px;
+}
+
+#rikaichan-window .k-kanji {
+  color: var(--kanji-color);
+  font-family: serif;
+  font-size: 48px;
+}
+
+#rikaichan-window .k-eigo {
+  font-size: 12px;
+}
+
+/* kanji: readings */
+
+#rikaichan-window .k-yomi {
+  color: var(--kana-color);
+  font-size: 14px;
+  margin: 4px 0;
+}
+
+#rikaichan-window .k-yomi-hi {
+  border: 1px solid red;
+  color: var(--kanji-readings-highlight-color);
+}
+
+#rikaichan-window .k-yomi-ti {
+  color: var(--primary-color);
+  font-size: 11px;
+}
+
+/* kanji radical, grade, freq, strokes box */
+
+#rikaichan-window .k-abox-tb {
+  clear: right;
+  float: right;
+  margin-bottom: 4px;
+  width: 120px;
+}
+
+#rikaichan-window .k-abox-r,
+#rikaichan-window .k-abox-s {
+  background: var(--data-background-color);
+  color: var(--data-color);
+  font-size: 12px;
+  padding: 1px 4px;
+  text-align: center;
+}
+
+#rikaichan-window .k-abox-g,
+#rikaichan-window .k-abox-f {
+  background: var(--data-background-alternate-color);
+  color: var(--data-alternate-color);
+  font-size: 12px;
+  padding: 1px 4px;
+  text-align: center;
+}
+
+/* kanji components box */
+
+#rikaichan-window .k-bbox-tb {
+  clear: right;
+  float: right;
+  margin-bottom: 4px;
+  width: 120px;
+}
+
+/* Two sets of colors for separating rows */
+#rikaichan-window .k-bbox-0a,
+#rikaichan-window .k-bbox-0b {
+  background: var(--data-background-color);
+  color: var(--data-color);
+  font-size: 11px;
+  padding: 1px 3px;
+  vertical-align: top;
+}
+
+#rikaichan-window .k-bbox-1a,
+#rikaichan-window .k-bbox-1b {
+  background: var(--data-background-alternate-color);
+  color: var(--data-alternate-color);
+  font-size: 11px;
+  padding: 1px 3px;
+  vertical-align: top;
+}
+
+/* kanji: misc index */
+
+#rikaichan-window .k-mix-tb {
+  width: 100%;
+}
+
+#rikaichan-window .k-mix-td0 {
+  background: var(--data-background-color);
+  color: var(--data-color);
+  font-size: 12px;
+}
+
+#rikaichan-window .k-mix-td1 {
+  background: var(--data-background-alternate-color);
+  color: var(--data-alternate-color);
+  font-size: 12px;
+}
+
+#rikaichan-window .q-w {
+  /* unused */
+  border-right: 1px dotted #b0b0b0 !important;
+  min-width: 300px;
+  padding: 0 2px;
+  vertical-align: top;
+}
+
+#rikaichan-window .q-k {
+  padding: 0 2px;
+  vertical-align: top;
+}
+
+#rikaichan-window .small-info {
+  font: small-caption;
+}
diff --git a/extension/manifest.json b/extension/manifest.json
index f5fa14ee4..19fa27c5a 100644
--- a/extension/manifest.json
+++ b/extension/manifest.json
@@ -35,10 +35,5 @@
       "all_frames": true
     }
   ],
-  "web_accessible_resources": [
-    "css/popup-black.css",
-    "css/popup-blue.css",
-    "css/popup-lightblue.css",
-    "css/popup-yellow.css"
-  ]
+  "web_accessible_resources": ["css/popup.css"]
 }
diff --git a/extension/rikaicontent.ts b/extension/rikaicontent.ts
index ca670c801..216d07ba4 100644
--- a/extension/rikaicontent.ts
+++ b/extension/rikaicontent.ts
@@ -143,11 +143,7 @@ class RcxContent {
       );
       css.setAttribute('rel', 'stylesheet');
       css.setAttribute('type', 'text/css');
-      const color = window.rikaichan!.config!.popupcolor;
-      css.setAttribute(
-        'href',
-        chrome.extension.getURL('css/popup-' + color + '.css')
-      );
+      css.setAttribute('href', chrome.extension.getURL('css/popup.css'));
       css.setAttribute('id', 'rikaichan-css');
       topdoc.getElementsByTagName('head')[0].appendChild(css);
 
@@ -165,6 +161,7 @@ class RcxContent {
         true
       );
     }
+    popup.setAttribute('data-theme', window.rikaichan!.config!.popupcolor);
 
     popup.style.width = 'auto';
     popup.style.height = 'auto';
diff --git a/extension/test/rikaicontent_test.ts b/extension/test/rikaicontent_test.ts
index ab2a1846c..4126089ea 100644
--- a/extension/test/rikaicontent_test.ts
+++ b/extension/test/rikaicontent_test.ts
@@ -100,6 +100,36 @@ describe('RcxContent', () => {
       });
     });
   });
+
+  describe('showPopup', () => {
+    afterEach(() => {
+      rcxContent.disableTab();
+    });
+
+    it('sets data-theme attribute of rikaikun window to config popupcolor value', () => {
+      rcxContent.enableTab({ popupcolor: 'redtest' } as Config);
+
+      rcxContent.showPopup('<span></span>');
+
+      // expect rikaikun window to have data-theme attribute set to config popupcolor value
+      expect(
+        document.querySelector<HTMLDivElement>('#rikaichan-window')!.dataset
+          .theme
+      ).to.equal('redtest');
+    });
+
+    it('adds link tag pointing to "css/popup.css" to <head>', () => {
+      chrome.extension.getURL.callsFake((path: string) => {
+        return `http://fakebaseurl/${path}`;
+      });
+
+      rcxContent.showPopup('<span></span>');
+
+      expect(
+        document.querySelector<HTMLLinkElement>('head link')!.href
+      ).to.equal('http://fakebaseurl/css/popup.css');
+    });
+  });
 });
 
 function insertHtmlIntoDomAndReturnFirstTextNode(htmlString: string): Node {