dark theme support (based on OS preference)

- https://addons.mozilla.org/en-US/firefox/addon/new-tab-page-bookmarks/reviews/2555058/
- https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme

Author: mathio

README.md

@@ -2,7 +2,7 @@
 
 Displays your bookmarks in multiple columns for quick access from the new tab page.
 
-Works in both Chrome and Firefox browsers.
+Works in both Chrome and Firefox browsers. Supports light & dark theme based on your operating system theme.
 
 ## Installation
 
@@ -44,6 +44,7 @@ Manually:
 ## Description
 
 - displays bookmars from Bookmarks Bar
+- supports dark mode (based on your operating system theme)
 - does NOT manage your bookmarks, use the built-in bookmarks manager for that:
   - Chrome: `CMD+ALT+B` / `CTRL+SHIFT+O`
   - Firefox: `CMD+SHIFT+O` / `CTRL+SHIFT+O`

chrome/src/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "New Tab Page Bookmarks",
   "description": "Displays your bookmarks in multiple columns for quick access from the new tab page",
-  "version": "1.8",
+  "version": "1.9",
   "manifest_version": 3,
   "author": "https://github.com/mathio",
   "chrome_url_overrides": {

firefox/src/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "New Tab Page Bookmarks",
   "description": "Displays your bookmarks in multiple columns for quick access from the new tab page",
-  "version": "1.8",
+  "version": "1.9",
   "manifest_version": 2,
   "author": "https://github.com/mathio",
   "chrome_url_overrides": {
@@ -13,5 +13,13 @@
     "48": "icon48.png",
     "128": "icon128.png"
   },
-  "permissions": ["bookmarks"]
+  "permissions": ["bookmarks"],
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "{4ff4403a-1536-415e-97b9-117f57d67dbf}",
+      "data_collection_permissions": {
+        "required": ["none"]
+      }
+    }
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-new-tab-page-bookmarks",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "main": "index.js",
   "license": "MIT",
   "author": "",

src/index.css

@@ -9,6 +9,8 @@ body {
 body {
   font-size: 13px;
   font-family: sans-serif;
+  color: #000;
+  background: #fff;
 }
 ul#root {
   display: flex;
@@ -94,3 +96,30 @@ p#image-attribution a {
   background-repeat: no-repeat;
   background-position: center;
 }
+
+@media (prefers-color-scheme: dark) {
+  body {
+    color: #fff;
+    background: #333;
+  }
+  a#toggle {
+    color: #fff;
+    background: rgba(50, 50, 50, 0.85);
+  }
+  a#toggle:hover {
+    background: rgba(50, 50, 50, 0.95);
+  }
+  ul#root a {
+    color: #fff;
+  }
+  ul#root a:hover {
+    background: #444;
+  }
+  p#image-attribution {
+    background: rgba(50, 50, 50, 0.85);
+    color: #e0e0e0;
+  }
+  p#image-attribution a {
+    color: #e0e0e0;
+  }
+}

src/index.js

@@ -5,10 +5,10 @@ const iconUrl = (href) => {
   return `https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${origin}&size=32`
 }
 
-const addElm = (parent, tag, content, attributes) => {
+const addElm = (parent, tag, text, attributes) => {
   const elm = document.createElement(tag)
-  if (content) {
-    elm.innerHTML = content
+  if (text) {
+    elm.textContent = text
   }
   if (attributes) {
     Object.entries(attributes).forEach(([key, value]) => {
@@ -34,12 +34,18 @@ const renderNode =
         parentUl.className = 'flat-bookmark-structure'
       }
 
-      const icon = `<img src="${iconUrl(href)}" alt="${title.substring(
-        0,
-        1
-      )}" />`
+      const link = document.createElement('a')
+      link.href = href
 
-      addElm(li, 'a', `${icon} ${title}`, { href })
+      const icon = document.createElement('img')
+      icon.src = iconUrl(href)
+      icon.alt = title.substring(0, 1)
+      link.append(icon)
+
+      const text = document.createTextNode(` ${title}`)
+      link.append(text)
+
+      li.append(link)
     }
   }
 
@@ -95,10 +101,10 @@ const initImage = async () => {
   if (!isBookmarksBarHidden()) {
     hideImage()
   } else {
-    const image = JSON.parse(
-      window.localStorage.getItem(IMAGE_KEY_NAME) || '{}'
-    )
-    if (image && image.created > Date.now() - IMAGE_VALID_MS) {
+    let image = JSON.parse(window.localStorage.getItem(IMAGE_KEY_NAME) || '{}')
+    const hasImage =
+      image && image.attribution && typeof image.attribution !== 'string'
+    if (hasImage && image.created > Date.now() - IMAGE_VALID_MS) {
       showImage(image)
     } else {
       const utmParams =
@@ -119,10 +125,13 @@ const initImage = async () => {
         .join(' ')
       const userLink = `${user?.links?.html}${utmParams}`
 
-      const attribution = `Photo by <a href="${userLink}">${userFullName}</a> on <a href="${imageLink}">Unsplash</a>`
       const imageData = {
         url: imageUrl,
-        attribution,
+        attribution: {
+          userLink,
+          userFullName,
+          imageLink,
+        },
         blurhash,
         created: Date.now(),
       }
@@ -167,7 +176,18 @@ const showImage = ({ url, attribution, blurhash }) => {
 
   const attributionElm = document.createElement('p')
   attributionElm.id = 'image-attribution'
-  attributionElm.innerHTML = attribution
+  const userLink = document.createElement('a')
+  userLink.href = attribution.userLink
+  userLink.textContent = attribution.userFullName
+  const imageLink = document.createElement('a')
+  imageLink.href = attribution.imageLink
+  imageLink.textContent = 'Unsplash'
+  attributionElm.append(
+    document.createTextNode('Photo by '),
+    userLink,
+    document.createTextNode(' on '),
+    imageLink
+  )
   document.body.appendChild(attributionElm)
 }