Allow to change color scheme by "colorscheme" property

8 files changed, 70 insertions, 10 deletions

diff --git a/src/console/actions/console.ts b/src/console/actions/console.ts
index 6282791..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",
@@ -272,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,
@@ -288,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/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/index.html b/src/console/index.html
index 3704071..73e1e23 100644
--- a/src/console/index.html
+++ b/src/console/index.html
@@ -5,7 +5,7 @@
     <title>VimVixen console</title>
     <script src='console.js'></script>
   </head>
-  <body data-theme="light">
+  <body>
     <div id='vimvixen-console' class='vimvixen-console'></div>
   </body>
 </html>
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/settings/Properties.ts b/src/shared/settings/Properties.ts
index 529ecfc..7540c8a 100644
--- a/src/shared/settings/Properties.ts
+++ b/src/shared/settings/Properties.ts
@@ -1,8 +1,4 @@
-enum ColorScheme {
-  System = "system",
-  Light = "light",
-  Dark = "dark",
-}
+import ColorScheme from "../ColorScheme";
 
 export type PropertiesJSON = {
   hintchars?: string;