From de6f06d565d427704f97e98ce53dea75ed220452 Mon Sep 17 00:00:00 2001 From: Marcus Date: Wed, 11 Sep 2024 16:10:35 -0700 Subject: [PATCH 1/3] implement ui --- src/browser_action/popup.css | 6 +++++- src/browser_action/popup.html | 8 ++++++++ src/browser_action/render_palettes.js | 28 ++++++++++++++++++--------- src/main.js | 16 ++++++++++++--- 4 files changed, 45 insertions(+), 13 deletions(-) diff --git a/src/browser_action/popup.css b/src/browser_action/popup.css index 6576ed8..dd78bb7 100644 --- a/src/browser_action/popup.css +++ b/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; } diff --git a/src/browser_action/popup.html b/src/browser_action/popup.html index fef75d0..1a1a3ba 100644 --- a/src/browser_action/popup.html +++ b/src/browser_action/popup.html @@ -16,6 +16,14 @@

Change Palette

+ + + +
diff --git a/src/browser_action/render_palettes.js b/src/browser_action/render_palettes.js index ae315f3..02cef5d 100644 --- a/src/browser_action/render_palettes.js +++ b/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()); diff --git a/src/main.js b/src/main.js index 0ae112a..3594f8c 100644 --- a/src/main.js +++ b/src/main.js @@ -10,7 +10,17 @@ const removeCssVariable = ([property]) => document.documentElement.style.removeP let appliedPaletteEntries = []; 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') { + // todo: implement dark mode + console.log({ currentLightPalette, currentDarkPalette }); + currentPalette = currentLightPalette; + } if (!currentPalette) { showChangePaletteButton(); @@ -61,9 +71,9 @@ 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(); } From 7a7e3a1d749fc8abd26462317a4555a83b37bf32 Mon Sep 17 00:00:00 2001 From: Marcus Date: Thu, 12 Sep 2024 00:19:39 -0700 Subject: [PATCH 2/3] implement media query --- src/main.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/main.js b/src/main.js index 3594f8c..42f2ef6 100644 --- a/src/main.js +++ b/src/main.js @@ -9,6 +9,8 @@ const removeCssVariable = ([property]) => document.documentElement.style.removeP let appliedPaletteEntries = []; +const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)'); + const applyCurrentPalette = async function () { let { currentPalette = '', @@ -17,9 +19,7 @@ const applyCurrentPalette = async function () { } = await browser.storage.local.get(['currentPalette', 'currentLightPalette', 'currentDarkPalette']); if (currentPalette === 'prefers-color-scheme') { - // todo: implement dark mode - console.log({ currentLightPalette, currentDarkPalette }); - currentPalette = currentLightPalette; + currentPalette = darkModeQuery.matches ? currentDarkPalette : currentLightPalette; } if (!currentPalette) { @@ -81,6 +81,8 @@ const onStorageChanged = async function (changes, areaName) { if (fontSize) applyFontSize(); }; +darkModeQuery.addEventListener('change', applyCurrentPalette); + applyCurrentPalette(); applyFontFamily(); applyFontSize(); From 1f770e69c16976a8fe7d8c2743621ccb54dcead5 Mon Sep 17 00:00:00 2001 From: Marcus Date: Thu, 12 Sep 2024 02:11:32 -0700 Subject: [PATCH 3/3] bump minimum chrome version --- src/manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/manifest.json b/src/manifest.json index 94c7a2f..e245bc7 100644 --- a/src/manifest.json +++ b/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"