adding Nord theme and streamlining UI theming

browser/main/SideNav/PreferenceButton.styl

@@ -1,52 +1,50 @@
-.top-menu-preference
-  navButtonColor()
-  position absolute
-  top 22px
-  right 10px
-  width 2em
-  background-color transparent
-  &:hover
-    color $ui-button-default--active-backgroundColor
-    background-color transparent
-    .tooltip
-      opacity 1
-  &:active, &:active:hover
-    color $ui-button-default--active-backgroundColor
-
-body[data-theme="white"]
-  .top-menu-preference
-    navWhiteButtonColor()
-    background-color transparent
-    &:hover
-      color #0B99F1
-      background-color transparent
-    &:active, &:active:hover
-      color #0B99F1
-      background-color transparent
-
-body[data-theme="dark"]
-  .top-menu-preference
-    navDarkButtonColor()
-    background-color transparent
-    &:active
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-      background-color transparent
-    &:hover
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-      background-color transparent
-
-
-
-.tooltip
-  tooltip()
-  position absolute
-  pointer-events none
-  top 26px
-  left -20px
-  z-index 200
-  padding 5px
-  line-height normal
-  border-radius 2px
-  opacity 0
-  transition 0.1s
-  white-space nowrap
+.top-menu-preference
+  navButtonColor()
+  position absolute
+  top 22px
+  right 10px
+  width 2em
+  background-color transparent
+  &:hover
+    color $ui-button-default--active-backgroundColor
+    background-color transparent
+    .tooltip
+      opacity 1
+  &:active, &:active:hover
+    color $ui-button-default--active-backgroundColor
+
+body[data-theme="white"]
+  .top-menu-preference
+    navWhiteButtonColor()
+    background-color transparent
+    &:hover
+      color #0B99F1
+      background-color transparent
+    &:active, &:active:hover
+      color #0B99F1
+      background-color transparent
+
+body[data-theme="dark"]
+  .top-menu-preference
+    navDarkButtonColor()
+    background-color transparent
+    &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color transparent
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color transparent
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 26px
+  left -20px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+  white-space nowrap

browser/main/SideNav/SideNav.styl

@@ -113,17 +113,14 @@ body[data-theme="dark"]
   .top
     border-color $ui-dark-borderColor
 
-body[data-theme="solarized-dark"]
-  .root, .root--folded
-    background-color $ui-solarized-dark-backgroundColor
-    border-right 1px solid $ui-solarized-dark-borderColor
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root, .root--folded
+      background-color get-theme-var(theme, 'backgroundColor')
+      border-right 1px solid get-theme-var(theme, 'borderColor')
 
-body[data-theme="monokai"]
-  .root, .root--folded
-    background-color $ui-monokai-backgroundColor
-    border-right 1px solid $ui-monokai-borderColor
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)
 
-body[data-theme="dracula"]
-  .root, .root--folded
-    background-color $ui-dracula-backgroundColor
-    border-right 1px solid $ui-dracula-borderColor
+for theme in $themes
+  apply-theme(theme)

browser/main/SideNav/StorageItem.styl

@@ -132,55 +132,57 @@ body[data-theme="white"]
       background-color alpha($ui-button--active-backgroundColor, 40%)
       color $ui-text-color
 
-body[data-theme="dark"]
-  .header--active
-    background-color $ui-dark-button--active-backgroundColor
-    transition color background-color  0.15s
+apply-theme(theme)
+  body[data-theme={theme}]
+    .header--active
+      background-color get-theme-var(theme, 'button--active-backgroundColor')
+      transition color background-color  0.15s
+
+    .header--active
+      .header-toggleButton
+        color get-theme-var(theme, 'text-color')
+
+    .header--active
+      .header-info
+        color get-theme-var(theme, 'text-color')
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
+        &:active
+          color get-theme-var(theme, 'text-color')
+          background-color get-theme-var(theme, 'button--active-backgroundColor')
+
+    .header--active
+      .header-addFolderButton
+        color get-theme-var(theme, 'text-color')
 
-  .header--active
     .header-toggleButton
-      color $ui-dark-text-color
+      &:hover
+        transition 0.2s
+        color get-theme-var(theme, 'text-color')
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
+      &:active, &:active:hover
+        color get-theme-var(theme, 'text-color')
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
 
-  .header--active
     .header-info
-      color $ui-dark-text-color
-      background-color $ui-dark-button--active-backgroundColor
-      &:active
-        color $ui-dark-text-color
-        background-color $ui-dark-button--active-backgroundColor
+      background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
+      &:hover
+        transition 0.2s
+        color get-theme-var(theme, 'text-color')
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
+      &:active, &:active:hover
+        color get-theme-var(theme, 'text-color')
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
 
-  .header--active
     .header-addFolderButton
-      color $ui-dark-text-color
-
-  .header-toggleButton
-    &:hover
-      transition 0.2s
-      color $ui-dark-text-color
-      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
-    &:active, &:active:hover
-      color $ui-dark-text-color
-      background-color $ui-dark-button--active-backgroundColor
-
-  .header-info
-    background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-    &:hover
-      transition 0.2s
-      color $ui-dark-text-color
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-    &:active, &:active:hover
-      color $ui-dark-text-color
-      background-color $ui-dark-button--active-backgroundColor
-
-  .header-addFolderButton
-    &:hover
-      transition 0.2s
-      color $ui-dark-text-color
-      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
-    &:active, &:active:hover
-      color $ui-dark-text-color
-      background-color $ui-dark-button--active-backgroundColor
-
-
+      &:hover
+        transition 0.2s
+        color get-theme-var(theme, 'text-color')
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
+      &:active, &:active:hover
+        color get-theme-var(theme, 'text-color')
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
 
+apply-theme('dark')
 
+for theme in $themes
+  apply-theme(theme)

browser/main/SideNav/SwitchButton.styl

@@ -1,60 +1,60 @@
-.non-active-button
-  color $ui-inactive-text-color
-  font-size 16px
-  border 0
-  background-color transparent
-  transition 0.2s
-  display flex
-  text-align center
-  margin-right 4px
-  position relative
-  &:hover
-    color alpha(#239F86, 60%)
-    .tooltip
-      opacity 1
-
-.active-button
-  @extend .non-active-button
-  color $ui-button-default--active-backgroundColor
-
-.tooltip
-  tooltip()
-  position absolute
-  pointer-events none
-  top 22px
-  left -2px
-  z-index 200
-  padding 5px
-  line-height normal
-  border-radius 2px
-  opacity 0
-  transition 0.1s
-  white-space nowrap
-
-body[data-theme="white"]
-  .non-active-button
-    color $ui-inactive-text-color
-    &:hover
-      color alpha(#0B99F1, 60%)
-
-  .tag-title
-    p
-      color $ui-text-color
-
-  .non-active-button
-    &:hover
-      color alpha(#0B99F1, 60%)
-
-  .active-button
-    @extend .non-active-button
-    color #0B99F1
-
-body[data-theme="dark"]
-  .non-active-button
-    color alpha($ui-dark-text-color, 60%)
-    &:hover
-      color alpha(#0B99F1, 60%)
-
-  .tag-title
-    p
+.non-active-button
+  color $ui-inactive-text-color
+  font-size 16px
+  border 0
+  background-color transparent
+  transition 0.2s
+  display flex
+  text-align center
+  margin-right 4px
+  position relative
+  &:hover
+    color alpha(#239F86, 60%)
+    .tooltip
+      opacity 1
+
+.active-button
+  @extend .non-active-button
+  color $ui-button-default--active-backgroundColor
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 22px
+  left -2px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+  white-space nowrap
+
+body[data-theme="white"]
+  .non-active-button
+    color $ui-inactive-text-color
+    &:hover
+      color alpha(#0B99F1, 60%)
+
+  .tag-title
+    p
+      color $ui-text-color
+
+  .non-active-button
+    &:hover
+      color alpha(#0B99F1, 60%)
+
+  .active-button
+    @extend .non-active-button
+    color #0B99F1
+
+body[data-theme="dark"]
+  .non-active-button
+    color alpha($ui-dark-text-color, 60%)
+    &:hover
+      color alpha(#0B99F1, 60%)
+
+  .tag-title
+    p
       color alpha($ui-dark-text-color, 60%)