From 052a6308971d1534c199c21d3afd76afbeaa2a55 Mon Sep 17 00:00:00 2001
From: Kazuhiro Miyata <18201546+k-miyata@users.noreply.github.com>
Date: Mon, 17 Jun 2024 02:27:19 +0900
Subject: [PATCH 1/3] Add color scheme preference
---
src/_locales/en/messages.json | 16 +++++++++
src/_locales/ja/messages.json | 16 +++++++++
src/main.css | 62 +++++++++++++++++------------------
src/main.js | 50 +++++++++++++++++++++++++++-
src/manifest.json | 6 ++++
src/popup.html | 31 ++++++++++++++++++
src/popup.js | 35 ++++++++++++++++++++
7 files changed, 183 insertions(+), 33 deletions(-)
create mode 100644 src/popup.html
create mode 100644 src/popup.js
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index dc33608..b29f5bd 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -6,5 +6,21 @@
"extension_description": {
"message": "Changes the background of Note to the more eye-friendly colors.",
"description": "The description of this extention."
+ },
+ "color_scheme_preference_caption": {
+ "message": "Color Scheme",
+ "description": "The caption for the preference that changes the color scheme."
+ },
+ "color_scheme_preference_auto_option_label": {
+ "message": "Auto",
+ "description": "The label for the option that changes the color scheme based on the system preferences."
+ },
+ "color_scheme_preference_light_option_label": {
+ "message": "Light",
+ "description": "The label for the option that changes the color scheme to light."
+ },
+ "color_scheme_preference_dark_option_label": {
+ "message": "Dark",
+ "description": "The label for the option that changes the color scheme to dark."
}
}
diff --git a/src/_locales/ja/messages.json b/src/_locales/ja/messages.json
index fec2578..6f50423 100644
--- a/src/_locales/ja/messages.json
+++ b/src/_locales/ja/messages.json
@@ -6,5 +6,21 @@
"extension_description": {
"message": "noteの背景を目に優しい色に変更します。",
"description": "この拡張機能の説明。"
+ },
+ "color_scheme_preference_caption": {
+ "message": "配色",
+ "description": "カラースキームを変更する設定のキャプション。"
+ },
+ "color_scheme_preference_auto_option_label": {
+ "message": "自動",
+ "description": "カラースキームをシステム設定に合わせるオプションのラベル。"
+ },
+ "color_scheme_preference_light_option_label": {
+ "message": "ライト",
+ "description": "カラースキームをライトモードにするオプションのラベル。"
+ },
+ "color_scheme_preference_dark_option_label": {
+ "message": "ダーク",
+ "description": "カラースキームをダークモードにするオプションのラベル。"
}
}
diff --git a/src/main.css b/src/main.css
index ba35dc8..539b4a5 100644
--- a/src/main.css
+++ b/src/main.css
@@ -3,36 +3,34 @@
--color-background-primary: hsl(166deg 2% 92%);
}
-@media (prefers-color-scheme: dark) {
- :root.chrome-extension-note-friendly {
- --color-whiteAlpha-700: hsl(0deg 0% 0% / 0.82);
- --color-blackAlpha-900: hsl(0deg 0% 100%);
- --color-blackAlpha-600: hsl(0deg 0% 100% / 0.66);
- --color-grayAlpha-600: hsl(230deg 26% 92% / 0.66);
- --color-grayAlpha-300: hsl(230deg 26% 92% / 0.32);
- --color-grayAlpha-200: hsl(230deg 26% 92% / 0.22);
- --color-gray-900: hsl(230deg 26% 92%);
- --color-note-accent: hsl(172deg 68% 50%);
- --color-note-accent-reaction: hsl(172deg 68% 74%);
- --color-custom-accent: hsl(172deg 68% 50%);
- --color-custom-accent-reaction: hsl(172deg 68% 74%);
- --color-surface-primary: hsl(172deg 68% 50%);
- --color-surface-normal: hsl(172deg 1% 16%);
- --color-surface-successSubdued: hsl(172deg 6% 16%);
- --color-text-primary: hsl(0deg 0% 98%);
- --color-text-secondary: hsl(230deg 26% 92% / 0.66);
- --color-text-clickable-icon: hsl(230deg 26% 92% / 0.50);
- --color-text-success: hsl(172deg 68% 50%);
- --color-text-success-reaction: hsl(172deg 68% 74%);
- --color-text-caution: hsl(38deg 100% 67%);
- --color-text-like: hsl(340deg 100% 68%);
- --color-text-invert: hsl(0deg 0% 0%);
- --color-text-placeholder: hsl(230deg 10% 72%);
- --color-border-default: hsl(230deg 26% 92% / 0.14);
- --color-border-weak: hsl(230deg 26% 92% / 0.03);
- --color-border-strong: hsl(230deg 26% 92% / 0.22);
- --color-background-primary: hsl(172deg 1% 16%);
- --color-background-default: hsl(172deg 1% 16%);
- --color-background-secondary: hsl(172deg 1% 20%);
- }
+:root.chrome-extension-note-friendly[data-chrome-extension-note-friendly-color-scheme=dark] {
+ --color-whiteAlpha-700: hsl(0deg 0% 0% / 0.82);
+ --color-blackAlpha-900: hsl(0deg 0% 100%);
+ --color-blackAlpha-600: hsl(0deg 0% 100% / 0.66);
+ --color-grayAlpha-600: hsl(230deg 26% 92% / 0.66);
+ --color-grayAlpha-300: hsl(230deg 26% 92% / 0.32);
+ --color-grayAlpha-200: hsl(230deg 26% 92% / 0.22);
+ --color-gray-900: hsl(230deg 26% 92%);
+ --color-note-accent: hsl(172deg 68% 50%);
+ --color-note-accent-reaction: hsl(172deg 68% 74%);
+ --color-custom-accent: hsl(172deg 68% 50%);
+ --color-custom-accent-reaction: hsl(172deg 68% 74%);
+ --color-surface-primary: hsl(172deg 68% 50%);
+ --color-surface-normal: hsl(172deg 1% 16%);
+ --color-surface-successSubdued: hsl(172deg 6% 16%);
+ --color-text-primary: hsl(0deg 0% 98%);
+ --color-text-secondary: hsl(230deg 26% 92% / 0.66);
+ --color-text-clickable-icon: hsl(230deg 26% 92% / 0.50);
+ --color-text-success: hsl(172deg 68% 50%);
+ --color-text-success-reaction: hsl(172deg 68% 74%);
+ --color-text-caution: hsl(38deg 100% 67%);
+ --color-text-like: hsl(340deg 100% 68%);
+ --color-text-invert: hsl(0deg 0% 0%);
+ --color-text-placeholder: hsl(230deg 10% 72%);
+ --color-border-default: hsl(230deg 26% 92% / 0.14);
+ --color-border-weak: hsl(230deg 26% 92% / 0.03);
+ --color-border-strong: hsl(230deg 26% 92% / 0.22);
+ --color-background-primary: hsl(172deg 1% 16%);
+ --color-background-default: hsl(172deg 1% 16%);
+ --color-background-secondary: hsl(172deg 1% 20%);
}
diff --git a/src/main.js b/src/main.js
index 347eb2a..b1c2727 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,15 +14,63 @@ function isArticlePageOnCustomDomain() {
return /^\/n\/n[a-z0-9]{12}$/.test(document.location.pathname);
}
+/**
+ * Returns whether the extension should apply the styles.
+ */
+function shouldApplyStyles() {
+ return isNoteDomain() || isArticlePageOnCustomDomain();
+}
+
+const prefersDarkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+/**
+ * Sets the data attribute to `` to apply the color scheme.
+ */
+function applyColorScheme(value) {
+ if (shouldApplyStyles()) {
+ let colorScheme = value;
+ if (value === "auto") {
+ if (prefersDarkMediaQuery.matches) {
+ colorScheme = "dark";
+ } else {
+ colorScheme = "light";
+ }
+ }
+ document.documentElement.dataset.chromeExtensionNoteFriendlyColorScheme = colorScheme;
+ }
+}
+
+/**
+ * Applies the color scheme the user choices in the popup.
+ */
+async function applyCurrentColorScheme() {
+ const results = await chrome.storage.local.get("colorScheme");
+ const { colorScheme } = results;
+ if (colorScheme) {
+ applyColorScheme(colorScheme);
+ }
+}
+
/**
* Adds the class to `` to apply the styles.
*/
function applyStyles() {
- if (isNoteDomain() || isArticlePageOnCustomDomain()) {
+ if (shouldApplyStyles()) {
document.documentElement.classList.add("chrome-extension-note-friendly");
}
}
+applyCurrentColorScheme();
+
+chrome.storage.onChanged.addListener((changes) => {
+ const { colorScheme } = changes;
+ if (colorScheme) {
+ applyColorScheme(colorScheme.newValue);
+ }
+});
+
+prefersDarkMediaQuery.addEventListener("change", applyCurrentColorScheme);
+
// This content script is injected after the DOM is complete, so you can access
// the DOM without listening to the `DOMContentLoaded` event. See the
// documentation for details on when content scripts are injected:
diff --git a/src/manifest.json b/src/manifest.json
index 2e2cfff..f799483 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -7,6 +7,12 @@
"128": "icon_128.png"
},
"default_locale": "en",
+ "permissions": [
+ "storage"
+ ],
+ "action": {
+ "default_popup": "popup.html"
+ },
"content_scripts": [
{
"matches": [
diff --git a/src/popup.html b/src/popup.html
new file mode 100644
index 0000000..a332950
--- /dev/null
+++ b/src/popup.html
@@ -0,0 +1,31 @@
+
+
+
+
+ Note Friendly
+
+
+
+
+
+
diff --git a/src/popup.js b/src/popup.js
new file mode 100644
index 0000000..9ef70c0
--- /dev/null
+++ b/src/popup.js
@@ -0,0 +1,35 @@
+"use strict";
+
+function translate() {
+ document.querySelectorAll("[data-locale]").forEach((element) => {
+ element.textContent = chrome.i18n.getMessage(element.dataset.locale);
+ });
+}
+
+async function getCurrentPreferences() {
+ const results = await chrome.storage.local.get("colorScheme");
+ const { colorScheme } = results;
+ if (colorScheme) {
+ const radio = document.querySelector(`input[name=colorScheme][value='${colorScheme}']`);
+ if (radio) {
+ radio.checked = true;
+ }
+ }
+}
+
+async function setColorScheme(value) {
+ await chrome.storage.local.set({ colorScheme: value });
+ getCurrentPreferences();
+}
+
+function addEventListenersToControls() {
+ document.querySelectorAll("input[name=colorScheme]").forEach((radio) => {
+ radio.addEventListener("change", (event) => {
+ setColorScheme(event.currentTarget.value);
+ });
+ });
+}
+
+document.addEventListener("DOMContentLoaded", translate);
+document.addEventListener("DOMContentLoaded", getCurrentPreferences);
+document.addEventListener("DOMContentLoaded", addEventListenersToControls);
From 2d9b044c202ff16a3bdc33602ba3b9bea3b3183d Mon Sep 17 00:00:00 2001
From: Kazuhiro Miyata <18201546+k-miyata@users.noreply.github.com>
Date: Sat, 6 Jul 2024 22:18:54 +0900
Subject: [PATCH 2/3] Add style to color scheme preference
---
src/popup.css | 18 ++++++++++++++++++
src/popup.html | 13 +++++++------
2 files changed, 25 insertions(+), 6 deletions(-)
create mode 100644 src/popup.css
diff --git a/src/popup.css b/src/popup.css
new file mode 100644
index 0000000..ecd7c53
--- /dev/null
+++ b/src/popup.css
@@ -0,0 +1,18 @@
+:root {
+ color-scheme: light dark;
+}
+
+body {
+ width: 8rem;
+}
+
+.label {
+ display: inline-flex;
+ padding: 0.25em;
+ gap: 0.5em;
+ align-items: center;
+}
+
+.radio {
+ margin: 0;
+}
diff --git a/src/popup.html b/src/popup.html
index a332950..14749aa 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -4,25 +4,26 @@
Note Friendly
+