feat: Add new auto theme and set as default

src/css/themes/auto.xcss

@@ -0,0 +1,11 @@
+/**
+ * Automatic Light/Dark Theme
+ */
+
+// stylelint-disable-next-line import-notation
+@import './light.xcss';
+
+@media (prefers-color-scheme: dark) {
+  // stylelint-disable-next-line import-notation, no-invalid-position-at-import-rule
+  @import './dark.xcss';
+}

src/settings.ts

@@ -112,6 +112,7 @@ const meta = compile(`
     <div class=row>
       <label>Theme</label>
       <select @theme>
+        <option value=auto>Automatic (light/dark)</option>
         <option value=light>Light</option>
         <option value=dark>Dark</option>
         <option value=black>Black</option>

src/sw.ts

@@ -21,6 +21,13 @@ chrome.runtime.onInstalled.addListener(async () => {
   }
 
   void chrome.storage.local.set({
-    t: (await themes)[(await settings).tn ?? 'dark'],
+    t: (await themes)[(await settings).tn ?? 'auto'],
   });
+
+  // TODO: Open settings page on install?
+  // if (details.reason === ('install' as chrome.runtime.OnInstalledReason.INSTALL)) {
+  //   void chrome.tabs.create({
+  //     url: chrome.runtime.getURL('settings.html'),
+  //   });
+  // }
 });