high contrast theme

app/scripts/util/locale.js

@@ -297,6 +297,10 @@ var Locale = {
     setGenDownloadAndRestart: 'Download update and restart',
     setGenAppearance: 'Appearance',
     setGenTheme: 'Theme',
+    setGenThemeFb: 'Flat blue',
+    setGenThemeDb: 'Dark brown',
+    setGenThemeWh: 'White',
+    setGenThemeHc: 'High contrast',
     setGenShowSubgroups: 'Show entries from all subgroups',
     setGenTableView: 'Entries list table view',
     setGenColorfulIcons: 'Colorful custom icons in list',

app/scripts/views/fields/field-view-autocomplete.js

@@ -21,7 +21,9 @@ var FieldViewAutocomplete = FieldViewText.extend({
             width: fieldRect.width - 2
         });
         this.autocomplete.mousedown(this.autocompleteClick.bind(this));
-        if (!this.input.val()) {
+        if (this.input.val()) {
+            this.autocomplete.hide();
+        } else {
             this.updateAutocomplete();
         }
     },

app/scripts/views/settings/settings-general-view.js

@@ -42,9 +42,10 @@ var SettingsGeneralView = Backbone.View.extend({
     views: {},
 
     allThemes: {
-        fb: 'Flat blue',
-        db: 'Dark brown',
-        wh: 'White'
+        fb: Locale.setGenThemeFb,
+        db: Locale.setGenThemeDb,
+        wh: Locale.setGenThemeWh,
+        hc: Locale.setGenThemeHc
     },
 
     initialize: function() {

app/styles/base/_colors.scss

@@ -16,24 +16,22 @@ $violet: #d946db;
 @function error-color() { @return th(error-color); }
 
 // Text
-@function muted-color() { @return mix(medium-color(), background-color(), 30%); }
-@function muted-color-border() { @return mix(medium-color(), background-color(), 15%); }
+@function muted-color() { @return mix(medium-color(), background-color(), th(mute-percent)); }
+@function muted-color-border() { @return mix(medium-color(), background-color(), th(mute-percent) / 2); }
 @function text-selection-bg-color() { @return rgba(action-color(), .3); }
 @function text-selection-bg-color-error() { @return rgba(error-color(), .8); }
 @function text-contrast-color($bg) { @if (lightness($bg) >= lightness(background-color())) { @return text-color(); } @else { @return background-color(); } }
 
 // Borders, shadows
-
 @function base-border-color() { @return mix(medium-color(), background-color(), 50%); }
 @function accent-border-color() { @return mix(medium-color(), background-color(), 65%); }
-@function light-border-color() { @return mix(medium-color(), background-color(), 10%); }
+@function light-border-color() { @return mix(medium-color(), background-color(), th(light-border-percent)); }
 @function form-box-shadow-color() { @return rgba($black, 0.06); }
 @function form-box-shadow-color-focus() { @return adjust-color(action-color(), $lightness: -5%, $alpha: -0.3); }
 @function form-box-shadow-color-focus-error() { @return adjust-color(error-color(), $lightness: -5%, $alpha: -0.3); }
 @function dropdown-box-shadow-color() { @return rgba(medium-color(), .05); }
 
 // Backgrounds
-
 @function secondary-background-color() { @return mix(medium-color(), background-color(), 10%); }
 @function intermediate-background-color() { @return mix(medium-color(), background-color(), 3%); }
 @function intermediate-pressed-background-color() { @return mix(medium-color(), background-color(), 2.6%); }

app/styles/common/_modal.scss

@@ -1,7 +1,7 @@
 .modal {
   @include position(absolute, 0 null null 0);
   @include size(100%);
-  @include th { background-color: rgba(background-color(), .9); }
+  @include th { background-color: rgba(background-color(), th(modal-opacity)); }
   z-index: $z-index-modal;
 
   transition: background-color $base-duration $base-timing;

app/styles/themes/_all-themes.scss

@@ -1,5 +1,7 @@
 $themes: ();
 
+@import "theme-defaults";
 @import "dark-brown";
 @import "flat-blue";
 @import "white";
+@import "high-contrast";

app/styles/themes/_dark-brown.scss

@@ -1,9 +1,9 @@
 $themes: map-merge($themes, (
-  db: (
+  db: map-merge($theme-defaults, (
     background-color: #342F2E,
     medium-color: #FED9D8,
     text-color: #FFEAE9,
     action-color: #2C9957,
     error-color: #FD6D67,
-  )
+  ))
 ));

app/styles/themes/_flat-blue.scss

@@ -1,9 +1,9 @@
 $themes: map-merge($themes, (
-  fb: (
+  fb: map-merge($theme-defaults, (
     background-color: #282C34,
     medium-color: #ABB2BF,
     text-color: #D7DAE0,
     action-color: #528BFF,
     error-color: #C34034,
-  )
+  ))
 ));

app/styles/themes/_high-contrast.scss

@@ -0,0 +1,12 @@
+$themes: map-merge($themes, (
+  hc: map-merge($theme-defaults, (
+    background-color: #FAFAFA,
+    medium-color: #050505,
+    text-color: #050505,
+    action-color: #2d72d7,
+    error-color: #e74859,
+    mute-percent: 60%,
+    light-border-percent: 50%,
+    modal-opacity: 1,
+  ))
+));

app/styles/themes/_theme-defaults.scss

@@ -0,0 +1,5 @@
+$theme-defaults: (
+  mute-percent: 30%,
+  light-border-percent: 10%,
+  modal-opacity: .9,
+)

app/styles/themes/_white.scss

@@ -1,9 +1,9 @@
 $themes: map-merge($themes, (
-  wh: (
+  wh: map-merge($theme-defaults, (
     background-color: #FAFAFA,
     medium-color: #050505,
     text-color: #424243,
     action-color: #475FD7,
     error-color: #E75675,
-  )
+  ))
 ));

release-notes.md

@@ -8,6 +8,7 @@ Auto-type, ui improvements
 `+` docker container  
 `+` edit and remove tags  
 `+` register file associations  
+`+` high contrast theme  
 `-` prevent second app instance on windows  
 `*` don't check updates at startup