Merge pull request #751 from ueokande/dark-mode

Supports dark mode

15 files changed, 209 insertions, 30 deletions

diff --git a/src/background/controllers/CompletionController.ts b/src/background/controllers/CompletionController.ts
index 35538be..b00a0cb 100644
--- a/src/background/controllers/CompletionController.ts
+++ b/src/background/controllers/CompletionController.ts
@@ -4,7 +4,7 @@ import {
   ConsoleRequestBookmarksResponse,
   ConsoleRequestHistoryResponse,
   ConsoleRequestSearchEnginesResponse,
-  ConsoleRequesttabsResponse,
+  ConsoleRequestTabsResponse,
 } from "../../shared/messages";
 import { injectable } from "tsyringe";
 import OpenCompletionUseCase from "../completion/OpenCompletionUseCase";
@@ -43,7 +43,7 @@ export default class CompletionController {
   async queryTabs(
     query: string,
     excludePinned: boolean
-  ): Promise<ConsoleRequesttabsResponse> {
+  ): Promise<ConsoleRequestTabsResponse> {
     return this.tabCompletionUseCase.queryTabs(query, excludePinned);
   }
 
diff --git a/src/background/repositories/CachedSettingRepository.ts b/src/background/repositories/CachedSettingRepository.ts
index e3d3950..b4cdd1c 100644
--- a/src/background/repositories/CachedSettingRepository.ts
+++ b/src/background/repositories/CachedSettingRepository.ts
@@ -1,6 +1,7 @@
 import MemoryStorage from "../infrastructures/MemoryStorage";
 import Settings from "../../shared/settings/Settings";
 import Properties from "../../shared/settings/Properties";
+import ColorScheme from "../../shared/ColorScheme";
 
 const CACHED_SETTING_KEY = "setting";
 
@@ -56,6 +57,18 @@ export class CachedSettingRepositoryImpl implements CachedSettingRepository {
       case "complete":
         current.properties.complete = newValue as string;
         break;
+      case "colorscheme": {
+        switch (newValue) {
+          case ColorScheme.Light:
+          case ColorScheme.Dark:
+          case ColorScheme.System:
+            current.properties.colorscheme = newValue as ColorScheme;
+            break;
+          default:
+            throw new Error(`Unsupported colorscheme: ${newValue}`);
+        }
+        break;
+      }
     }
     await this.update(current);
   }
diff --git a/src/console/actions/console.ts b/src/console/actions/console.ts
index 80ea6b0..16d33b3 100644
--- a/src/console/actions/console.ts
+++ b/src/console/actions/console.ts
@@ -2,11 +2,13 @@ import * as messages from "../../shared/messages";
 import * as actions from "./index";
 import { Command } from "../../shared/Command";
 import CompletionClient from "../clients/CompletionClient";
+import SettingClient from "../clients/SettingClient";
 import CompletionType from "../../shared/CompletionType";
 import Completions from "../Completions";
 import TabFlag from "../../shared/TabFlag";
 
 const completionClient = new CompletionClient();
+const settingClient = new SettingClient();
 
 const commandDocs = {
   [Command.Set]: "Set a value of the property",
@@ -26,6 +28,7 @@ const propertyDocs: { [key: string]: string } = {
   hintchars: "hint characters on follow mode",
   smoothscroll: "smooth scroll",
   complete: "which are completed at the open page",
+  colorscheme: "color scheme of the console",
 };
 
 const hide = (): actions.ConsoleAction => {
@@ -271,6 +274,14 @@ const completionPrev = (): actions.CompletionPrevAction => {
   };
 };
 
+const setColorScheme = async (): Promise<actions.SetColorSchemeAction> => {
+  const scheme = await settingClient.getColorScheme();
+  return {
+    type: actions.CONSOLE_SET_COLORSCHEME,
+    colorscheme: scheme,
+  };
+};
+
 export {
   hide,
   showCommand,
@@ -287,4 +298,5 @@ export {
   getPropertyCompletions,
   completionNext,
   completionPrev,
+  setColorScheme,
 };
diff --git a/src/console/actions/index.ts b/src/console/actions/index.ts
index 308a093..6c1c759 100644
--- a/src/console/actions/index.ts
+++ b/src/console/actions/index.ts
@@ -1,5 +1,6 @@
 import Completions from "../Completions";
 import CompletionType from "../../shared/CompletionType";
+import ColorScheme from "../../shared/ColorScheme";
 
 export const CONSOLE_HIDE = "console.hide";
 export const CONSOLE_SHOW_COMMAND = "console.show.command";
@@ -11,6 +12,7 @@ export const CONSOLE_SET_COMPLETIONS = "console.set.completions";
 export const CONSOLE_COMPLETION_NEXT = "console.completion.next";
 export const CONSOLE_COMPLETION_PREV = "console.completion.prev";
 export const CONSOLE_SHOW_FIND = "console.show.find";
+export const CONSOLE_SET_COLORSCHEME = "console.set.colorscheme";
 
 export interface HideAction {
   type: typeof CONSOLE_HIDE;
@@ -59,6 +61,11 @@ export interface CompletionPrevAction {
   type: typeof CONSOLE_COMPLETION_PREV;
 }
 
+export interface SetColorSchemeAction {
+  type: typeof CONSOLE_SET_COLORSCHEME;
+  colorscheme: ColorScheme;
+}
+
 export type ConsoleAction =
   | HideAction
   | ShowCommand
@@ -69,4 +76,5 @@ export type ConsoleAction =
   | SetConsoleTextAction
   | SetCompletionsAction
   | CompletionNextAction
-  | CompletionPrevAction;
+  | CompletionPrevAction
+  | SetColorSchemeAction;
diff --git a/src/console/clients/CompletionClient.ts b/src/console/clients/CompletionClient.ts
index 64119e8..a80918b 100644
--- a/src/console/clients/CompletionClient.ts
+++ b/src/console/clients/CompletionClient.ts
@@ -5,7 +5,7 @@ import {
   ConsoleRequestBookmarksResponse,
   ConsoleRequestHistoryResponse,
   ConsoleRequestSearchEnginesResponse,
-  ConsoleRequesttabsResponse,
+  ConsoleRequestTabsResponse,
 } from "../../shared/messages";
 import CompletionType from "../../shared/CompletionType";
 import TabFlag from "../../shared/TabFlag";
@@ -74,7 +74,7 @@ export default class CompletionClient {
       type: messages.CONSOLE_REQUEST_TABS,
       query,
       excludePinned,
-    })) as ConsoleRequesttabsResponse;
+    })) as ConsoleRequestTabsResponse;
     return resp;
   }
 
diff --git a/src/console/clients/SettingClient.ts b/src/console/clients/SettingClient.ts
new file mode 100644
index 0000000..f75517a
--- /dev/null
+++ b/src/console/clients/SettingClient.ts
@@ -0,0 +1,13 @@
+import Settings from "../../shared/settings/Settings";
+import * as messages from "../../shared/messages";
+import ColorScheme from "../../shared/ColorScheme";
+
+export default class SettingClient {
+  async getColorScheme(): Promise<ColorScheme> {
+    const json = await browser.runtime.sendMessage({
+      type: messages.SETTINGS_QUERY,
+    });
+    const settings = Settings.fromJSON(json);
+    return settings.properties.colorscheme;
+  }
+}
diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx
index d74040d..a0e22e4 100644
--- a/src/console/components/Console.tsx
+++ b/src/console/components/Console.tsx
@@ -10,6 +10,7 @@ import CommandLineParser, {
   InputPhase,
 } from "../commandline/CommandLineParser";
 import { Command } from "../../shared/Command";
+import ColorScheme from "../../shared/ColorScheme";
 
 const COMPLETION_MAX_ITEMS = 33;
 
@@ -126,11 +127,23 @@ class Console extends React.Component<Props> {
   }
 
   render() {
+    let theme = this.props.colorscheme;
+    if (this.props.colorscheme === ColorScheme.System) {
+      if (
+        window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+      ) {
+        theme = ColorScheme.Dark;
+      } else {
+        theme = ColorScheme.Light;
+      }
+    }
+
     switch (this.props.mode) {
       case "command":
       case "find":
         return (
-          <div className="vimvixen-console-command-wrapper">
+          <div data-theme={theme} className="vimvixen-console-command-wrapper">
             <Completion
               size={COMPLETION_MAX_ITEMS}
               completions={this.props.completions}
@@ -149,14 +162,18 @@ class Console extends React.Component<Props> {
       case "info":
       case "error":
         return (
-          <Message mode={this.props.mode}>{this.props.messageText}</Message>
+          <div data-theme={theme}>
+            <Message mode={this.props.mode}>{this.props.messageText}</Message>
+          </div>
         );
       default:
         return null;
     }
   }
 
-  focus() {
+  async focus() {
+    this.props.dispatch(consoleActions.setColorScheme());
+
     window.focus();
     if (this.input.current) {
       this.input.current.focus();
diff --git a/src/console/components/console.scss b/src/console/components/console.scss
index c0b9b12..ccb769b 100644
--- a/src/console/components/console.scss
+++ b/src/console/components/console.scss
@@ -1,3 +1,35 @@
+[data-theme="light"] {
+  --completion-title-background: lightgray;
+  --completion-title-foreground: #000000;
+  --completion-item-background: #ffffff;
+  --completion-item-foreground: #000000;
+  --completion-item-description-foreground: #008000;
+  --completion-selected-background: #ffff00;
+  --completion-selected-foreground: #000000;
+  --command-background: #ffffff;
+  --command-foreground: #000000;
+  --console-error-background: #ff0000;
+  --console-error-foreground: #ffffff;
+  --console-info-background: #ffffff;
+  --console-info-foreground: #018786;
+}
+
+[data-theme="dark"] {
+  --completion-title-background: #052027;
+  --completion-title-foreground: white;
+  --completion-item-background: #2f474f;
+  --completion-item-foreground: white;
+  --completion-item-description-foreground: #86fab0;
+  --completion-selected-background: #eeff41;
+  --completion-selected-foreground: #000000;
+  --command-background: #052027;
+  --command-foreground: white;
+  --console-error-background: red;
+  --console-error-foreground: white;
+  --console-info-background: #052027;
+  --console-info-foreground: #ffffff;
+}
+
 html, body, * {
   margin: 0;
   padding: 0;
@@ -16,7 +48,7 @@ body {
   margin: 0;
   padding: 0;
 
-  @mixin consoole-font {
+  @mixin console-font {
     font-style: normal;
     font-family: monospace;
     font-size: 12px;
@@ -28,18 +60,20 @@ body {
   }
 
   &-completion {
-    background-color: white;
-
-    @include consoole-font;
+    @include console-font;
 
     &-title {
-      background-color: lightgray;
+      background-color: var(--completion-title-background);
+      color: var(--completion-title-foreground);
       font-weight: bold;
       margin: 0;
       padding: 0;
     }
 
     &-item {
+      background-color: var(--completion-item-background);
+      color: var(--completion-item-foreground);
+
       padding-left: 1.5rem;
       background-position: 0 center;
       background-size: contain;
@@ -47,7 +81,8 @@ body {
       white-space: pre;
 
       &.vimvixen-completion-selected {
-        background-color: yellow;
+        background-color: var(--completion-selected-background);
+        color: var(--completion-selected-foreground);
       }
 
       &-caption {
@@ -59,7 +94,7 @@ body {
 
       &-url {
         display: inline-block;
-        color: green;
+        color: var(--completion-item-description-foreground);
         width: 60%;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -68,36 +103,39 @@ body {
   }
 
   &-message {
-    @include consoole-font;
+    @include console-font;
 
     border-top: 1px solid gray;
   }
 
   &-error {
-    background-color: red;
+    background-color: var(--console-error-background);
+    color: var(--console-error-foreground);
     font-weight: bold;
-    color: white;
   }
 
   &-info {
-    background-color: white;
+    background-color: var(--console-info-background);
+    color: var(--console-info-foreground);
     font-weight: normal;
-    color: green;
   }
 
   &-command {
-    background-color: white;
+    background-color: var(--command-background);
+    color: var(--command-foreground);
     display: flex;
 
     &-prompt {
-      @include consoole-font;
+      @include console-font;
     }
 
     &-input {
       border: none;
       flex-grow: 1;
+      background-color: var(--command-background);
+      color: var(--command-foreground);
 
-      @include consoole-font;
+      @include console-font;
     }
   }
 }
diff --git a/src/console/reducers/index.ts b/src/console/reducers/index.ts
index f2ffed7..752dfd9 100644
--- a/src/console/reducers/index.ts
+++ b/src/console/reducers/index.ts
@@ -1,6 +1,7 @@
 import * as actions from "../actions";
 import Completions from "../Completions";
 import CompletionType from "../../shared/CompletionType";
+import ColorScheme from "../../shared/ColorScheme";
 
 export interface State {
   mode: string;
@@ -11,6 +12,7 @@ export interface State {
   completions: Completions;
   select: number;
   viewIndex: number;
+  colorscheme: ColorScheme;
 }
 
 const defaultState = {
@@ -22,6 +24,7 @@ const defaultState = {
   completions: [],
   select: -1,
   viewIndex: 0,
+  colorscheme: ColorScheme.System,
 };
 
 const nextSelection = (state: State): number => {
@@ -122,6 +125,11 @@ export default function reducer(
         ),
       };
     }
+    case actions.CONSOLE_SET_COLORSCHEME:
+      return {
+        ...state,
+        colorscheme: action.colorscheme,
+      };
     default:
       return state;
   }
diff --git a/src/shared/ColorScheme.ts b/src/shared/ColorScheme.ts
new file mode 100644
index 0000000..a7b874e
--- /dev/null
+++ b/src/shared/ColorScheme.ts
@@ -0,0 +1,7 @@
+enum ColorScheme {
+  System = "system",
+  Light = "light",
+  Dark = "dark",
+}
+
+export default ColorScheme;
diff --git a/src/shared/messages.ts b/src/shared/messages.ts
index f876b99..60d4c9e 100644
--- a/src/shared/messages.ts
+++ b/src/shared/messages.ts
@@ -127,7 +127,7 @@ export interface ConsoleGetPropertiesMessage {
   type: typeof CONSOLE_GET_PROPERTIES;
 }
 
-export type ConsoleRequesttabsResponse = {
+export type ConsoleRequestTabsResponse = {
   index: number;
   flag: TabFlag;
   title: string;
diff --git a/src/shared/settings/Properties.ts b/src/shared/settings/Properties.ts
index cf10d61..7540c8a 100644
--- a/src/shared/settings/Properties.ts
+++ b/src/shared/settings/Properties.ts
@@ -1,20 +1,23 @@
+import ColorScheme from "../ColorScheme";
+
 export type PropertiesJSON = {
   hintchars?: string;
   smoothscroll?: boolean;
   complete?: string;
+  colorscheme?: ColorScheme;
 };
 
 export type PropertyTypes = {
   hintchars: string;
   smoothscroll: string;
   complete: string;
+  colorscheme: string;
 };
 
-type PropertyName = "hintchars" | "smoothscroll" | "complete";
+type PropertyName = "hintchars" | "smoothscroll" | "complete" | "colorscheme";
 
 type PropertyDef = {
   name: PropertyName;
-  description: string;
   defaultValue: string | number | boolean;
   type: "string" | "number" | "boolean";
 };
@@ -22,28 +25,31 @@ type PropertyDef = {
 const defs: PropertyDef[] = [
   {
     name: "hintchars",
-    description: "hint characters on follow mode",
     defaultValue: "abcdefghijklmnopqrstuvwxyz",
     type: "string",
   },
   {
     name: "smoothscroll",
-    description: "smooth scroll",
     defaultValue: false,
     type: "boolean",
   },
   {
     name: "complete",
-    description: "which are completed at the open page",
     defaultValue: "sbh",
     type: "string",
   },
+  {
+    name: "colorscheme",
+    defaultValue: ColorScheme.System,
+    type: "string",
+  },
 ];
 
 const defaultValues = {
   hintchars: "abcdefghijklmnopqrstuvwxyz",
   smoothscroll: false,
   complete: "sbh",
+  colorscheme: ColorScheme.System,
 };
 
 export default class Properties {
@@ -53,18 +59,23 @@ export default class Properties {
 
   public complete: string;
 
+  public colorscheme: ColorScheme;
+
   constructor({
     hintchars,
     smoothscroll,
     complete,
+    colorscheme,
   }: {
     hintchars?: string;
     smoothscroll?: boolean;
     complete?: string;
+    colorscheme?: ColorScheme;
   } = {}) {
     this.hintchars = hintchars || defaultValues.hintchars;
     this.smoothscroll = smoothscroll || defaultValues.smoothscroll;
     this.complete = complete || defaultValues.complete;
+    this.colorscheme = colorscheme || defaultValues.colorscheme;
   }
 
   static fromJSON(json: PropertiesJSON): Properties {
@@ -76,6 +87,7 @@ export default class Properties {
       hintchars: "string",
       smoothscroll: "boolean",
       complete: "string",
+      colorscheme: "string",
     };
   }
 
@@ -92,6 +104,7 @@ export default class Properties {
       hintchars: this.hintchars,
       smoothscroll: this.smoothscroll,
       complete: this.complete,
+      colorscheme: this.colorscheme,
     };
   }
 }
diff --git a/src/shared/settings/Settings.ts b/src/shared/settings/Settings.ts
index 1bb9249..6f178ea 100644
--- a/src/shared/settings/Settings.ts
+++ b/src/shared/settings/Settings.ts
@@ -156,7 +156,8 @@ export const DefaultSettingJSONText = `{
   "properties": {
     "hintchars": "abcdefghijklmnopqrstuvwxyz",
     "smoothscroll": false,
-    "complete": "sbh"
+    "complete": "sbh",
+    "colorscheme": "system"
   },
   "blacklist": [
   ]
diff --git a/src/shared/settings/schema.json b/src/shared/settings/schema.json
index 31d47f1..be0f2ec 100644
--- a/src/shared/settings/schema.json
+++ b/src/shared/settings/schema.json
@@ -48,6 +48,10 @@
         },
         "complete": {
           "type": "string"
+        },
+        "colorscheme": {
+          "type": "string",
+          "enum": ["system", "light", "dark"]
         }
       }
     },
diff --git a/src/shared/settings/validate.js b/src/shared/settings/validate.js
index 236488d..30f7888 100644
--- a/src/shared/settings/validate.js
+++ b/src/shared/settings/validate.js
@@ -1,4 +1,5 @@
 'use strict';
+var equal = require('ajv/lib/compile/equal');
 var validate = (function() {
   var pattern0 = new RegExp('.*');
   var refVal = [];
@@ -273,6 +274,46 @@ var validate = (function() {
                       }
                       var valid2 = errors === errs_2;
                     }
+                    if (valid2) {
+                      var data2 = data1.colorscheme;
+                      if (data2 === undefined) {
+                        valid2 = true;
+                      } else {
+                        var errs_2 = errors;
+                        if (typeof data2 !== "string") {
+                          validate.errors = [{
+                            keyword: 'type',
+                            dataPath: (dataPath || '') + '.properties.colorscheme',
+                            schemaPath: '#/properties/properties/properties/colorscheme/type',
+                            params: {
+                              type: 'string'
+                            },
+                            message: 'should be string'
+                          }];
+                          return false;
+                        }
+                        var schema2 = validate.schema.properties.properties.properties.colorscheme.enum;
+                        var valid2;
+                        valid2 = false;
+                        for (var i2 = 0; i2 < schema2.length; i2++)
+                          if (equal(data2, schema2[i2])) {
+                            valid2 = true;
+                            break;
+                          } if (!valid2) {
+                          validate.errors = [{
+                            keyword: 'enum',
+                            dataPath: (dataPath || '') + '.properties.colorscheme',
+                            schemaPath: '#/properties/properties/properties/colorscheme/enum',
+                            params: {
+                              allowedValues: schema2
+                            },
+                            message: 'should be equal to one of the allowed values'
+                          }];
+                          return false;
+                        }
+                        var valid2 = errors === errs_2;
+                      }
+                    }
                   }
                 }
               } else {
@@ -535,6 +576,10 @@ validate.schema = {
         },
         "complete": {
           "type": "string"
+        },
+        "colorscheme": {
+          "type": "string",
+          "enum": ["system", "light", "dark"]
         }
       }
     },