Implement automatic light/dark mode palettes

src/browser_action/popup.css

@@ -121,6 +121,10 @@ a {
   color: rgb(var(--accent));
 }
 
-select:not([data-value="custom"]) ~ :is([for="font-family-custom"], [id="font-family-custom"]) {
+#font-family:not([data-value="custom"]) ~ :is([for="font-family-custom"], [id="font-family-custom"]) {
+  display: none;
+}
+
+#palette:not([data-value="prefers-color-scheme"]) ~ :is([for="palette-light"], [id="palette-light"], [for="palette-dark"], [id="palette-dark"]) {
   display: none;
 }

src/browser_action/popup.html

@@ -16,6 +16,14 @@ <h4>Change Palette</h4>
         <select id="palette">
           <option value="">Default</option>
         </select>
+        <label for="palette-light"><h5>Light Mode Palette</h4></label>
+        <select id="palette-light">
+          <option value="">Default</option>
+        </select>
+        <label for="palette-dark"><h5>Dark Mode Palette</h4></label>
+        <select id="palette-dark">
+          <option value="">Default</option>
+        </select>
       </div>
       <div>
         <label for="font-family"><h4>Change Font</h4></label>

src/browser_action/render_palettes.js

@@ -6,16 +6,24 @@ const getInstalledPalettes = async function () {
   return data;
 };
 
-const writeSelected = async function ({ target: { value } }) {
-  browser.storage.local.set({ currentPalette: value });
-};
-
-const renderPalettes = async function () {
-  const paletteSelect = document.getElementById('palette');
-  paletteSelect.addEventListener('input', writeSelected);
+const renderPalettes = async function (id, storageKey) {
+  const paletteSelect = document.getElementById(id);
+  paletteSelect.addEventListener('input', ({ target: { value } }) => {
+    paletteSelect.dataset.value = value;
+    browser.storage.local.set({ [storageKey]: value });
+  });
 
   const installedPalettes = await getInstalledPalettes();
-  const { currentPalette } = await browser.storage.local.get('currentPalette');
+  const { [storageKey]: currentPalette = '' } = await browser.storage.local.get(storageKey);
+
+  paletteSelect.dataset.value = currentPalette;
+  if (id === 'palette') {
+    paletteSelect.append(Object.assign(document.createElement('option'), {
+      value: 'prefers-color-scheme',
+      textContent: 'Automatic Light/Dark Mode',
+      selected: currentPalette === 'prefers-color-scheme'
+    }));
+  }
 
   for (const [label, options] of installedPalettes) {
     const optgroup = Object.assign(document.createElement('optgroup'), { label });
@@ -50,6 +58,8 @@ const renderPalettes = async function () {
   }));
 };
 
-renderPalettes();
+renderPalettes('palette', 'currentPalette');
+renderPalettes('palette-light', 'currentLightPalette');
+renderPalettes('palette-dark', 'currentDarkPalette');
 
 document.getElementById('manage-palettes').addEventListener('click', () => browser.runtime.openOptionsPage());

src/main.js

@@ -9,8 +9,18 @@ const removeCssVariable = ([property]) => document.documentElement.style.removeP
 
 let appliedPaletteEntries = [];
 
+const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
 const applyCurrentPalette = async function () {
-  const { currentPalette = '' } = await browser.storage.local.get('currentPalette');
+  let {
+    currentPalette = '',
+    currentLightPalette = '',
+    currentDarkPalette = ''
+  } = await browser.storage.local.get(['currentPalette', 'currentLightPalette', 'currentDarkPalette']);
+
+  if (currentPalette === 'prefers-color-scheme') {
+    currentPalette = darkModeQuery.matches ? currentDarkPalette : currentLightPalette;
+  }
 
   if (!currentPalette) {
     showChangePaletteButton();
@@ -61,16 +71,18 @@ const onStorageChanged = async function (changes, areaName) {
     return;
   }
 
-  const { currentPalette, fontFamily, customFontFamily, fontSize } = changes;
+  const { currentPalette, currentLightPalette, currentDarkPalette, fontFamily, customFontFamily, fontSize } = changes;
 
-  if (currentPalette || Object.keys(changes).some(key => key.startsWith('palette:'))) {
+  if (currentPalette || currentLightPalette || currentDarkPalette || Object.keys(changes).some(key => key.startsWith('palette:'))) {
     applyCurrentPalette();
   }
 
   if (fontFamily || customFontFamily) applyFontFamily();
   if (fontSize) applyFontSize();
 };
 
+darkModeQuery.addEventListener('change', applyCurrentPalette);
+
 applyCurrentPalette();
 applyFontFamily();
 applyFontSize();

src/manifest.json

@@ -41,7 +41,7 @@
   "permissions": [ "storage" ],
   "web_accessible_resources": [ "palettes.json", "paletteData.json" ],
 
-	"minimum_chrome_version": "38",
+	"minimum_chrome_version": "76",
   "browser_specific_settings": {
     "gecko": {
       "strict_min_version": "113.0"