Add theme option
This commit is contained in:
parent
56f85ef661
commit
f5d6b8617a
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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 (
|
||||
<HashRouter hashType="noslash">
|
||||
<ScrollToTop>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
.title {
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
color: var(--sub-text);
|
||||
cursor: default;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue