diff --git a/background/background.js b/background/background.js
index da59e025..5fd3164e 100644
--- a/background/background.js
+++ b/background/background.js
@@ -1,6 +1,7 @@
 /* global download prefs openURL FIREFOX CHROME VIVALDI
   debounce URLS ignoreChromeError getTab
-  styleManager msg navigatorUtil iconUtil workerUtil contentScripts */
+  styleManager msg navigatorUtil iconUtil workerUtil contentScripts
+  colorScheme */
 'use strict';
 
 // eslint-disable-next-line no-var
@@ -63,7 +64,9 @@ window.API_METHODS = Object.assign(window.API_METHODS || {}, {
     return browser.runtime.openOptionsPage()
       .then(() => new Promise(resolve => setTimeout(resolve, 100)))
       .then(() => msg.broadcastExtension({method: 'optionsCustomizeHotkeys'}));
-  }
+  },
+
+  updateSystemPreferDark: colorScheme.updateSystemPreferDark
 });
 
 // eslint-disable-next-line no-var
diff --git a/background/color-scheme.js b/background/color-scheme.js
index b217d698..3b559fbf 100644
--- a/background/color-scheme.js
+++ b/background/color-scheme.js
@@ -8,9 +8,6 @@ const colorScheme = (() => {
   let timePreferDark = false;
   const changeListeners = new Set();
 
-  const media = window.matchMedia('(prefers-color-scheme: dark)');
-  media.addListener(updateSystemPreferDark);
-
   const checkTime = ['schemeSwitcher.nightStart', 'schemeSwitcher.nightEnd'];
   prefs.subscribe(checkTime, (key, value) => {
     updateTimePreferDark();
@@ -29,7 +26,7 @@ const colorScheme = (() => {
   updateSystemPreferDark();
   updateTimePreferDark();
 
-  return {shouldIncludeStyle, onChange};
+  return {shouldIncludeStyle, onChange, updateSystemPreferDark};
 
   function createAlarm(key, value) {
     const date = new Date();
@@ -63,10 +60,11 @@ const colorScheme = (() => {
 
   function updateSystemPreferDark() {
     const oldValue = systemPreferDark;
-    systemPreferDark = media.matches;
+    systemPreferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
     if (systemPreferDark !== oldValue) {
       emitChange();
     }
+    return true;
   }
 
   function updateTimePreferDark() {
diff --git a/content/apply.js b/content/apply.js
index 89c3a540..b2422d84 100644
--- a/content/apply.js
+++ b/content/apply.js
@@ -46,6 +46,13 @@ const APPLY = (() => {
     prefs.subscribe(['exposeIframes'], updateExposeIframes);
   }
 
+  // detect media change in content script
+  // FIXME: move this to background page when following bugs are fixed:
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1561546
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=968651
+  const media = window.matchMedia('(prefers-color-scheme: dark)');
+  media.addListener(() => API.updateSystemPreferDark().catch(console.error));
+
   function onInjectorUpdate() {
     if (!IS_OWN_PAGE && styleInjector.list.length) {
       docRewriteObserver.start();