added functionality to change with light/dark mode

src/docs.ts

@@ -110,6 +110,10 @@ class DocsAfterDark {
 
         registerStorageListener(this.handleStorageUpdate);
         registerMessageListener(this.handleMessageUpdate);
+
+        window
+            .matchMedia("(prefers-color-scheme: dark)")
+            .addEventListener("change", this.handleSystemThemeChange);
     }
 
     private raiseButton(raise: boolean) {
@@ -177,6 +181,12 @@ class DocsAfterDark {
         });
     }
 
+    private handleSystemThemeChange = () => {
+        if (this.extensionData.mode === ExtensionMode.Auto) {
+            this.updateExtension();
+        }
+    };
+
     private handleMessageUpdate: MessageListener = (message) => {
         Logger.debug("Update via message:", message);
 
@@ -348,6 +358,15 @@ class DocsAfterDark {
         this.updateButton();
     }
 
+    private resolveMode(): ExtensionMode {
+        if (this.extensionData.mode !== ExtensionMode.Auto) {
+            return this.extensionData.mode;
+        }
+        return window.matchMedia("(prefers-color-scheme: dark)").matches
+            ? ExtensionMode.Dark
+            : ExtensionMode.Light;
+    }
+
     private updateMode(): boolean {
         this.resetMode();
 
@@ -361,13 +380,15 @@ class DocsAfterDark {
         addClassToHTML(enabledClass);
         insertStylesheet("docs.bundle.css", "stylesheet");
 
-        if (this.extensionData.mode === ExtensionMode.Dark) {
+        const effectiveMode = this.resolveMode();
+
+        if (effectiveMode === ExtensionMode.Dark) {
             this.updateDarkMode();
-        } else if (this.extensionData.mode === ExtensionMode.Light) {
+        } else if (effectiveMode === ExtensionMode.Light) {
             this.updateLightMode();
         } else {
             throw new Error(
-                "Unknown extension operation: " + this.extensionData.mode
+                "Unknown extension operation: " + effectiveMode
             );
         }
 
@@ -379,26 +400,41 @@ class DocsAfterDark {
     }
 
     private updateDocumentBackground() {
-        if (this.extensionData.doc_bg == DocumentBackground.Custom) {
+        let docBg = this.extensionData.doc_bg;
+        if (this.extensionData.mode === ExtensionMode.Auto) {
+            docBg =
+                this.resolveMode() === ExtensionMode.Dark
+                    ? DocumentBackground.Blend
+                    : DocumentBackground.Default;
+        }
+
+        if (docBg == DocumentBackground.Custom) {
             setStyleProperty(
                 "documentBackground",
                 this.extensionData.custom_bg ?? ""
             );
         } else {
             setStyleProperty(
                 "documentBackground",
-                documentBackgroundStyles[this.extensionData.doc_bg]
+                documentBackgroundStyles[docBg]
             );
         }
     }
 
     private updateDocumentInvert() {
-        if (!this.extensionData.invert_enabled) {
+        let invertEnabled = this.extensionData.invert_enabled;
+        let invertMode = this.extensionData.invert_mode;
+        if (this.extensionData.mode === ExtensionMode.Auto) {
+            invertEnabled = this.resolveMode() === ExtensionMode.Dark;
+            invertMode = defaultExtensionData.invert_mode;
+        }
+
+        if (!invertEnabled) {
             setStyleProperty("documentInvert", documentInvert.off);
             return;
         }
 
-        switch (this.extensionData.invert_mode) {
+        switch (invertMode) {
             case InvertMode.Gray:
                 setStyleProperty("documentInvert", documentInvert.grayscale);
                 break;

src/popup.html

@@ -65,6 +65,7 @@ <h3 class="sectionTitle">Global Toggle</h3>
                                 <button id="modeLight" value="light">
                                     Light
                                 </button>
+                                <button id="modeAuto" value="auto">Auto</button>
                                 <button id="modeOff" value="off">Off</button>
                             </div>
                         </div>

src/popup.ts

@@ -101,7 +101,7 @@ class toggleCategoryComponent {
 
 class ModeComponent extends StateSubscriber {
     private modeButtons = document.querySelectorAll(
-        "#modeDark, #modeLight, #modeOff"
+        "#modeDark, #modeLight, #modeAuto, #modeOff"
     ) as NodeListOf<HTMLButtonElement>;
 
     initialize() {
@@ -138,6 +138,9 @@ class ModeComponent extends StateSubscriber {
                             invert_enabled: false,
                         });
                         break;
+                    case "auto":
+                        this.state.setData({ mode: ExtensionMode.Auto });
+                        break;
                 }
             });
         });
@@ -151,7 +154,9 @@ class ModeComponent extends StateSubscriber {
                 (button.value == "off" && newData.mode == ExtensionMode.Off) ||
                 (button.value == "dark" &&
                     newData.mode == ExtensionMode.Dark) ||
-                (button.value == "light" && newData.mode == ExtensionMode.Light)
+                (button.value == "light" &&
+                    newData.mode == ExtensionMode.Light) ||
+                (button.value == "auto" && newData.mode == ExtensionMode.Auto)
             ) {
                 button.classList.add("selected");
             }
@@ -184,7 +189,10 @@ class DarkModeComponent extends StateSubscriber {
     update(newData: ExtensionData): void {
         this.resetAppearance();
 
-        if (newData.mode != ExtensionMode.Dark) {
+        if (
+            newData.mode != ExtensionMode.Dark &&
+            newData.mode != ExtensionMode.Auto
+        ) {
             this.section.classList.add("hidden");
         }
 

src/types.ts

@@ -13,6 +13,7 @@ enum ExtensionMode {
     Off = 0,
     Light = 1,
     Dark = 2,
+    Auto = 3,
 }
 
 enum DarkModeOperation {