Add light theme (#120)

src/Makefile

@@ -16,11 +16,11 @@ deps:
 prettier: $(PRETTIER) $(PRETTIER_FILES)
 	$(PRETTIER) --write $(PRETTIER_FILES)
 
-css/popup.dist.css: $(LESSC) popup/popup.less
+css/popup.dist.css: $(LESSC) popup/*.less
 	[ -d css ] || mkdir -p css
 	$(LESSC) popup/popup.less css/popup.dist.css
 
-css/options.dist.css: $(LESSC) options/options.less
+css/options.dist.css: $(LESSC) options/*.less
 	[ -d css ] || mkdir -p css
 	$(LESSC) options/options.less css/options.dist.css
 

src/background.js

@@ -24,7 +24,8 @@ var defaultSettings = {
     gpgPath: null,
     stores: {},
     foreignFills: {},
-    username: null
+    username: null,
+    theme: "dark"
 };
 
 var authListeners = {};

src/options/interface.js

@@ -58,6 +58,14 @@ function view(ctl, params) {
     nodes.push(createInput.call(this, "username", "Default username", "john.smith"));
     nodes.push(createInput.call(this, "gpgPath", "Custom gpg binary", "/path/to/gpg"));
 
+    nodes.push(m("h3", "Theme"));
+    nodes.push(
+        createDropdown.call(this, "theme", [
+            m("option", { value: "dark" }, "Dark"),
+            m("option", { value: "light" }, "Light")
+        ])
+    );
+
     nodes.push(m("h3", "Custom store locations"));
     nodes.push(
         m("div", { class: "notice" }, "(this overrides default store and $PASSWORD_STORE_DIR)")
@@ -152,6 +160,29 @@ function createInput(key, title, placeholder) {
     ]);
 }
 
+/**
+ * Generates vnode for a dropdown setting
+ *
+ * @since 3.3.1
+ *
+ * @param string key     Settings key
+ * @param array options  Array of objects with value and text fields
+ * @return Vnode
+ */
+function createDropdown(key, options) {
+    return m(
+        "select",
+        {
+            value: this.settings[key],
+            onchange: e => {
+                this.settings[key] = e.target.value;
+                this.saveEnabled = true;
+            }
+        },
+        options
+    );
+}
+
 /**
  * Generates vnode for a checkbox setting
  *

src/popup/colors-dark.less

@@ -0,0 +1,20 @@
+@import "colors.less";
+
+.colors-dark {
+    .colors(
+        @bg-color: #414141,
+        @default-bg-color: #393939,
+        @hover-bg-color: #363636,
+        @text-color: #c4c4c4,
+        @error-text-color: #f00,
+        @dim-text-color: #a0a0a0,
+        @badge-color: #626262,
+        @input-bg-color: #4a4a4a,
+        @active-input-bg-color: #4f4f4f,
+        @input-text-color: #eee,
+        @hint-bg-color: #d79921,
+        @hint-color: #363636,
+        @match-text-bg-color: transparent,
+        @match-text-color: #d79921
+    );
+}

src/popup/colors-light.less

@@ -0,0 +1,36 @@
+@import "colors.less";
+
+.colors-light {
+    .colors(
+        @bg-color: #f1f3f5,
+        @default-bg-color: #d8dee3,
+        @hover-bg-color: #ced4da,
+        @text-color: #343a40,
+        @error-text-color: #e03131,
+        @dim-text-color: #868e96,
+        @badge-color: #b8b8b8,
+        @input-bg-color: #eaeef1,
+        @active-input-bg-color: #e8ebee,
+        @input-text-color: #343a40,
+        @hint-bg-color: #1c7ed6,
+        @hint-color: #e7f5ff,
+        @match-text-bg-color: #cfecff,
+        @match-text-color: #1873ea
+    );
+
+    .part.login .name .line1 .recent,
+    .part.login .action.copy-password,
+    .part.login .action.copy-user {
+        filter: invert(85%);
+    }
+
+    .part.login .name .line1 .recent:focus,
+    .part.login .name .line1 .recent:hover,
+    .part.login .action.copy-password:focus,
+    .part.login .action.copy-password:hover,
+    .part.login .action.copy-user:focus,
+    .part.login .action.copy-user:hover {
+        // colour such that invert(85%) ~= @hover-bg-color
+        background-color: #0c0804;
+    }
+}

src/popup/colors.less

@@ -0,0 +1,77 @@
+.colors(
+    @bg-color,
+    @default-bg-color,
+    @hover-bg-color,
+    @text-color,
+    @error-text-color,
+    @dim-text-color,
+    @badge-color,
+    @input-bg-color,
+    @active-input-bg-color,
+    @input-text-color,
+    @hint-bg-color,
+    @hint-color,
+    @match-text-bg-color,
+    @match-text-color) {
+    html,
+    body {
+        background-color: @bg-color;
+        color: @text-color;
+    }
+
+    .badge {
+        background-color: @badge-color;
+    }
+
+    .part.error {
+        color: @error-text-color;
+    }
+
+    .part.search {
+        background-color: @input-bg-color;
+    }
+
+    .part.search:focus-within {
+        background-color: @active-input-bg-color;
+    }
+
+    .part.search > .hint {
+        background-color: @hint-bg-color;
+        color: @hint-color;
+    }
+
+    .part.search > input[type="text"] {
+        background-color: transparent;
+        color: @input-text-color;
+    }
+
+    .part.search > input[type="text"]::placeholder {
+        color: @dim-text-color;
+    }
+
+    .logins:not(:hover):not(:focus-within) .part.login:first-child > .name {
+        background-color: @default-bg-color;
+    }
+
+    .part.login > .name:hover,
+    .part.login > .name:focus,
+    .part.login > .action:hover,
+    .part.login > .action:focus,
+    .part.login:focus > .name {
+        background-color: @hover-bg-color;
+    }
+
+    .part.login em {
+        background-color: @match-text-bg-color;
+        color: @match-text-color;
+    }
+
+    .updates {
+        border-top: 1px solid @hover-bg-color;
+
+        span,
+        a {
+            color: @error-text-color;
+        }
+    }
+}

src/popup/popup.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="colors-dark">
     <head>
         <meta charset="utf-8" />
         <link rel="stylesheet" type="text/css" href="../css/popup.dist.css" />

src/popup/popup.js

@@ -43,6 +43,10 @@ async function run() {
         }
         var settings = response.settings;
 
+        var root = document.getElementsByTagName("html")[0];
+        root.classList.remove("colors-dark");
+        root.classList.add(`colors-${settings.theme}`);
+
         if (settings.hasOwnProperty("hostError")) {
             throw new Error(settings.hostError.params.message);
         }

src/popup/popup.less

@@ -1,18 +1,5 @@
-@bg-color: #414141;
+@import "colors-dark.less";
-@default-bg-color: #393939;
+@import "colors-light.less";
-@hover-bg-color: #363636;
-@text-color: #c4c4c4;
-@error-text-color: #f00;
-@dim-text-color: #a0a0a0;
-
-@input-bg-color: #4a4a4a;
-@active-input-bg-color: #4f4f4f;
-@input-text-color: #eee;
-
-@hint-bg-color: #d79921;
-@hint-color: #363636;
-
-@match-text-color: @hint-bg-color;
 
 @login-height: 53px;
 @max-logins-height: @login-height * 7;
@@ -42,8 +29,6 @@ body {
     min-width: 260px;
     overflow-x: hidden;
     white-space: nowrap;
-    background-color: @bg-color;
-    color: @text-color;
 }
 
 @media (min-resolution: 192dpi) {
@@ -75,7 +60,6 @@ body {
 .badge {
     display: flex;
     align-items: center;
-    background-color: #626262;
     border-radius: 4px;
     font-size: 12px;
     margin-right: 8px;
@@ -98,7 +82,6 @@ body {
 }
 
 .part.error {
-    color: @error-text-color;
     white-space: normal;
     padding: 7px;
 }
@@ -114,16 +97,9 @@ body {
     background-position: top 6px right 6px;
     background-repeat: no-repeat;
     background-size: 18px;
-    background-color: @input-bg-color;
-}
-
-.part.search:focus-within {
-    background-color: @active-input-bg-color;
 }
 
 .part.search > .hint {
-    background-color: @hint-bg-color;
-    color: @hint-color;
     line-height: 19px;
 }
 
@@ -138,29 +114,21 @@ body {
 }
 
 .part.search > input[type="text"] {
-    background-color: transparent;
     border: none;
     outline: none;
     width: 100%;
-    color: @input-text-color;
     font-family: "Open Sans";
 }
 
 .part.search > input[type="text"]::placeholder {
-    color: @dim-text-color;
     opacity: 1;
 }
 
-.logins:not(:hover):not(:focus-within) .part.login:first-child > .name {
-    background-color: @default-bg-color;
-}
-
 .part.login > .name:hover,
 .part.login > .name:focus,
 .part.login > .action:hover,
 .part.login > .action:focus,
 .part.login:focus > .name {
-    background-color: @hover-bg-color;
     outline: none;
 }
 
@@ -199,6 +167,7 @@ body {
 
         .line2 {
             font-size: 18px;
+            margin-top: 2px;
         }
     }
 
@@ -221,16 +190,9 @@ body {
 }
 
 .part.login em {
-    color: @match-text-color;
     font-style: normal;
 }
 
 .updates {
     padding: @login-part-padding;
-    border-top: 1px solid @hover-bg-color;
-
-    span,
-    a {
-        color: @error-text-color;
-    }
 }