diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index 3f0bed6..88eb115 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -227,6 +227,9 @@ "darkLabel": { "message": "Dark" }, + "systemLabel": { + "message": "System" + }, "buttonStyleLabel": { "message": "Translation button" }, @@ -299,6 +302,9 @@ "resultFontColorLabel": { "message": "Font color of translation result" }, + "isOverrideColorsLabel": { + "message": "Override default colors with colors below" + }, "candidateFontColorLabel": { "message": "Font color of translation candidates" }, @@ -782,4 +788,4 @@ "lang_zh": { "message": "Chinese" } -} \ No newline at end of file +} diff --git a/src/content/components/TranslatePanel.js b/src/content/components/TranslatePanel.js index 6ad604d..0aaf05b 100644 --- a/src/content/components/TranslatePanel.js +++ b/src/content/components/TranslatePanel.js @@ -3,6 +3,7 @@ import React, { Component } from "react"; import ReactDOM from "react-dom"; import { getSettings } from "src/settings/settings"; import "../styles/TranslatePanel.scss"; +import { getBackgroundColor, getCandidateFontColor, getResultFontColor } from "../../settings/defaultColors"; const splitLine = text => { const regex = /(\n)/g; @@ -173,17 +174,17 @@ export default class TranslatePanel extends Component { top: this.state.panelPosition.y, left: this.state.panelPosition.x, fontSize: parseInt(getSettings("fontSize")), - backgroundColor: getSettings("bgColor") }; + + const backgroundColor = getBackgroundColor() + if (backgroundColor) { + panelStyles.backgroundColor = backgroundColor.backgroundColor + } + const wrapperStyles = { overflow: this.state.isOverflow ? "auto" : "hidden" }; - const resultStyles = { - color: getSettings("resultFontColor") - }; - const candidateStyles = { - color: getSettings("candidateFontColor") - }; + const translationApi = getSettings("translationApi"); return ( @@ -195,10 +196,10 @@ export default class TranslatePanel extends Component {
-

+

{splitLine(resultText)}

-

+

{splitLine(candidateText)}

{isError && ( diff --git a/src/content/index.js b/src/content/index.js index 2b67d15..54646cf 100644 --- a/src/content/index.js +++ b/src/content/index.js @@ -216,7 +216,9 @@ const showTranslateContainer = ( if (element) return; if (!isEnabled) return; - document.body.insertAdjacentHTML("beforeend", "
"); + const themeClass = getSettings("theme") + "-theme"; + + document.body.insertAdjacentHTML("beforeend", `
`); ReactDOM.render( { await initSettings(); - document.body.dataset.theme = getSettings("theme"); + document.body.classList.add(getSettings("theme") + "-theme"); browser.storage.onChanged.addListener((changes) => { - if (changes.Settings.newValue.theme === changes.Settings.oldValue.theme) return; - document.body.dataset.theme = changes.Settings.newValue.theme; + if (changes.Settings.newValue.theme === changes.Settings.oldValue.theme) + return; + + document.body.classList.replace( + changes.Settings.oldValue.theme + "-theme", + changes.Settings.newValue.theme + "-theme" + ); }); }; diff --git a/src/options/styles/OptionsPage.scss b/src/options/styles/OptionsPage.scss index 77f29ed..0f75be1 100644 --- a/src/options/styles/OptionsPage.scss +++ b/src/options/styles/OptionsPage.scss @@ -1,6 +1,4 @@ -body { - background-color: var(--main-bg); - +.light-theme { --main-text: #0c0c0d; --sub-text: #737373; --line: #ededf0; @@ -9,8 +7,32 @@ body { --main-bg: #ffffff; --sub-bg: #ffffff; --new: #ff4f4f; +} - &[data-theme="dark"] { +.dark-theme { + --main-text: #e6e6e6; + --sub-text: #aaaaaa; + --line: #373737; + --button: #929292; + --highlight: #5595ff; + --main-bg: #181818; + --sub-bg: #101010; + --new: #ed5f5f; +} + +.system-theme { + --main-text: #0c0c0d; + --sub-text: #737373; + --line: #ededf0; + --button: #d7d7db; + --highlight: #5595ff; + --main-bg: #ffffff; + --sub-bg: #ffffff; + --new: #ff4f4f; +} + +@media (prefers-color-scheme: dark) { + .system-theme { --main-text: #e6e6e6; --sub-text: #aaaaaa; --line: #373737; @@ -22,9 +44,13 @@ body { } } +body { + background-color: var(--main-bg); +} + .optionsPage { - font-family: "Segoe UI", "San Francisco", "Ubuntu", "Fira Sans", "Roboto", "Arial", "Helvetica", - sans-serif; + font-family: "Segoe UI", "San Francisco", "Ubuntu", "Fira Sans", "Roboto", + "Arial", "Helvetica", sans-serif; font-size: 15px; font-weight: 400; color: var(--main-text); diff --git a/src/popup/components/PopupPage.js b/src/popup/components/PopupPage.js index 08c3329..ebebd0f 100644 --- a/src/popup/components/PopupPage.js +++ b/src/popup/components/PopupPage.js @@ -10,6 +10,7 @@ import InputArea from "./InputArea"; import ResultArea from "./ResultArea"; import Footer from "./Footer"; import "../styles/PopupPage.scss"; +import { getBackgroundColor } from "../../settings/defaultColors"; const logDir = "popup/PopupPage"; @@ -58,7 +59,8 @@ export default class PopupPage extends Component { overWriteLogLevel(); updateLogLevel(); - document.body.dataset.theme = getSettings("theme"); + this.themeClass = getSettings("theme") + "-theme"; + document.body.classList.add(this.themeClass) const targetLang = getSettings("targetLang"); let langHistory = getSettings("langHistory"); if (!langHistory) { diff --git a/src/popup/styles/PopupPage.scss b/src/popup/styles/PopupPage.scss index b58a0ff..14b4a25 100644 --- a/src/popup/styles/PopupPage.scss +++ b/src/popup/styles/PopupPage.scss @@ -1,11 +1,71 @@ +.light-theme { + --main-text: #0c0c0d; + --sub-text: #737373; + --line: #ededf0; + --button: #d7d7db; + --highlight: #5595ff; + --main-bg: #ffffff; + --confirm: #ff4f4f; + --error: #d70022; + --warn: #ff8f00; + --success: #058b00; + --info: #0a84ff; +} + +.dark-theme { + --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; +} + +.system-theme { + --main-text: #0c0c0d; + --sub-text: #737373; + --line: #ededf0; + --button: #d7d7db; + --highlight: #5595ff; + --main-bg: #ffffff; + --confirm: #ff4f4f; + --error: #d70022; + --warn: #ff8f00; + --success: #058b00; + --info: #0a84ff; +} + +@media (prefers-color-scheme: dark) { + .system-theme { + --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; + } +} + html { scrollbar-width: none; } body { margin: 0; - font-family: "Segoe UI", "San Francisco", "Ubuntu", "Fira Sans", "Roboto", "Arial", "Helvetica", - sans-serif; + font-family: "Segoe UI", "San Francisco", "Ubuntu", "Fira Sans", "Roboto", + "Arial", "Helvetica", sans-serif; font-size: 13px; width: 100%; min-width: 348px; @@ -26,31 +86,4 @@ body { ::-moz-selection { background: var(--line); } - - --main-text: #0c0c0d; - --sub-text: #737373; - --line: #ededf0; - --button: #d7d7db; - --highlight: #5595ff; - --main-bg: #ffffff; - --confirm: #ff4f4f; - --error: #d70022; - --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/defaultColors.js b/src/settings/defaultColors.js new file mode 100644 index 0000000..177dc0c --- /dev/null +++ b/src/settings/defaultColors.js @@ -0,0 +1,41 @@ +import { getSettings } from "./settings"; + +export const RESULT_FONT_COLOR_LIGHT = "#000000"; +export const RESULT_FONT_COLOR_DARK = "#e6e6e6"; +export const CANDIDATE_FONT_COLOR_LIGHT = "#737373"; +export const CANDIDATE_FONT_COLOR_DARK = "#aaaaaa"; +export const BG_COLOR_LIGHT = "#ffffff"; +export const BG_COLOR_DARK = "#181818"; + +/** + * Return style object if color override is enabled + */ +export function getResultFontColor() { + const isOverrideColors = getSettings("isOverrideColors"); + + if (!isOverrideColors) return undefined; + + return { color: getSettings("resultFontColor") }; +} + +/** + * Return style object if color override is enabled + */ +export function getCandidateFontColor() { + const isOverrideColors = getSettings("isOverrideColors"); + + if (!isOverrideColors) return undefined; + + return { color: getSettings("candidateFontColor") }; +} + +/** + * Return style object if color override is enabled + */ +export function getBackgroundColor() { + const isOverrideColors = getSettings("isOverrideColors"); + + if (!isOverrideColors) return undefined; + + return { backgroundColor: getSettings("bgColor") }; +} diff --git a/src/settings/defaultSettings.js b/src/settings/defaultSettings.js index e05fc7f..6225910 100644 --- a/src/settings/defaultSettings.js +++ b/src/settings/defaultSettings.js @@ -2,6 +2,14 @@ import React from "react"; import browser from "webextension-polyfill"; import generateLangOptions from "src/common/generateLangOptions"; import { getSettings, setSettings } from "./settings"; +import { + RESULT_FONT_COLOR_LIGHT, + RESULT_FONT_COLOR_DARK, + CANDIDATE_FONT_COLOR_LIGHT, + CANDIDATE_FONT_COLOR_DARK, + BG_COLOR_LIGHT, + BG_COLOR_DARK +} from "./defaultColors" const getDefaultLangs = () => { const uiLang = browser.i18n.getUILanguage(); @@ -300,7 +308,7 @@ export default [ title: "themeLabel", captions: ["themeCaptionLabel"], type: "select", - default: getTheme(), + default: 'system', options: [ { name: "lightLabel", @@ -309,6 +317,10 @@ export default [ { name: "darkLabel", value: "dark" + }, + { + name: "systemLabel", + value: "system" } ] }, @@ -479,27 +491,40 @@ export default [ default: 10, placeholder: 10 }, + { + id: "isOverrideColors", + title: "isOverrideColorsLabel", + captions: [], + type: "checkbox", + default: false + }, { id: "resultFontColor", title: "resultFontColorLabel", captions: [], type: "color", - default: getTheme() === "light" ? "#000000" : "#e6e6e6" + default: + getTheme() === "light" + ? RESULT_FONT_COLOR_LIGHT + : RESULT_FONT_COLOR_DARK, }, { id: "candidateFontColor", title: "candidateFontColorLabel", captions: [], type: "color", - default: getTheme() === "light" ? "#737373" : "#aaaaaa" + default: + getTheme() === "light" + ? CANDIDATE_FONT_COLOR_LIGHT + : CANDIDATE_FONT_COLOR_DARK, }, { id: "bgColor", title: "bgColorLabel", captions: [], type: "color", - default: getTheme() === "light" ? "#ffffff" : "#181818" - } + default: getTheme() === "light" ? BG_COLOR_LIGHT : BG_COLOR_DARK, + }, ] } ]