Merge pull request #751 from ueokande/dark-mode

Supports dark mode

2 files changed, 73 insertions, 18 deletions

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