Update stylesheets and added darkMode variable and toggle.

1 files changed, 74 insertions, 88 deletions

diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 964a9fcea..373b29e7d 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -1,16 +1,36 @@
 @import './config.scss';
 
-html {
-  overflow: hidden;
+html { overflow: hidden; }
+
+.theme__dark .app {
+  .sidebar {
+    background: $dark-theme-gray-darker;
+    box-shadow: 0 0 5px 0 $dark-theme-black;
+    color: $theme-text-color;
+
+    .sidebar__add-service {
+      color: $dark-theme-gray-lightest;
+      background: $dark-theme-gray;
+    }
+
+    .sidebar__button {
+      color: $dark-theme-gray-lightest;
+      font-size: 22px;
+
+      &:hover,
+      &:active { color: $dark-theme-gray-smoke; }
+      &.is-muted { color: $dark-theme-gray; }
+    }
+  }
+
+  .app-loader .app-loader__title { color: $dark-theme-gray-lightest; }
 }
 
 .app {
   display: flex;
   flex-direction: column;
 
-  .app__content {
-    display: flex;
-  }
+  .app__content { display: flex; }
 
   .app__service {
     display: flex;
@@ -19,134 +39,100 @@ html {
   }
 }
 
-.electron-app-title-bar {
-  z-index: 99999999;
-}
+.electron-app-title-bar { z-index: 99999999; }
 
 .window-draggable {
-  position: absolute;
-  width: 100%;
-  top: 0px;
-  left: 0px;
   height: 35px;
+  left: 0;
   pointer-events: none;
-  -webkit-app-region: drag;
+  position: absolute;
+  top: 0;
+  width: 100%;
   z-index: 9999;
+  -webkit-app-region: drag;
 }
 
-.darwin {
-  .sidebar {
-    padding-top: 23px;
-  }
-}
+.darwin .sidebar { padding-top: 23px; }
 
 .sidebar {
-  display: flex;
-  flex-direction: column;
   align-items: center;
-  width: $theme-sidebar-width;
   background: $theme-gray-lightest;
-  box-shadow: 1px 0 10px rgba(0,0,0,0.08);
-  z-index: 200;
-  text-align: center;
+  box-shadow: 1px 0 10px rgba(0, 0, 0, .08);
   color: $theme-text-color;
+  display: flex;
+  flex-direction: column;
   padding-bottom: 10px;
+  text-align: center;
+  width: $theme-sidebar-width;
+  z-index: 200;
 
   .sidebar__add-service {
-    width: 32px;
-    height: 32px;
+    color: $theme-gray-light;
     background: $theme-gray-lighter;
     border-radius: $theme-border-radius-small;
+    height: 32px;
     margin: 10px auto;
-    color: $theme-gray-light;
+    width: 32px;
   }
 
   .sidebar__button {
-    width: $theme-sidebar-width;
-    padding: 7px 0;
+    color: $theme-gray-light;
     font-size: 24px;
+    padding: 7px 0;
     position: relative;
-    color: $theme-gray-light;
-
-    &:hover {
-      color: darken($theme-gray-light, 10%);
-    }
-
-    &:active {
-      color: lighten($theme-gray-light, 10%);
-    }
-
-    &.is-muted {
-      color: $theme-brand-primary;
-    }
+    width: $theme-sidebar-width;
 
-    &--new-service {
-      padding-bottom: 6px;
-    }
+    &:hover,
+    &:active { color: lighten($theme-gray-light, 10%); }
+    &.is-muted { color: $theme-brand-primary; }
+    &--new-service { padding-bottom: 6px; }
   }
 
   & > div {
     display: flex;
     overflow-y: scroll;
 
-    &::-webkit-scrollbar {
-      display: none;
-    }
+    &::-webkit-scrollbar { display: none; }
   }
 }
 
-.grid {
-  .grid__row {
-    display: flex;
-    flex-direction: row;
-
-    &>* {
-      margin-right: 20px;
-    }
+.grid .grid__row {
+  display: flex;
+  flex-direction: row;
 
-    & :last-child {
-      margin-right: 0;
-    }
-  }
+  & > * { margin-right: 20px; }
+  & :last-child { margin-right: 0; }
 }
 
 .app-loader {
+  align-items: center;
   display: flex;
   justify-content: center;
-  align-items: center;
 
   .app-loader__title {
     color: #FFF;
     font-size: 40px;
   }
 
-  &>span {
-    height: auto;
-  }
-}
-
-.dev-warning {
-  display: none;
+  & > span { height: auto; }
 }
 
-.isDevMode {
-  .dev-warning {
-    display: block;
-    position: fixed;
-    background: $theme-brand-warning;
-    width: auto;
-    height: auto;
-    top: 5px;
-    right: 5px;
-    padding: 4px;
-    font-size: 10px;
-    color: #FFF;
-    z-index: 999999999;
-    border-radius: 3px;
-    transition: opacity 0.5s ease;
-
-    &:hover {
-      opacity: 0;
-    }
-  }
+.dev-warning { display: none; }
+
+.isDevMode .dev-warning {
+  border-radius: 3px;
+  background: $theme-brand-warning;
+  color: #FFF;
+  display: block;
+  font-size: 10px;
+  height: auto;
+  padding: 4px;
+  position: fixed;
+  right: 5px;
+  top: 5px;
+  transition: opacity .5s ease;
+  width: auto;
+  z-index: 999999999;
+
+  &:hover { opacity: 0; }
 }