From 298d0334ebaaa634eeeb1c02ac2184f84368e9b1 Mon Sep 17 00:00:00 2001 From: kinghat Date: Tue, 22 Oct 2019 00:45:46 -0500 Subject: [PATCH 1/3] themed the options page --- extension/options.css | 53 ++++++++++++++++++++++++++++++++++++++++ extension/options.html | 55 +++++++++++++++++++++++++----------------- 2 files changed, 86 insertions(+), 22 deletions(-) create mode 100644 extension/options.css diff --git a/extension/options.css b/extension/options.css new file mode 100644 index 0000000..43c6a03 --- /dev/null +++ b/extension/options.css @@ -0,0 +1,53 @@ +:root { + --body-background-color: #ffffff; + --item-border-color: #000000; + --font-color: #000000; + --link-color: #000000; + --input-color: #1e88e5; + --input-text-color: #ffffff; +} + +[data-theme="dark"] { + --body-background-color: #292929; + --item-border-color: #757575; + --font-color: #ffffff; + --link-color: #ffffff; + --input-color: #1e88e5; + --input-text-color: #ffffff; +} + +body { + background-color: var(--body-background-color); + color: var(--font-color); + font-family: sans-serif; + font-size: 10px; +} + +select, +input { + width: 15%; + padding: 5px 5px; + border: none; + background-color: var(--input-color); + color: var(--input-text-color); +} + +div { + border: 1px solid var(--item-border-color); + margin: 5px; + padding: 5px; +} + +a { + color: var(--link-color); + text-decoration: none; +} + +h1 { + margin: 5px; +} + +h3 { + text-align: center; + color: var(--font-color); +} diff --git a/extension/options.html b/extension/options.html index 02f145d..cef5f8b 100644 --- a/extension/options.html +++ b/extension/options.html @@ -2,30 +2,41 @@ + -

Badge

- -

Notification

- -

Max

- -

Theme

- -

Ignore Updates Without Changelogs

- +
+

Badge

+ +
+
+

Notification

+ +
+
+

Max

+ +
+
+

Theme

+ +
+
+

Ignore Updates Without Changelogs

+ +

Help

From d9b02e65c9e7e94aa46593814b0a0af919e4aac9 Mon Sep 17 00:00:00 2001 From: kinghat Date: Tue, 22 Oct 2019 00:46:19 -0500 Subject: [PATCH 2/3] made theme selection apply instantly --- extension/options.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/extension/options.js b/extension/options.js index 6dd8bbf..5e55f71 100644 --- a/extension/options.js +++ b/extension/options.js @@ -6,6 +6,9 @@ const ignore_no_changelogs = document.getElementById("ignore_no_changelogs"); async function load() { const res = await browser.storage.local.get("options"); + if (res.options.theme === "dark") { + document.documentElement.setAttribute("data-theme", "dark"); + } badge.value = res.options.badge; notification.value = res.options.notification; max.value = res.options.max; @@ -22,7 +25,11 @@ async function save() { theme: theme.value, ignore_no_changelogs: JSON.parse(ignore_no_changelogs.value) } + }).then(() => { + if (theme.value === "dark") {document.documentElement.setAttribute("data-theme", "dark").load()}; + if (theme.value === "light") {document.documentElement.removeAttribute("data-theme").load()}; }); + } document.addEventListener("DOMContentLoaded", load); From 8db6ac1125b22905c92f2cf9fbc6f14a2b651112 Mon Sep 17 00:00:00 2001 From: Joe Jarvis Date: Tue, 29 Oct 2019 09:36:00 -0400 Subject: [PATCH 3/3] Use dataset over setAttribute --- extension/options.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/extension/options.js b/extension/options.js index 5e55f71..ae52cee 100644 --- a/extension/options.js +++ b/extension/options.js @@ -7,7 +7,7 @@ const ignore_no_changelogs = document.getElementById("ignore_no_changelogs"); async function load() { const res = await browser.storage.local.get("options"); if (res.options.theme === "dark") { - document.documentElement.setAttribute("data-theme", "dark"); + document.documentElement.dataset.theme = "dark"; } badge.value = res.options.badge; notification.value = res.options.notification; @@ -17,7 +17,7 @@ async function load() { } async function save() { - browser.storage.local.set({ + await browser.storage.local.set({ options: { badge: JSON.parse(badge.value), notification: JSON.parse(notification.value), @@ -25,11 +25,8 @@ async function save() { theme: theme.value, ignore_no_changelogs: JSON.parse(ignore_no_changelogs.value) } - }).then(() => { - if (theme.value === "dark") {document.documentElement.setAttribute("data-theme", "dark").load()}; - if (theme.value === "light") {document.documentElement.removeAttribute("data-theme").load()}; }); - + document.documentElement.dataset.theme = theme.value; } document.addEventListener("DOMContentLoaded", load);