Applies a dark theme, based on a global class (#243)

* Applies a dark theme, based on a global class

* Auto-detect theme from devtools

* isDark doesn't use state param

* Updated colors for visibility

* Remove isDark from computed properties

Author: Jordan Hoff

src/devtools/App.vue

@@ -1,7 +1,7 @@
 <style lang="stylus" src="./global.styl"></style>
 
 <template>
-<div id="app" class="app">
+<div id="app" :class="{ app: true, dark: isDark }">
   <div class="header">
     <img class="logo" src="./assets/logo.png" alt="Vue">
     <span class="message-container">
@@ -52,6 +52,13 @@ import { mapState } from 'vuex'
 
 export default {
   name: 'app',
+  data () {
+    return {
+      isDark: typeof chrome !== 'undefined' &&
+        typeof chrome.devtools !== 'undefined' &&
+        chrome.devtools.panels.themeName === 'dark'
+    }
+  },
   components: {
     components: ComponentsTab,
     vuex: VuexTab,
@@ -102,11 +109,13 @@ export default {
   width 100%
   height 100%
   user-select none
-  background-color #fff
+  background-color $background-color
   display flex
   flex-direction column
   h1
     color #42b983
+  &.dark
+    background-color $dark-background-color
 
 .header
   display flex
@@ -115,6 +124,8 @@ export default {
   box-shadow 0 0 8px rgba(0, 0, 0, 0.15)
   font-size 14px
   position relative
+  .app.dark &
+    border-bottom 1px solid $dark-border-color
 
 .logo
   width 30px
@@ -137,9 +148,11 @@ export default {
   cursor pointer
   position relative
   border-bottom-color transparent
-  background-color #fff
+  background-color $background-color
   color #888
   transition color .35s ease
+  .app.dark &
+    background-color $dark-background-color
 
   &:hover
     color #555
@@ -186,6 +199,8 @@ $event-count-bubble-size = 18px
   position absolute
   right 0
   top 12px
+  .app.dark &
+    background-color $dark-background-color
 
 .active-bar
   position absolute

src/devtools/common.styl

@@ -1,7 +1,10 @@
 // Colors
 $blue = #44A1FF
-$green = #42b983
-$darkerGreen = #3ba776
+$grey = #DDDDDD
+$green = #42B983
+$darkerGreen = #3BA776
+$slate = #242424
+$white = #FFFFFF
 
 // The min-width to give icons text...
 $wide = 820px
@@ -11,5 +14,11 @@ $tall = 300px
 
 // Theme
 $active-color = $darkerGreen
-$border-color = #dddddd
+$border-color = $grey
+$background-color = $white
 $component-color = $active-color
+
+$dark-active-color = $active-color
+$dark-border-color = lighten($slate, 10%)
+$dark-background-color = $slate
+$dark-component-color = $active-color

src/devtools/components/ActionHeader.vue

@@ -17,6 +17,8 @@
   height 35px
   @media (min-height: $tall)
     height 50px
+  .app.dark &
+    border-bottom 1px solid $dark-border-color
 
 .component-name
   display flex

src/devtools/components/DataField.vue

@@ -130,6 +130,8 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+@import "../common"
+
 .data-field
   user-select text
   font-size 12px
@@ -164,7 +166,7 @@ export default {
     &.literal
       color #0033cc
   .type
-    color #fff
+    color $background-color
     padding 3px 6px
     font-size 10px
     line-height 10px
@@ -199,13 +201,30 @@ export default {
       border 1px solid #e3e3e3
       border-radius 3px
       padding 8px 12px
-      background-color #fff
+      background-color $background-color
       line-height 16px
       box-shadow 0 2px 12px rgba(0,0,0,.1)
       .key
         width 90px
     .meta-field
       display block
+  .app.dark &
+    .key
+      color: #e36eec
+    .value
+      color #bdc6cf
+      &.string
+        color #e33e3a
+      &.null
+        color #999
+      &.literal
+        color #997fff
+    .type
+      color: #242424
+      .meta
+        border 1px solid $dark-border-color
+        background-color $dark-background-color
+
 
 .more
   cursor pointer

src/devtools/components/ScrollPane.vue

@@ -48,6 +48,12 @@ export default {
 .scroll
   flex 1
   overflow overlay
+  .app.dark &::-webkit-scrollbar
+    background: $dark-background-color
+    border-left: 1px solid $dark-border-color
+  .app.dark &::-webkit-scrollbar-thumb
+    background: lighten($dark-background-color, 7%);
+    border: 1px solid lighten($dark-border-color, 7%)
 
 // Keeping this here in case `overflow: overlay`
 // doesn't float everyone's boat.

src/devtools/components/SplitPane.vue

@@ -57,6 +57,8 @@ export default {
 
 .left
   border-right 1px solid $border-color
+  .app.dark &
+    border-right 1px solid $dark-border-color
 
 .dragger
   position absolute

src/devtools/views/components/ComponentInstance.vue

@@ -112,7 +112,7 @@ export default {
   position relative
   overflow hidden
   z-index 2
-  background-color #fff
+  background-color $background-color
   transition background-color .1s ease
   border-radius 3px
   font-size 14px
@@ -129,6 +129,8 @@ export default {
       border-left-color #fff
     .instance-name
       color #fff
+  .app.dark &
+    background-color $dark-background-color
 
 .children
   position relative

src/devtools/views/events/EventInspector.vue

@@ -49,6 +49,8 @@ export default {
 
 section:not(:last-child)
   border-bottom 1px solid $border-color
+  .app.dark &
+    border-bottom 1px solid $dark-border-color
 
 .component-name
   margin 0 10px

src/devtools/views/events/EventsHistory.vue

@@ -95,7 +95,7 @@ export default {
   cursor pointer
   padding 10px 20px
   font-size 12px
-  background-color #fff
+  background-color $background-color
   box-shadow 0 1px 5px rgba(0,0,0,.12)
   .event-name
     font-weight 600
@@ -115,6 +115,8 @@ export default {
       color: #fff
     .event-source
       color #ddd
+  .app.dark &
+    background-color $dark-background-color
 
 .time
   font-size 11px

src/devtools/views/vuex/VuexHistory.vue

@@ -145,7 +145,7 @@ $inspected_color = #af90d5
   cursor pointer
   padding 10px 20px
   font-size 12px
-  background-color #fff
+  background-color $background-color
   box-shadow 0 1px 5px rgba(0,0,0,.12)
   height 40px
   &.active
@@ -179,6 +179,8 @@ $inspected_color = #af90d5
   &:hover
     .entry-actions
       display inline-block
+  .app.dark &
+    background-color $dark-background-color
 
 .action
   color #999

src/devtools/views/vuex/VuexStateInspector.vue

@@ -132,7 +132,9 @@ function copyToClipboard (state) {
   top 1px
   font-size 12px
   color #c41a16
-  background-color #fff
+  background-color $background-color
+  .app.dark &
+    background-color $dark-background-color
 
 .import-state
   transition all .3s ease
@@ -144,7 +146,11 @@ function copyToClipboard (state) {
   box-shadow 4px 4px 6px 0 $border-color
   border 1px solid $border-color
   padding 3px
-  background-color #fff
+  background-color $background-color
+  .app.dark &
+    background-color $dark-background-color
+    box-shadow 4px 4px 6px 0 $dark-border-color
+    border 1px solid $dark-border-color
 
   textarea
     width 100%
@@ -153,4 +159,7 @@ function copyToClipboard (state) {
     outline none
     border none
     resize vertical
+    .app.dark &
+      color #DDD
+      background-color $dark-background-color
 </style>