From ccd968bbf50cc1b7beb6f7b0c65b2321d7c0e9bf Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Mon, 16 Apr 2018 20:21:19 -0600
Subject: [PATCH 1/4] implement new dark theme

---
 CHANGELOG.md                                  |   5 +-
 src/renderer/component/common/icon.jsx        |   1 -
 src/renderer/component/header/view.jsx        |   1 +
 src/renderer/page/settings/view.jsx           |  48 ++++---
 src/renderer/scss/_gui.scss                   |   6 +-
 src/renderer/scss/_vars.scss                  |  47 ++++---
 src/renderer/scss/component/_button.scss      |  20 ++-
 src/renderer/scss/component/_card.scss        |  16 ++-
 .../scss/component/_file-download.scss        |   3 +
 src/renderer/scss/component/_form-field.scss  |   4 +-
 src/renderer/scss/component/_modal.scss       |  10 +-
 src/renderer/scss/component/_nav.scss         |  12 +-
 src/renderer/scss/component/_scrollbar.scss   |   1 +
 src/renderer/scss/component/_search.scss      |  20 ++-
 src/renderer/scss/component/_table.scss       |  10 +-
 static/themes/dark.css                        | 126 +++++++++++-------
 16 files changed, 205 insertions(+), 125 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7a6542b3d..50e0ffc49 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,12 +12,15 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
    * Show exact wallet balance on mouse hover over ([#1305](https://github.com/lbryio/lbry-app/pull/1305))
 
 ### Changed
-
 * Add flair to snackbar ([#1313](https://github.com/lbryio/lbry-app/pull/1313))
 
 ### Fixed
    * Black screen on macOS after maximizing LBRY and then closing ([#1235](https://github.com/lbryio/lbry-app/pull/1235))
 
+### Fixed
+   * Black screen on macOS after maximizing LBRY and then closing ([#1235](https://github.com/lbryio/lbry-app/pull/1235))
+   * Fix dark theme ([#1034](https://github.com/lbryio/lbry-app/issues/1034))
+   * Fix download percentage indicator overlay ([#1271](https://github.com/lbryio/lbry-app/issues/1271))
 
 
 ## [0.21.2] - 2018-03-22
diff --git a/src/renderer/component/common/icon.jsx b/src/renderer/component/common/icon.jsx
index 1f82f3351..602f5fbd2 100644
--- a/src/renderer/component/common/icon.jsx
+++ b/src/renderer/component/common/icon.jsx
@@ -8,7 +8,6 @@ const RED_COLOR = '#e2495e';
 
 type Props = {
   icon: string,
-  size?: number,
 };
 
 class IconComponent extends React.PureComponent<Props> {
diff --git a/src/renderer/component/header/view.jsx b/src/renderer/component/header/view.jsx
index b31441add..1cbdceb13 100644
--- a/src/renderer/component/header/view.jsx
+++ b/src/renderer/component/header/view.jsx
@@ -53,6 +53,7 @@ const Header = (props: Props) => {
         <Button
           uppercase
           button="primary"
+          className="btn--header-publish"
           onClick={() => navigate('/publish')}
           icon={icons.UPLOAD}
           label={isUpgradeAvailable ? '' : __('Publish')}
diff --git a/src/renderer/page/settings/view.jsx b/src/renderer/page/settings/view.jsx
index 79b6b6ad7..66bd0d9b5 100644
--- a/src/renderer/page/settings/view.jsx
+++ b/src/renderer/page/settings/view.jsx
@@ -274,31 +274,29 @@ class SettingsPage extends React.PureComponent<Props, State> {
               </div>
             </section>
             {
-              // Hiding this for now until we update the dark mode styles
-              // <section className="card card--section">
-              //   <div className="card__title">{__('Theme')}</div>
-              //     <FormField
-              //       name="theme_select"
-              //       type="select"
-              //       onChange={this.onThemeChange}
-              //       value={currentTheme}
-              //       disabled={automaticDarkModeEnabled}
-              //       >
-              //       {themes.map(theme => (
-              //         <option key={theme} value={theme}>
-              //           {theme}
-              //         </option>
-              //       ))}
-              //     </FormField>
-              //
-              //     <FormField
-              //       type="checkbox"
-              //       name="automatic_dark_mode"
-              //       onChange={e => this.onAutomaticDarkModeChange(e.target.checked)}
-              //       checked={automaticDarkModeEnabled}
-              //       postfix={__('Automatic dark mode (9pm to 8am)')}
-              //     />
-              // </section>
+              <section className="card card--section">
+                <div className="card__title">{__('Theme')}</div>
+                <FormField
+                  name="theme_select"
+                  type="select"
+                  onChange={this.onThemeChange}
+                  value={currentTheme}
+                  disabled={automaticDarkModeEnabled}
+                >
+                  {themes.map(theme => (
+                    <option key={theme} value={theme}>
+                      {theme}
+                    </option>
+                  ))}
+                </FormField>
+                <FormField
+                  type="checkbox"
+                  name="automatic_dark_mode"
+                  onChange={e => this.onAutomaticDarkModeChange(e.target.checked)}
+                  checked={automaticDarkModeEnabled}
+                  postfix={__('Automatic dark mode (9pm to 8am)')}
+                />
+              </section>
             }
             <section className="card card--section">
               <div className="card__title">{__('Application Cache')}</div>
diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss
index 70e31aead..3cc684073 100644
--- a/src/renderer/scss/_gui.scss
+++ b/src/renderer/scss/_gui.scss
@@ -95,7 +95,10 @@ input {
     border: 1px dashed var(--input-copyable-border);
   }
 
-  &:not(.input-copyable):not(.wunderbar__input):not(:placeholder-shown) {
+  &:not(.input-copyable):not(.wunderbar__input):not(:placeholder-shown):not(:disabled) {
+    &:hover {
+      border-color: var(--input-hover-border-color);
+    }
     border-bottom: var(--input-border-size) solid var(--input-border-color);
   }
 
@@ -107,6 +110,7 @@ input {
 }
 
 input::placeholder {
+  color: var(--input-placeholder-color);
   opacity: 0.5;
 }
 
diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss
index 5b42f01f4..40fb08ea2 100644
--- a/src/renderer/scss/_vars.scss
+++ b/src/renderer/scss/_vars.scss
@@ -16,7 +16,7 @@ $large-breakpoint: 1760px;
   --video-aspect-ratio: 56.25%; // 9 x 16
   --snack-bar-width: 756px;
 
-  /* Colors */
+  /* Colors: Brand */
   --color-white: #fff;
   --color-black: #000;
   --color-grey: #d6d6d6;
@@ -34,28 +34,27 @@ $large-breakpoint: 1760px;
   --color-green: #399483;
   --color-green-light: #effbe4;
   --color-green-blue: #2ec1a8;
+
+  /* Colors */
   --color-divider: #e3e3e3;
-
-  --text-color: var(--color-black);
-  --text-color-inverse: var(--color-white);
-
-  --color-dark-overlay: rgba(32, 32, 32, 0.9);
   --color-help: rgba(0, 0, 0, 0.54);
   --color-error: #a94442;
   --color-download: var(--color-white);
   --color-download-overlay: var(--color-black);
   --color-bg: #fafafa;
   --color-bg-alt: var(--color-grey-light);
-  --color-placeholder: #ececec;
-  --color-nav-bg: var(--color-grey-light);
+  --color-placeholder: var(--color-grey);
+  --color-search-placeholder: var(--color-placeholder);
 
   /* Shadows */
-  --box-shadow-layer: 0 4px 9px -2px var(--color-grey);
+  --box-shadow-layer: transparent; // 0 2px 4px rgba(0,0,0,0.25);
   --box-shadow-button: 0 10px 20px rgba(0, 0, 0, 0.1);
-  --box-shadow-wunderbar: 0px 10px 20px rgba(0, 0, 0, 0.03);
+  --box-shadow-wunderbar: 0 10px 20px rgba(0, 0, 0, 0.03);
 
   /* Text */
-  --text-help-color: #eee;
+  --text-color: var(--color-black);
+  --text-color-inverse: var(--color-white);
+  --text-help-color: var(--color-help);
   --text-max-width: 660px;
   --text-link-padding: 4px;
   --text-selection-bg: rgba(saturate(lighten(#155b4a, 20%), 20%), 1); // temp color
@@ -70,7 +69,7 @@ $large-breakpoint: 1760px;
   --input-color: var(--text-color);
   --input-border-size: 1px;
   --input-border-color: var(--color-grey-dark);
-  --input-copyable-bg: var(--color-grey-light);
+  --input-copyable-bg: #f6f6f6;
   --input-copyable-color: var(--color-grey-dark);
   --input-copyable-border: var(--color-grey);
 
@@ -80,8 +79,9 @@ $large-breakpoint: 1760px;
 
   /* input:hover */
   --input-hover-border-color: rgba(0, 0, 0, 0.87);
+
   /* input:placeholder */
-  --input-placeholder-color: rgba(0, 0, 0, 0.42);
+  --input-placeholder-color: var(--color-help);
   --input-placeholder-opacity: 1;
 
   /* Select */
@@ -99,6 +99,7 @@ $large-breakpoint: 1760px;
   --btn-external-color: var(--color-light-blue);
   --btn-bg-secondary: var(--color-teal);
   --btn-bg-danger: var(--color-red);
+  --btn-home-bg-color: var(--color-white);
   --btn-radius: 20px;
   --btn-height: 36px;
 
@@ -113,20 +114,30 @@ $large-breakpoint: 1760px;
   --header-height: $spacing-width * 3;
   --header-button-bg: transparent;
   --header-button-hover-bg: rgba(100, 100, 100, 0.15);
+  --header-primary-color: var(--color-primary);
 
   /* Header -> search */
   --search-color: #666;
   --search-bg-color: #fff;
+  --search-active-bg-color: var(--color-grey-light);
   --search-active-color: var(--header-active-color);
   --search-active-shadow: 0 6px 9px -2px var(--color-grey--dark);
+  --search-item-border-color: transparent;
+  --search-item-active-color: var(--color-black);
   --search-modal-input-height: 70px;
 
+  /* Nav */
+  --nav-color: #bbb;
+  --nav-bg-color: var(--color-grey-light);
+
   /* Table */
-  --table-border: 1px solid #e2e2e2;
-  --table-item-even: white;
-  --table-item-odd: #f4f4f4;
+  --table-border: 1px solid var(--color-grey-light);
+  --table-item-odd: var(--color-grey-light);
+  --table-item-even: transparent;
 
   /* Card */
+  --card-bg: var(--color-white);
+  --card-text-color: var(--color-grey-dark);
   --card-radius: 2px;
   --card-margin: $spacing-vertical * 2/3;
   --card-wallet-color: var(--text-color-inverse);
@@ -140,8 +151,10 @@ $large-breakpoint: 1760px;
   /* Modal */
   --modal-width: 440px;
   --modal-bg: var(--color-bg);
-  --modal-overlay-bg: rgba(#f5f5f5, 0.75); // --color-canvas: #F5F5F5
+  --modal-fullscreen-bg: var(--color-bg);
+  --modal-overlay-bg: rgba(246, 246, 246, 0.75);
   --modal-border: 1px solid rgb(204, 204, 204);
+  --modal-btn-bg-color: var(--btn-bg-alt);
 
   // /* Tooltip */
   --tooltip-width: 300px;
diff --git a/src/renderer/scss/component/_button.scss b/src/renderer/scss/component/_button.scss
index 2e0279647..6bc446ceb 100644
--- a/src/renderer/scss/component/_button.scss
+++ b/src/renderer/scss/component/_button.scss
@@ -135,6 +135,7 @@ button:disabled {
 */
 
 .btn.btn--home-nav {
+  background-color: var(--btn-home-bg-color);
   box-shadow: none;
 
   .btn__content {
@@ -145,6 +146,10 @@ button:disabled {
 .btn.btn--arrow {
   width: var(--btn-arrow-width);
 
+  &:hover:not(:disabled) {
+    color: var(--text-color);
+  }
+
   &:disabled {
     opacity: 0.3;
   }
@@ -158,9 +163,14 @@ button:disabled {
   }
 }
 
+.btn.btn--header-publish {
+  background-color: var(--header-primary-color);
+}
+
 .btn.btn--header-balance {
   font-family: 'metropolis-medium';
   font-size: 13px;
+  color: var(--header-primary-color);
 
   @media only screen and (min-width: $medium-breakpoint) {
     font-size: 18px;
@@ -171,15 +181,14 @@ button:disabled {
   }
 
   .btn__label--balance {
-    color: var(--color-grey-dark);
+    color: var(--text-help-color);
+    &:hover {
+      color: var(--text-color);
+    }
   }
 
   &:hover {
     background-color: transparent;
-
-    .btn__label--balance {
-      color: var(--btn-primary-bg);
-    }
   }
 }
 
@@ -188,6 +197,7 @@ button:disabled {
   color: var(--color-white);
   opacity: 0.8;
   border-radius: var(--btn-radius);
+  width: var(--btn-height);
   height: var(--btn-height);
   padding: 10px;
 }
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index eacc25491..a42cc912c 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -1,4 +1,5 @@
 .card {
+  color: var(--card-text-color);
   margin-left: auto;
   margin-right: auto;
   border-radius: var(--card-radius);
@@ -10,9 +11,10 @@
 }
 
 .card--section {
-  background-color: var(--color-white);
+  background-color: var(--card-bg);
   padding: $spacing-vertical;
   margin-top: $spacing-vertical * 2/3;
+  box-shadow: var(--box-shadow-layer);
 }
 
 .card--small {
@@ -49,6 +51,7 @@
   color: var(--card-wallet-color);
   justify-content: space-between;
 
+  .card__title,
   .card__subtitle {
     color: var(--card-wallet-color);
   }
@@ -76,10 +79,13 @@
   background-color: var(--color-error);
 }
 
+.card__title-identity {
+  color: var(--text-color);
+}
+
 .card__title-identity--file {
   display: flex;
   align-items: center;
-
   .credit-amount,
   .icon {
     margin-top: $spacing-vertical * 1/3;
@@ -95,6 +101,7 @@
 
 .card__title {
   font-size: 18px;
+  color: var(--text-color);
 }
 
 .card__title--file {
@@ -116,9 +123,9 @@
 }
 
 .card__subtitle {
-  color: var(--color-help);
   font-size: 14px;
   font-family: 'metropolis-medium';
+  color: var(--card-text-color);
 
   .icon {
     margin-left: $spacing-vertical * 1/3;
@@ -175,7 +182,7 @@
 }
 
 .card__subtext-title {
-  color: var(--color-black);
+  color: var(--text-color);
   font-size: calc(var(--font-size-subtext-multiple) * 1.5em);
 
   &:not(:first-of-type) {
@@ -184,7 +191,6 @@
 }
 
 .card__subtext {
-  color: var(--color-grey-dark);
   font-size: calc(var(--font-size-subtext-multiple) * 1em);
   padding-top: $spacing-vertical * 1/3;
   word-break: break-word;
diff --git a/src/renderer/scss/component/_file-download.scss b/src/renderer/scss/component/_file-download.scss
index 642d6be7e..c4bd7e025 100644
--- a/src/renderer/scss/component/_file-download.scss
+++ b/src/renderer/scss/component/_file-download.scss
@@ -5,8 +5,11 @@
 
 .file-download {
   position: relative;
+  background-color: var(--color-black);
+  border-radius: var(--btn-radius);
   color: var(--color-download);
   font-size: 12px;
+  opacity: 0.8;
   font-family: 'metropolis-medium';
 }
 
diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss
index efeec9d59..3c3bed16c 100644
--- a/src/renderer/scss/component/_form-field.scss
+++ b/src/renderer/scss/component/_form-field.scss
@@ -67,11 +67,11 @@
 }
 
 .form-field__label {
-  color: var(--color-black);
+  color: var(--form-label-color);
 }
 
 .form-field__help {
-  color: var(--color-grey-dark);
+  color: var(--color-help);
   padding-top: $spacing-vertical * 1/3;
 }
 
diff --git a/src/renderer/scss/component/_modal.scss b/src/renderer/scss/component/_modal.scss
index 5d58e46d7..ba6cee84b 100644
--- a/src/renderer/scss/component/_modal.scss
+++ b/src/renderer/scss/component/_modal.scss
@@ -22,7 +22,6 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-
   border: var(--modal-border);
   background: var(--modal-bg);
   overflow: auto;
@@ -31,6 +30,11 @@
   box-shadow: var(--box-shadow-layer);
   max-width: var(--modal-width);
   word-break: break-word;
+
+  .btn.btn--alt {
+    // Set modal buttons bg color
+    background-color: var(--modal-btn-bg-color);
+  }
 }
 
 .modal--fullscreen {
@@ -40,7 +44,7 @@
   right: 0;
   bottom: 0;
   padding: $spacing-vertical;
-  background: var(--modal-bg);
+  background: var(--modal-fullscreen-bg);
   overflow-y: scroll;
 
   .main {
@@ -54,7 +58,7 @@
 // Slide down isn't possible without doing a lot of re-work to the modal component
 .ReactModal__Overlay {
   .modal--fullscreen {
-    transition: height var(--animation-style) var(--animation-style);
+    transition: height var(--animation-duration) var(--animation-style);
     height: 0;
   }
 
diff --git a/src/renderer/scss/component/_nav.scss b/src/renderer/scss/component/_nav.scss
index 54c432142..ae6d28f80 100644
--- a/src/renderer/scss/component/_nav.scss
+++ b/src/renderer/scss/component/_nav.scss
@@ -1,13 +1,14 @@
 .nav {
   grid-area: nav;
-  background-color: var(--color-nav-bg);
+  background-color: var(--nav-bg-color);
   padding: $spacing-width;
+  color: var(--nav-color);
 
   hr {
     width: 24px;
     margin: 36px 0;
     // width: 40px;
-    border: solid 1px var(--color-grey);
+    border: solid 1px var(--color-divider);
     margin: $spacing-vertical $spacing-vertical * 2/3;
   }
 }
@@ -28,7 +29,7 @@
 
 .nav__link {
   // padding-top: $spacing-vertical / 3;
-  color: var(--color-grey-dark);
+  color: inherit;
   white-space: nowrap;
 
   .btn__label {
@@ -48,7 +49,7 @@
   }
 
   .btn:hover {
-    color: var(--color-black);
+    color: var(--text-color);
   }
 }
 
@@ -70,10 +71,11 @@
 }
 
 .nav__link--active {
-  color: var(--color-black);
+  color: var(--text-color);
 }
 
 .nav__sub-links {
+  color: var(--nav-color);
   padding-bottom: $spacing-vertical * 1/3;
 }
 
diff --git a/src/renderer/scss/component/_scrollbar.scss b/src/renderer/scss/component/_scrollbar.scss
index c501d0ddd..bec95304f 100644
--- a/src/renderer/scss/component/_scrollbar.scss
+++ b/src/renderer/scss/component/_scrollbar.scss
@@ -1,5 +1,6 @@
 ::-webkit-scrollbar {
   width: 8px;
+  height: 8px;
   overflow: auto;
 }
 
diff --git a/src/renderer/scss/component/_search.scss b/src/renderer/scss/component/_search.scss
index b172f67a4..ba95dfdf0 100644
--- a/src/renderer/scss/component/_search.scss
+++ b/src/renderer/scss/component/_search.scss
@@ -31,21 +31,24 @@
   border-bottom: none;
 
   &:focus {
-    background-color: var(--color-bg);
+    background-color: var(--search-active-bg-color);
     border-radius: 0;
-    border-bottom: 1px solid var(--color-grey);
+    border-bottom: 1px solid var(--color-divider);
     box-shadow: var(--box-shadow-button);
   }
 }
 
 .wunderbar__menu {
   max-width: 100px;
+  border-radius: 0 0 3px 3px !important;
+  padding: 0 !important;
+  background: transparent !important;
   overflow-x: hidden;
 }
 
 .wunderbar__suggestion {
   padding: 5px 10px;
-  background-color: var(--header-bg);
+  background-color: var(--search-bg-color);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -53,7 +56,7 @@
   font-family: 'metropolis-medium';
 
   &:not(:first-of-type) {
-    border-top: 1px solid var(--color-divider);
+    border-top: 1px solid var(--search-item-border-color);
   }
 }
 
@@ -69,6 +72,7 @@
 }
 
 .wunderbar__active-suggestion {
+  color: var(--search-item-active-color);
   background-color: var(--color-secondary);
 }
 
@@ -80,10 +84,9 @@
 
 .search__input {
   font-family: 'metropolis-bold';
-  background: var(--color-black);
   font-size: var(--search-modal-input-height);
-  color: var(--color-black);
-  background: var(--modal-bg);
+  color: var(--search-color);
+  background: transparent;
   width: 100%;
 }
 
@@ -93,5 +96,8 @@
 
   .search-result__column {
     flex: 0 0 270px;
+    .card__media {
+      background-color: var(--color-search-placeholder);
+    }
   }
 }
diff --git a/src/renderer/scss/component/_table.scss b/src/renderer/scss/component/_table.scss
index c5df4f48e..109922e1a 100644
--- a/src/renderer/scss/component/_table.scss
+++ b/src/renderer/scss/component/_table.scss
@@ -15,12 +15,14 @@ table.table {
   }
 
   thead {
-    border-bottom: 1px solid var(--color-grey);
+    color: var(--text-color);
+    border-bottom: var(--table-border);
   }
 
   th,
   td {
     font-size: 13px;
+    padding: 8px 0;
   }
 
   th {
@@ -29,7 +31,7 @@ table.table {
 
   td {
     font-family: 'metropolis-medium';
-    color: var(--color-grey-dark);
+    color: var(--color-help);
     padding: $spacing-vertical * 1/6 0;
 
     .btn:not(.btn--link) {
@@ -48,6 +50,8 @@ table.table {
 
   tbody {
     tr {
+      border-bottom: var(--table-item-border);
+      padding: 8px 0;
       &:nth-child(even):not(.odd) {
         background-color: var(--table-item-odd);
       }
@@ -70,7 +74,7 @@ table.table--stretch {
 
 table.table--help {
   td:nth-of-type(1) {
-    color: var(--color-black);
+    color: var(--text-color);
     font-family: 'metropolis-semibold';
     min-width: 130px;
   }
diff --git a/static/themes/dark.css b/static/themes/dark.css
index abb09ed39..00185a9df 100644
--- a/static/themes/dark.css
+++ b/static/themes/dark.css
@@ -1,65 +1,91 @@
 :root {
-    /* Colors */
-    --color-primary:  #009688;
-    --color-canvas: #0f1517;
-    --color-bg: #1a2327;
-    --color-bg-alt: #314048;
-    --color-help: rgba(255,255,255, 0.5);
-    --color-error: #a94442;
-    --color-load-screen-text: #FFF;
-    --color-money: #1DE9B6;
-    --color-meta-light: #757575;
-    --color-dark-overlay: rgba(15, 21, 23, 0.85);
-    --color-download: rgba(255, 255, 255, 0.75);
 
+  /* Colors */
 
-    /* Text */
-    --text-color: #FFF;
-    --text-selection-bg: rgba(0,150,136, 0.95);
+  --color-divider: #53637C;;
+  --color-canvas: transparent;
+  --color-help: #8696AF;
+  --color-download: rgba(255, 255, 255, 0.75);
+  --color-download-overlay: var(--color-black);
+  --color-bg: #203049;
+  --color-bg-alt: #13233C;
+  --color-placeholder: var(--color-bg-alt);
 
-    /* Form */
-    --form-label-color: rgba(255, 255, 255, 0.70);
+  /* Text */
+  --text-color: #FFF;
+  --text-help-color: var(--color-help);
+  --text-selection-color: #fff;
 
-    /* Input */
-    --input-bg: transparent;
-    --input-border-color: rgba(255,255,255, 0.70);
-    --input-hover-border-color: rgba(255, 255, 255, 1);
+   /* Form */
+   --form-label-color: #FFF;
 
-    /* input:placeholder */
-    --input-placeholder-color: rgba(255,255,255, 0.5);
+  /* Input */
+  --input-bg: transparent;
+  --input-label-color: var(--color-help);
+  --input-color: var(--text-color);
+  --input-border-size: 1px;
+  --input-border-color: rgba(255,255,255, 0.5);
+  --input-hover-border-color: rgba(255, 255, 255, 1);
+  --input-copyable-bg: #203049;
+  --input-copyable-color: #8696AF;
+  --input-copyable-border: #53637C;
 
-    /* input:disabled */
-    --input-disabled-color: rgba(255, 255, 255, 0.50);
-    --input-disabled-border-color: rgba(255, 255, 255, 0.70);
+  /* input:disabled */
+  --input-disabled-border-color: rgba(255, 255, 255, 0.42);
+  --input-disabled-color: rgba(255, 255, 255, 0.54);
 
-    /* Search */
-    --search-bg: rgba(0,0,0, 0.45);
-    --search-color: #757575;
-    --search-active-bg: rgba(0,0,0, 0.75);
-    --search-border: 1px solid rgba(0,0,0, 0.25);
+  /* Button */
+  --btn-bg-primary: var(--color-primary);
+  --btn-color-primary: var(--color-white);
+  --btn-bg-primary-hover: var(--color-primary-light);
+  --btn-bg-alt: #13233C;
+  --btn-color-alt: var(--text-color);
+  --btn-home-bg-color: #44548F;
 
-    /* Tab */
-    --tab-color: rgba(255,255,255, 0.5) ;
-    --tab-active-color: rgba(255,255,255, 0.75);
+  /* Header */
+  --header-bg: var(--color-white);
+  --header-color: var(--color-text);
+  --header-active-color: rgba(0, 0, 0, 0.85);
+  --header-button-bg: transparent;
+  --header-button-hover-bg: rgba(100, 100, 100, 0.15);
+  --header-primary-color: #8165B0;
 
-    /* Header */
-    --header-color: #CCC;
-    --header-active-color: #FFF;
-    --header-button-hover-bg: var(--color-bg-alt);
+  /* Header */
+  --header-color: #CCC;
+  --header-active-color: var(--color-white);
+  --header-button-hover-bg: var(--color-bg-alt);
 
-    /* Table */
-    --table-border: 0;
-    --table-item-even: var(--color-bg-alt);
-    --table-item-odd: transparent;
+  /* Header -> search */
+  --search-color: var(--color-white);
+  --search-bg-color: rgb(58, 74, 99);
+  --search-active-bg-color: #13233C;
+  --search-active-shadow: 0 6px 9px -2px var(--color-grey--dark);
+  --search-modal-input-height: 70px;
 
-    /* Modal */
-    --modal-overlay-bg: var(--color-dark-overlay);
-    --modal-border: 1px solid rgba(0, 0, 0, 0.25);
+  /* Nav */
+  --nav-color: #44548F;
+  --nav-bg-color: #0D102F;
 
-    /* Scrollbar */
-    --scrollbar-thumb-bg: rgba(255, 255, 255, 0.20);
-    --scrollbar-thumb-hover-bg: rgba(255, 255, 255, 0.35);
+  /* Table */
+  --table-border: 1px solid var(--color-bg-alt);
+  --table-item-odd: var(--color-bg-alt);
 
-    /* Divider */
-    --divider: 1px solid rgba(255, 225, 225, 0.12);
+  /* Card */
+  --card-bg: #13233C;
+  --card-radius: 3px;
+  --card-text-color: var(--color-help);
+  --card-wallet-color: var(--text-color-inverse);
+  --success-msg-color: var(--color-primary-light);
+  --success-msg-border:var(--color-primary);
+  --success-msg-bg: var(--color-bg);
+
+  /* Modal */
+  --modal-bg: var(--card-bg);
+  --modal-overlay-bg:  rgba(32,48,73, 0.75);
+  --modal-border: 1px solid rgba(0, 0, 0, 0.25);
+  --modal-btn-bg-color: #2D3D56;
+
+  /* Scrollbar */
+  --scrollbar-thumb-bg: rgba(255, 255, 255, 0.20);
+  --scrollbar-thumb-hover-bg: #8696AF;
 }
-- 
2.45.3


From 03fe12baf25d77779e68f4ae1800cfad0c06b2d2 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean.yesmunt@gmail.com>
Date: Tue, 17 Apr 2018 02:20:10 -0400
Subject: [PATCH 2/4] allow custom themes

---
 src/renderer/component/theme/view.jsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/renderer/component/theme/view.jsx b/src/renderer/component/theme/view.jsx
index e998d6d20..bac5410d8 100644
--- a/src/renderer/component/theme/view.jsx
+++ b/src/renderer/component/theme/view.jsx
@@ -3,15 +3,11 @@ import React from 'react';
 const Theme = props => {
   const { themePath } = props;
 
-  // Force light mode while until dark mode is ready
-  // This is so we don't have to change users settings for them
-  return null;
+  if (!themePath) {
+    return null;
+  }
 
-  // if (!themePath) {
-  //   return null;
-  // }
-  //
-  // return <link href={themePath} rel="stylesheet" type="text/css" media="screen,print" />;
+  return <link href={themePath} rel="stylesheet" type="text/css" media="screen,print" />;
 };
 
 export default Theme;
-- 
2.45.3


From 01140632e56537005ecda3acf3fe4cd38a27fe32 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean.yesmunt@gmail.com>
Date: Tue, 17 Apr 2018 02:25:25 -0400
Subject: [PATCH 3/4] use darker text colors

---
 src/renderer/scss/_vars.scss           | 2 +-
 src/renderer/scss/component/_card.scss | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss
index 40fb08ea2..48d261b72 100644
--- a/src/renderer/scss/_vars.scss
+++ b/src/renderer/scss/_vars.scss
@@ -127,7 +127,7 @@ $large-breakpoint: 1760px;
   --search-modal-input-height: 70px;
 
   /* Nav */
-  --nav-color: #bbb;
+  --nav-color: var(--color-grey-dark);
   --nav-bg-color: var(--color-grey-light);
 
   /* Table */
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index a42cc912c..d87bda3d4 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -1,5 +1,4 @@
 .card {
-  color: var(--card-text-color);
   margin-left: auto;
   margin-right: auto;
   border-radius: var(--card-radius);
-- 
2.45.3


From 7495e8a138d35e8fc88df755786a1ebced89bcb3 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean.yesmunt@gmail.com>
Date: Tue, 17 Apr 2018 02:30:24 -0400
Subject: [PATCH 4/4] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 50e0ffc49..51fbd36c6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
    * Build for both architectures (x86 and x64) for Windows ([#1262](https://github.com/lbryio/lbry-app/pull/1262))
    * Add referral FAQ to Invites screen([#1314](https://github.com/lbryio/lbry-app/pull/1314))
    * Show exact wallet balance on mouse hover over ([#1305](https://github.com/lbryio/lbry-app/pull/1305))
+   * New dark mode ([#1269](https://github.com/lbryio/lbry-app/pull/1269))
 
 ### Changed
 * Add flair to snackbar ([#1313](https://github.com/lbryio/lbry-app/pull/1313))
-- 
2.45.3