diff --git a/src/components/Preferences.vue b/src/components/Preferences.vue
index 558e2baa..27f437b5 100644
--- a/src/components/Preferences.vue
+++ b/src/components/Preferences.vue
@@ -34,6 +34,7 @@
     <b>Theme</b>
     <br />
     <select class="uk-select uk-width-auto" v-model="selectedTheme" @change="onChange($event)">
+        <option value="auto">Auto</option>
         <option value="dark">Dark</option>
         <option value="light">Light</option>
     </select>
diff --git a/src/main.js b/src/main.js
index 1ea58aed..2df74d7e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -129,22 +129,29 @@ const mixin = {
         apiUrl() {
             return this.getPreferenceString("instance", "https://pipedapi.kavin.rocks");
         },
+        getEffectiveTheme() {
+            var theme = this.getPreferenceString("theme", "dark");
+            if (theme === "auto")
+                theme =
+                    window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+            return theme;
+        },
     },
     computed: {
         backgroundColor() {
-            return this.getPreferenceString("theme", "dark") === "light" ? "#fff" : "#0b0e0f";
+            return this.getEffectiveTheme() === "light" ? "#fff" : "#0b0e0f";
         },
         secondaryBackgroundColor() {
-            return this.getPreferenceString("theme", "dark") === "light" ? "#e5e5e5" : "#242727";
+            return this.getEffectiveTheme() === "light" ? "#e5e5e5" : "#242727";
         },
         foregroundColor() {
-            return this.getPreferenceString("theme", "dark") === "light" ? "#15191a" : "#0b0e0f";
+            return this.getEffectiveTheme() === "light" ? "#15191a" : "#0b0e0f";
         },
         secondaryForegroundColor() {
-            return this.getPreferenceString("theme", "dark") === "light" ? "#666" : "#393d3d";
+            return this.getEffectiveTheme() === "light" ? "#666" : "#393d3d";
         },
         darkMode() {
-            return this.getPreferenceString("theme", "dark") !== "light";
+            return this.getEffectiveTheme() !== "light";
         },
     },
 };