diff --git a/debug_log_preload.js b/debug_log_preload.js
index 14a3144ba3cc..d4caee2ddff2 100644
--- a/debug_log_preload.js
+++ b/debug_log_preload.js
@@ -10,6 +10,7 @@ const url = require('url');
 require('./ts/windows/context');
 
 const { setupI18n } = require('./ts/util/setupI18n');
+const { createSetting } = require('./ts/util/preload');
 const {
   getEnvironment,
   setEnvironment,
@@ -22,7 +23,7 @@ const localeMessages = ipcRenderer.sendSync('locale-data');
 setEnvironment(parseEnvironment(config.environment));
 
 window.getVersion = () => config.version;
-window.theme = config.theme;
+window.themeSetting = createSetting('themeSetting', { setter: false });
 window.i18n = setupI18n(locale, localeMessages);
 
 // got.js appears to need this to successfully submit debug logs to the cloud
diff --git a/js/debug_log_start.js b/js/debug_log_start.js
index 3a81a1d00684..35692ece2694 100644
--- a/js/debug_log_start.js
+++ b/js/debug_log_start.js
@@ -10,7 +10,25 @@ $(document).on('keydown', e => {
 });
 
 const $body = $(document.body);
-$body.addClass(`${window.theme}-theme`);
+
+async function applyTheme() {
+  const theme = await window.themeSetting.getValue();
+  document.body.classList.remove('light-theme');
+  document.body.classList.remove('dark-theme');
+  document.body.classList.add(
+    `${
+      theme === 'system'
+        ? window.SignalContext.nativeThemeListener.getSystemTheme()
+        : theme
+    }-theme`
+  );
+}
+
+applyTheme();
+
+window.SignalContext.nativeThemeListener.subscribe(() => {
+  applyTheme();
+});
 
 // got.js appears to need this to successfully submit debug logs to the cloud
 window.setImmediate = window.nodeSetImmediate;