1 files changed, 53 insertions, 15 deletions

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