diff --git a/src/Ui/media/ZeroSiteTheme.coffee b/src/Ui/media/ZeroSiteTheme.coffee
new file mode 100644
index 00000000..47144051
--- /dev/null
+++ b/src/Ui/media/ZeroSiteTheme.coffee
@@ -0,0 +1,44 @@
+DARK = "(prefers-color-scheme: dark)"
+LIGHT = "(prefers-color-scheme: light)"
+
+mqDark = window.matchMedia(DARK)
+mqLight = window.matchMedia(LIGHT)
+
+
+changeColorScheme = (theme) ->
+    zeroframe.cmd "userGetGlobalSettings", [], (user_settings) ->
+        if user_settings.theme != theme
+            user_settings.theme = theme
+            zeroframe.cmd "userSetGlobalSettings", [user_settings]
+
+            location.reload()
+
+        return
+    return
+
+
+displayNotification = ({matches, media}) ->
+    if !matches
+        return
+
+    zeroframe.cmd "wrapperNotification", ["info", "Your system's theme has been changed.<br>Please reload site to use it."]
+    return
+
+
+detectColorScheme = ->
+    if mqDark.matches
+        changeColorScheme("dark")
+    else if mqLight.matches
+        changeColorScheme("light")
+
+    mqDark.addListener(displayNotification)
+    mqLight.addListener(displayNotification)
+
+    return
+
+
+zeroframe.cmd "userGetGlobalSettings", [], (user_settings) ->
+    if user_settings.use_system_theme == true
+        detectColorScheme()
+
+    return
diff --git a/src/Ui/media/all.js b/src/Ui/media/all.js
index 7ba3a780..b56aa926 100644
--- a/src/Ui/media/all.js
+++ b/src/Ui/media/all.js
@@ -2045,4 +2045,56 @@ $.extend( $.easing,
 
   window.zeroframe = new WrapperZeroFrame(window.wrapper);
 
-}).call(this);
\ No newline at end of file
+}).call(this);
+
+
+/* ---- src/Ui/media/ZeroSiteTheme.coffee ---- */
+
+
+(function() {
+  var DARK, LIGHT, changeColorScheme, detectColorScheme, displayNotification, mqDark, mqLight;
+
+  DARK = "(prefers-color-scheme: dark)";
+
+  LIGHT = "(prefers-color-scheme: light)";
+
+  mqDark = window.matchMedia(DARK);
+
+  mqLight = window.matchMedia(LIGHT);
+
+  changeColorScheme = function(theme) {
+    zeroframe.cmd("userGetGlobalSettings", [], function(user_settings) {
+      if (user_settings.theme !== theme) {
+        user_settings.theme = theme;
+        zeroframe.cmd("userSetGlobalSettings", [user_settings]);
+        location.reload();
+      }
+    });
+  };
+
+  displayNotification = function(arg) {
+    var matches, media;
+    matches = arg.matches, media = arg.media;
+    if (!matches) {
+      return;
+    }
+    zeroframe.cmd("wrapperNotification", ["info", "Your system's theme has been changed.<br>Please reload site to use it."]);
+  };
+
+  detectColorScheme = function() {
+    if (mqDark.matches) {
+      changeColorScheme("dark");
+    } else if (mqLight.matches) {
+      changeColorScheme("light");
+    }
+    mqDark.addListener(displayNotification);
+    mqLight.addListener(displayNotification);
+  };
+
+  zeroframe.cmd("userGetGlobalSettings", [], function(user_settings) {
+    if (user_settings.use_system_theme === true) {
+      detectColorScheme();
+    }
+  });
+
+}).call(this);