Add: handle color scheme

background/color-scheme.js

@@ -38,18 +38,21 @@ const colorScheme = (() => {
   }
 
   function shouldIncludeStyle(style) {
-    if (style.preferScheme === 'always') {
+    const isDark = style.preferScheme === 'dark';
+    const isLight = style.preferScheme === 'light';
+    if (!isDark && !isLight) {
       return true;
     }
-    if (prefs.get('schemeSwitcher.enabled') === 'never') {
+    const switcherState = prefs.get('schemeSwitcher.enabled');
+    if (switcherState === 'never') {
       return true;
     }
-    if (prefs.get('schemeSwitcher.enabled') === 'system') {
-      return systemPreferDark && style.preferScheme === 'dark' ||
-        !systemPreferDark && style.preferScheme === 'light';
+    if (switcherState === 'system') {
+      return systemPreferDark && isDark ||
+        !systemPreferDark && isLight;
     }
-    return timePreferDark && style.preferScheme === 'dark' ||
-      !timePreferDark && style.preferScheme === 'light';
+    return timePreferDark && isDark ||
+      !timePreferDark && isLight;
   }
 
   function updateSystemPreferDark() {

background/style-manager.js

@@ -61,6 +61,7 @@ const styleManager = (() => {
   };
 
   handleLivePreviewConnections();
+  handleColorScheme();
 
   return ensurePrepared({
     get,
@@ -81,6 +82,16 @@ const styleManager = (() => {
     removeInclusion
   });
 
+  function handleColorScheme() {
+    colorScheme.onChange(() => {
+      for (const {data} of styles.values()) {
+        if (data.preferScheme === 'dark' || data.preferScheme === 'light') {
+          broadcastStyleUpdated(data, 'colorScheme', undefined, false);
+        }
+      }
+    });
+  }
+
   function handleLivePreviewConnections() {
     chrome.runtime.onConnect.addListener(port => {
       if (port.name !== 'livePreview') {