add dark mode support, release 1.4.0

README.org

@@ -13,9 +13,12 @@
 A browser extension to save texts anytime, anywhere.
 #+end_quote
 
-When I read issues/pulls of my favorite projects on GitHub, often there are comments I think are worth digging further, but GitHub has no =SAVE= button for single issue/pull, not to mention specific comment, so I create =Text Saver= to fix this, once and for all.
+When read issues/pulls of my favorite projects on GitHub, often there are comments I think are worth digging further, but GitHub has no =SAVE= button for single issue/pull, not to mention specific comment, so I create =Text Saver= to fix this, once and for all.
 
-=Text Saver= works on any website, just click =Add to Text Saver= in context menu, then current text selection will be saved if there is any, otherwise URL of current tab will be saved.
+=Text Saver= works on any website, just click =Add to Text Saver= in context menu, then
+- Current text selection will be saved if there is any, otherwise
+- Current link will be saved if mouse hover on image or link, otherwise
+- URL of current tab will be saved when none of above are met.
 
 All saved texts can be viewed in option page, and users can export their saved texts to local disk, so no need to worry about vendor lock-in.
 
@@ -36,6 +39,10 @@ All saved texts can be viewed in option page, and users can export their saved t
 - =notifications=, notify after save text successfully.
 - =downloads=, export saved texts.
 * Changelog
+- v1.4.0 (2023-03-16) ::
+  - Support color scheme switch(aka dark mode)
+- v1.3.0 (2023-03-14) ::
+  - contextMenu type change to all, so when right-click on an image or hyperlink, we can save link address.
 - v1.2.0 (2023-03-12) ::
   - Use =textContent= to render saved texts to [[https://stackoverflow.com/a/68198131/2163429][avoid XSS]].
   - Rename option to setting, and add =storage size= statistics.

manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Text Saver",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Save texts anytime, anywhere",
   "homepage_url": "https://github.com/jiacai2050/text-saver",
   "author": "liujiacai@yandex.com",

module.js

@@ -2,6 +2,9 @@
 
 export class Options {
   static keyNotification = 'enable-notification';
+  // system, light, dark
+  static keyColor = 'color-scheme';
+
   constructor(storage) {
     this.storage = storage;
   }
@@ -15,6 +18,15 @@ export class Options {
     return await this.storage.set({ [Options.keyNotification]: enable });
   }
 
+  async getColorScheme() {
+    const opt = await this.storage.get({ [Options.keyColor]: 'system' });
+    return opt[Options.keyColor];
+  }
+
+  async setColorScheme(scheme) {
+    return await this.storage.set({ [Options.keyColor]: scheme });
+  }
+
   // Mainly for testing
   async clear() {
     return await this.storage.clear(null);

option.html

@@ -39,32 +39,43 @@ <h2>Save texts anytime, anywhere</h2>
       <div class="card">
         <h5 class="card-header">Settings</h5>
         <div class="card-body">
-          <div class="form-group row">
+          <div class="mb-3 row">
             <label for="input-size" class="col-sm-2 col-form-label"
               >Storage Size
             </label>
             <div class="col-sm-10">
-              <input class="form-control" readonly id="input-size" />
+              <input class="form-control-plaintext" disabled id="input-size" />
             </div>
           </div>
 
-          <div class="form-group row">
-            <label for="input-notification" class="col-sm-2"
+          <div class="mb-3 row">
+            <label for="input-notification" class="col-sm-2 col-form-label"
               >Enable notification</label
             >
-            <div>
-              <div class="form-check">
-                <input
-                  type="checkbox"
-                  class="form-control"
-                  id="input-notification"
-                />
-              </div>
+            <div class="col-sm-10">
+              <input
+                type="checkbox"
+                class="form-check-input"
+                id="input-notification"
+              />
             </div>
           </div>
 
-          <div class="form-group row">
+          <div class="mb-3 row">
+            <label for="select-theme" class="col-sm-2 col-form-label"
+              >Color Scheme</label
+            >
             <div class="col-sm-10">
+              <select class="form-select" id="select-color">
+                <option value="system">Sync with System</option>
+                <option value="light">Light</option>
+                <option value="dark">Dark</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="mb-3 row">
+            <div class="col-sm-2">
               <button
                 type="button"
                 class="btn btn-danger btn-sm"

option.js

@@ -53,11 +53,11 @@ async function refresh() {
     let [id, text, url, createdAt] = row;
     table.push(`<tr>
 <td id="text-${id}"></td>
-<td>${new Date(createdAt).toLocaleString()}</td>
+<td>${new Date(createdAt).toLocaleString('en-GB')}</td>
 <td>
 <div class="btn-group" role="group">
-  <button type="button" class="btn btn-info btn-sm" id="btn-copy-${id}">Copy</button>
-  <a role="button" class="btn btn-info btn-sm" href="${url}">Goto</a>
+  <button type="button" class="btn btn-secondary btn-sm" id="btn-copy-${id}">Copy</button>
+  <a role="button" class="btn btn-secondary btn-sm" href="${url}">Goto</a>
   <button type="button" class="btn btn-danger btn-sm" id="btn-delete-${id}">Delete</button>
 </div>
 </td>
@@ -90,8 +90,42 @@ async function refresh() {
   }
 }
 
+function applyColorScheme(scheme) {
+  if (
+    scheme === 'system' &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+  ) {
+    document.documentElement.setAttribute('data-bs-theme', 'dark');
+  } else {
+    document.documentElement.setAttribute('data-bs-theme', scheme);
+  }
+}
+
 window.onload = async function () {
   let opt = new Options(chrome.storage.sync);
+  // console.log(await opt.dump());
+  const selectColor = document.getElementById('select-color');
+  selectColor.value = await opt.getColorScheme();
+  applyColorScheme(selectColor.value);
+  selectColor.onchange = async function () {
+    await opt.setColorScheme(selectColor.value);
+    applyColorScheme(selectColor.value);
+  };
+
+  window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', async (e) => {
+      const colorScheme = await opt.getColorScheme();
+      if (colorScheme === 'system') {
+        if (e.matches) {
+          // set to dark
+          applyColorScheme('dark');
+        } else {
+          // set to light
+          applyColorScheme('light');
+        }
+      }
+    });
 
   document.getElementById('btn-clear').onclick = async function () {
     if (confirm('Are you sure to clear all saved texts?')) {
@@ -119,7 +153,6 @@ window.onload = async function () {
     });
   };
 
-  // console.log(await opt.dump());
   document.getElementById('input-size').value = humanSize(await textStats());
   const inputNotification = document.getElementById('input-notification');
   inputNotification.checked = await opt.getNotification();