From f5d6b8617a2fb52d037ceddb841c6487cfcd8adb Mon Sep 17 00:00:00 2001 From: sienori Date: Thu, 7 Jan 2021 21:55:56 +0900 Subject: [PATCH] Add theme option --- src/_locales/en/messages.json | 12 +++++++++++ src/options/components/OptionsPage.js | 13 ++++++++++++ src/options/styles/OptionContainer.scss | 11 +++++++--- src/options/styles/OptionsPage.scss | 17 ++++++++++++++-- src/popup/components/PopupPage.js | 1 + src/popup/styles/Footer.scss | 2 ++ src/popup/styles/Header.scss | 2 +- src/popup/styles/InputArea.scss | 2 ++ src/popup/styles/PopupPage.scss | 17 ++++++++++++++-- src/settings/defaultSettings.js | 27 ++++++++++++++++++++++--- 10 files changed, 93 insertions(+), 11 deletions(-) diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index bdd1757..4ebe5f8 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -158,6 +158,18 @@ "styleLabel": { "message": "Style" }, + "themeLabel": { + "message": "Theme" + }, + "themeCaptionLabel": { + "message": "Specify the color scheme." + }, + "lightLabel": { + "message": "Light" + }, + "darkLabel": { + "message": "Dark" + }, "buttonStyleLabel": { "message": "Translation button" }, diff --git a/src/options/components/OptionsPage.js b/src/options/components/OptionsPage.js index ee79333..2a20071 100644 --- a/src/options/components/OptionsPage.js +++ b/src/options/components/OptionsPage.js @@ -1,11 +1,24 @@ import React from "react"; +import browser from "webextension-polyfill"; import { HashRouter } from "react-router-dom"; +import { initSettings, getSettings } from "../../settings/settings"; import SideBar from "./SideBar"; import ContentsArea from "./ContentsArea"; import ScrollToTop from "./ScrollToTop"; import "../styles/OptionsPage.scss"; +const setupTheme = async () => { + await initSettings(); + document.body.dataset.theme = getSettings("theme"); + + browser.storage.onChanged.addListener((changes) => { + if (changes.Settings.newValue.theme === changes.Settings.oldValue.theme) return; + document.body.dataset.theme = changes.Settings.newValue.theme; + }); +}; + export default () => { + setupTheme(); return ( diff --git a/src/options/styles/OptionContainer.scss b/src/options/styles/OptionContainer.scss index 3b6d4a1..c6e4874 100644 --- a/src/options/styles/OptionContainer.scss +++ b/src/options/styles/OptionContainer.scss @@ -83,6 +83,8 @@ input, textarea { font-family: inherit; font-size: 14px; + background-color: var(--sub-bg); + color: var(--main-text); } textarea { @@ -224,6 +226,8 @@ input[type="color"] { /*select*/ select { + background-color: var(--sub-bg); + color: var(--main-text); -moz-appearance: none; -webkit-appearance: none; text-overflow: ellipsis; @@ -233,6 +237,7 @@ select { padding-right: 20px; width: 100%; height: 30px; + scrollbar-color: var(--button) var(--line); &:hover, &:focus { border: var(--highlight) solid 1px; @@ -278,12 +283,12 @@ input[type="button"], color: var(--main-text); border: 1px solid var(--button); border-radius: 2px; - background-color: #fbfbfb; + background-color: var(--line); cursor: pointer; white-space: nowrap; &:hover, &:focus { - background: #f5f5f5; + background-color: var(--button); border-color: var(--highlight); } &.includeSpan { @@ -302,7 +307,7 @@ input[type="button"], justify-content: center; align-items: center; &:focus-within { - background: #f5f5f5; + background-color: var(--button); border-color: var(--highlight); } } diff --git a/src/options/styles/OptionsPage.scss b/src/options/styles/OptionsPage.scss index bbc1edf..77f29ed 100644 --- a/src/options/styles/OptionsPage.scss +++ b/src/options/styles/OptionsPage.scss @@ -1,11 +1,25 @@ -:root { +body { + background-color: var(--main-bg); + --main-text: #0c0c0d; --sub-text: #737373; --line: #ededf0; --button: #d7d7db; --highlight: #5595ff; --main-bg: #ffffff; + --sub-bg: #ffffff; --new: #ff4f4f; + + &[data-theme="dark"] { + --main-text: #e6e6e6; + --sub-text: #aaaaaa; + --line: #373737; + --button: #929292; + --highlight: #5595ff; + --main-bg: #181818; + --sub-bg: #101010; + --new: #ed5f5f; + } } .optionsPage { @@ -14,7 +28,6 @@ font-size: 15px; font-weight: 400; color: var(--main-text); - background-color: var(--main-bg); line-height: 1.5; margin: 20px 40px; } diff --git a/src/popup/components/PopupPage.js b/src/popup/components/PopupPage.js index 04faa4b..cb681be 100644 --- a/src/popup/components/PopupPage.js +++ b/src/popup/components/PopupPage.js @@ -54,6 +54,7 @@ export default class PopupPage extends Component { overWriteLogLevel(); updateLogLevel(); + document.body.dataset.theme = getSettings("theme"); const targetLang = getSettings("targetLang"); this.setState({ targetLang: targetLang diff --git a/src/popup/styles/Footer.scss b/src/popup/styles/Footer.scss index ef799e9..a747760 100644 --- a/src/popup/styles/Footer.scss +++ b/src/popup/styles/Footer.scss @@ -47,12 +47,14 @@ -webkit-appearance: none; text-overflow: ellipsis; background-color: var(--main-bg); + color: var(--main-text); border: var(--button) solid 1px; border-radius: 2px; padding: 3px 5px; padding-right: 20px; width: 100%; transition: border-color 100ms ease-out; + scrollbar-color: var(--button) var(--line); &:hover { border-color: var(--highlight); } diff --git a/src/popup/styles/Header.scss b/src/popup/styles/Header.scss index 9904a13..a1e7428 100644 --- a/src/popup/styles/Header.scss +++ b/src/popup/styles/Header.scss @@ -12,7 +12,7 @@ .title { font-size: 15px; font-weight: 400; - color: #666; + color: var(--sub-text); cursor: default; flex-shrink: 0; } diff --git a/src/popup/styles/InputArea.scss b/src/popup/styles/InputArea.scss index 78b1454..107ab35 100644 --- a/src/popup/styles/InputArea.scss +++ b/src/popup/styles/InputArea.scss @@ -6,6 +6,7 @@ font: inherit; resize: none; overflow: auto; + color: var(--main-text); background-color: var(--main-bg); box-sizing: border-box; @@ -18,6 +19,7 @@ padding: 10px; border: solid 1px var(--button); border-radius: 2px; + outline: none; transition: border-color 100ms ease-out; } diff --git a/src/popup/styles/PopupPage.scss b/src/popup/styles/PopupPage.scss index bfbab9f..44c6cf0 100644 --- a/src/popup/styles/PopupPage.scss +++ b/src/popup/styles/PopupPage.scss @@ -21,9 +21,7 @@ body { ::-moz-selection { background: var(--line); } -} -:root { --main-text: #0c0c0d; --sub-text: #737373; --line: #ededf0; @@ -35,4 +33,19 @@ body { --warn: #ff8f00; --success: #058b00; --info: #0a84ff; + + &[data-theme="dark"] { + --main-text: #e6e6e6; + --sub-text: #aaaaaa; + --line: #373737; + --button: #929292; + --highlight: #5595ff; + --main-bg: #181818; + --highlight-bg: #2e4343; + --confirm: #ed5f5f; + --error: #ca1532; + --warn: #ee8e12; + --success: #2a9c26; + --info: #1471d0; + } } diff --git a/src/settings/defaultSettings.js b/src/settings/defaultSettings.js index 885f34f..cb5690b 100644 --- a/src/settings/defaultSettings.js +++ b/src/settings/defaultSettings.js @@ -14,6 +14,8 @@ const getDefaultLangs = () => { const langListOptions = generateLangOptions(); const defaultLangs = getDefaultLangs(); +const getTheme = () => + window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light"; export default [ { @@ -91,6 +93,7 @@ export default [ title: "modifierKeyLabel", captions: [], type: "none", + new: true, childElements: [ { id: "ifOnlyTranslateWhenModifierKeyPressed", @@ -185,6 +188,24 @@ export default [ { category: "styleLabel", elements: [ + { + id: "theme", + title: "themeLabel", + captions: ["themeCaptionLabel"], + type: "select", + default: getTheme(), + options: [ + { + name: "lightLabel", + value: "light" + }, + { + name: "darkLabel", + value: "dark" + } + ], + new: true + }, { title: "buttonStyleLabel", captions: ["buttonStyleCaptionLabel"], @@ -357,21 +378,21 @@ export default [ title: "resultFontColorLabel", captions: [], type: "color", - default: "#000000" + default: getTheme() === "light" ? "#000000" : "#e6e6e6" }, { id: "candidateFontColor", title: "candidateFontColorLabel", captions: [], type: "color", - default: "#737373" + default: getTheme() === "light" ? "#737373" : "#aaaaaa" }, { id: "bgColor", title: "bgColorLabel", captions: [], type: "color", - default: "#ffffff" + default: getTheme() === "light" ? "#ffffff" : "#181818" } ] }