diff --git a/frontend/src/app/plugins/api.cljs b/frontend/src/app/plugins/api.cljs
index 8c6c80bc90..28e8ed6b7b 100644
--- a/frontend/src/app/plugins/api.cljs
+++ b/frontend/src/app/plugins/api.cljs
@@ -44,6 +44,7 @@
    [app.plugins.viewport :as viewport]
    [app.util.code-gen :as cg]
    [app.util.object :as obj]
+   [app.util.theme :as theme]
    [beicon.v2.core :as rx]
    [cuerdas.core :as str]))
 
@@ -216,9 +217,15 @@
     :getTheme
     (fn []
       (let [theme (get-in @st/state [:profile :theme])]
-        (if (or (not theme) (= theme "default"))
+        (cond
+          (or (not theme) (= theme "system"))
+          (theme/get-system-theme)
+
+          (= theme "default")
           "dark"
-          (get-in @st/state [:profile :theme]))))
+
+          :else
+          theme)))
 
     :getCurrentUser
     (fn []
diff --git a/frontend/src/app/plugins/events.cljs b/frontend/src/app/plugins/events.cljs
index a4a12c5b18..33f0fad6e0 100644
--- a/frontend/src/app/plugins/events.cljs
+++ b/frontend/src/app/plugins/events.cljs
@@ -14,6 +14,7 @@
    [app.plugins.parser :as parser]
    [app.plugins.shape :as shape]
    [app.util.object :as obj]
+   [app.util.theme :as theme]
    [goog.functions :as gf]))
 
 (defmulti handle-state-change (fn [type _] type))
@@ -50,10 +51,23 @@
       ::not-changed
       (apply array (map str new-selection)))))
 
+(defn- get-theme
+  [state]
+  (let [theme (get-in state [:profile :theme])]
+    (cond
+      (or (not theme) (= theme "system"))
+      (theme/get-system-theme)
+
+      (= theme "default")
+      "dark"
+
+      :else
+      theme)))
+
 (defmethod handle-state-change "themechange"
   [_ _ old-val new-val _]
-  (let [old-theme (get-in old-val [:profile :theme])
-        new-theme (get-in new-val [:profile :theme])]
+  (let [old-theme (get-theme old-val)
+        new-theme (get-theme new-val)]
     (if (identical? old-theme new-theme)
       ::not-changed
       (if (= new-theme "default")