diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 09d28b2fe..d5ae5763c 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -608,6 +608,9 @@
   "darkLabel": {
     "message": "Dark"
   },
+  "systemLabel": {
+    "message": "System"
+  },
   "otherLabel": {
     "message": "Other"
   },
diff --git a/src/options/components/OptionsPage.js b/src/options/components/OptionsPage.js
index b5be07457..4e56f64ce 100644
--- a/src/options/components/OptionsPage.js
+++ b/src/options/components/OptionsPage.js
@@ -9,11 +9,16 @@ import "../styles/OptionsPage.scss";
 
 const setupTheme = async () => {
   await initSettings();
-  document.body.dataset.theme = getSettings("theme");
+  document.body.classList.add(getSettings("theme") + "-theme");
 
   browser.storage.local.onChanged.addListener(changes => {
-    if (changes.Settings.newValue.theme === changes.Settings.oldValue.theme) return;
-    document.body.dataset.theme = changes.Settings.newValue.theme;
+    if (changes.Settings.newValue.theme === changes.Settings.oldValue.theme)
+      return;
+
+    document.body.classList.replace(
+      changes.Settings.oldValue.theme + "-theme",
+      changes.Settings.newValue.theme + "-theme"
+    );
   });
 };
 
diff --git a/src/options/styles/OptionsPage.scss b/src/options/styles/OptionsPage.scss
index e24151716..228ecadbb 100644
--- a/src/options/styles/OptionsPage.scss
+++ b/src/options/styles/OptionsPage.scss
@@ -1,16 +1,38 @@
-body {
-  background-color: var(--main-bg);
+.light-theme {
+  --main-text: #0c0c0d;
+  --sub-text: #737373;
+  --line: #ededf0;
+  --button: #d7d7db;
+  --highlight: #5595ff;
+  --main-bg: #ffffff;
+  --sub-bg: #ffffff;
+  --new: #ff4f4f;
+}
+
+.dark-theme {
+  --main-text: #e6e6e6;
+  --sub-text: #aaaaaa;
+  --line: #373737;
+  --button: #929292;
+  --highlight: #5595ff;
+  --main-bg: #181818;
+  --sub-bg: #101010;
+  --new: #ed5f5f;
+}
 
+.system-theme {
   --main-text: #0c0c0d;
   --sub-text: #737373;
   --line: #ededf0;
   --button: #d7d7db;
-  --highlight: #36b2b2;
+  --highlight: #5595ff;
   --main-bg: #ffffff;
   --sub-bg: #ffffff;
   --new: #ff4f4f;
+}
 
-  &[data-theme="dark"] {
+@media (prefers-color-scheme: dark) {
+  .system-theme {
     --main-text: #e6e6e6;
     --sub-text: #aaaaaa;
     --line: #454545;
@@ -22,6 +44,10 @@ body {
   }
 }
 
+body {
+  background-color: var(--main-bg);
+}
+
 .optionsPage {
   font-family:
     "Segoe UI", "San Francisco", "Ubuntu", "Fira Sans", "Roboto", "Arial", "Helvetica", sans-serif;
diff --git a/src/popup/components/PopupPage.js b/src/popup/components/PopupPage.js
index f7f289dc1..6039f7560 100644
--- a/src/popup/components/PopupPage.js
+++ b/src/popup/components/PopupPage.js
@@ -112,7 +112,8 @@ export default class PopupPage extends Component {
       document.body.style.height = "100%";
     }
 
-    document.body.dataset.theme = getSettings("theme");
+    this.themeClass = getSettings("theme") + "-theme";
+    document.body.classList.add(this.themeClass)
 
     this.setState({
       sortValue: getSettings("sortValue") || "newest",
diff --git a/src/popup/styles/body.scss b/src/popup/styles/body.scss
index 344a951d7..7f0c4dd29 100644
--- a/src/popup/styles/body.scss
+++ b/src/popup/styles/body.scss
@@ -1,3 +1,69 @@
+.light-theme {
+  --main-text: #0c0c0d;
+  --sub-text: #737373;
+  --line: #ededf0;
+  --line2: #dfdfdf;
+  --button: #d7d7db;
+  --highlight: #36b2b2;
+  --main-bg: #ffffff;
+  --highlight-bg: #90dede;
+  --confirm: #ff4f4f;
+  --error: #d70022;
+  --warn: #ff8f00;
+  --success: #058b00;
+  --info: #0a84ff;
+}
+
+.dark-theme {
+  --main-text: #e6e6e6;
+  --sub-text: #aaaaaa;
+  --line: #454545;
+  --line2: #555;
+  --button: #929292;
+  --highlight: #36b2b2;
+  --main-bg: #181818;
+  --highlight-bg: #305656;
+  --confirm: #ed5f5f;
+  --error: #ca1532;
+  --warn: #ee8e12;
+  --success: #2a9c26;
+  --info: #1471d0;
+}
+
+.system-theme {
+  --main-text: #0c0c0d;
+  --sub-text: #737373;
+  --line: #ededf0;
+  --line2: #dfdfdf;
+  --button: #d7d7db;
+  --highlight: #36b2b2;
+  --main-bg: #ffffff;
+  --highlight-bg: #90dede;
+  --confirm: #ff4f4f;
+  --error: #d70022;
+  --warn: #ff8f00;
+  --success: #058b00;
+  --info: #0a84ff;
+}
+
+@media (prefers-color-scheme: dark) {
+  .system-theme {
+    --main-text: #e6e6e6;
+    --sub-text: #aaaaaa;
+    --line: #454545;
+    --line2: #555;
+    --button: #929292;
+    --highlight: #36b2b2;
+    --main-bg: #181818;
+    --highlight-bg: #305656;
+    --confirm: #ed5f5f;
+    --error: #ca1532;
+    --warn: #ee8e12;
+    --success: #2a9c26;
+    --info: #1471d0;
+  }
+}
+
 html {
   body {
     margin: 0;
@@ -27,35 +93,5 @@ html {
     :focus {
       outline-style: none;
     }
-
-    --main-text: #0c0c0d;
-    --sub-text: #737373;
-    --line: #ededf0;
-    --line2: #dfdfdf;
-    --button: #d7d7db;
-    --highlight: #36b2b2;
-    --main-bg: #ffffff;
-    --highlight-bg: #90dede;
-    --confirm: #ff4f4f;
-    --error: #d70022;
-    --warn: #ff8f00;
-    --success: #058b00;
-    --info: #0a84ff;
-
-    &[data-theme="dark"] {
-      --main-text: #e6e6e6;
-      --sub-text: #aaaaaa;
-      --line: #454545;
-      --line2: #555;
-      --button: #929292;
-      --highlight: #36b2b2;
-      --main-bg: #181818;
-      --highlight-bg: #305656;
-      --confirm: #ed5f5f;
-      --error: #ca1532;
-      --warn: #ee8e12;
-      --success: #2a9c26;
-      --info: #1471d0;
-    }
   }
 }
diff --git a/src/settings/defaultSettings.js b/src/settings/defaultSettings.js
index 0c8efc312..3883375ea 100644
--- a/src/settings/defaultSettings.js
+++ b/src/settings/defaultSettings.js
@@ -387,7 +387,7 @@ export default [
         title: "themeLabel",
         captions: ["themeCaptionLabel"],
         type: "select",
-        default: "light",
+        default: 'system',
         options: [
           {
             name: "lightLabel",
@@ -396,6 +396,10 @@ export default [
           {
             name: "darkLabel",
             value: "dark"
+          },
+          {
+            name: "systemLabel",
+            value: "system"
           }
         ]
       },