Add theme option

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"
   },

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 (
     <HashRouter hashType="noslash">
       <ScrollToTop>

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);
   }
 }

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;
 }

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

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);
       }

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;
   }

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;
   }
 

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;
+  }
 }

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"
           }
         ]
       }