Applies a dark theme, based on a global class

/ · yyx990803 · Feb 15, 2017 · Feb 3, 2017 · Feb 3, 2017 · Feb 3, 2017
commit 5d440e84967ecc341cd5a0f1d466943e166baebf
diff --git a/src/devtools/App.vue b/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: true }">
   <div class="header">
     <img class="logo" src="./assets/logo.png" alt="Vue">
     <span class="message-container">
@@ -102,11 +102,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 +117,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 +141,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 +192,8 @@ $event-count-bubble-size = 18px
   position absolute
   right 0
   top 12px
+  .app.dark &
+    background-color $dark-background-color
 
 .active-bar
   position absolute

diff --git a/src/devtools/common.styl b/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
diff --git a/src/devtools/components/ActionHeader.vue b/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

diff --git a/src/devtools/components/DataField.vue b/src/devtools/components/DataField.vue
@@ -164,7 +164,7 @@ export default {
     &.literal
       color #0033cc
   .type
-    color #fff
+    color $background-color
     padding 3px 6px
     font-size 10px
     line-height 10px
@@ -199,11 +199,13 @@ 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
+      .app.dark &
+        background-color $dark-background-color
     .meta-field
       display block
 

diff --git a/src/devtools/components/ScrollPane.vue b/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.

diff --git a/src/devtools/components/SplitPane.vue b/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

diff --git a/src/devtools/views/components/ComponentInstance.vue b/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

diff --git a/src/devtools/views/events/EventInspector.vue b/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

diff --git a/src/devtools/views/events/EventsHistory.vue b/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

diff --git a/src/devtools/views/vuex/VuexHistory.vue b/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

diff --git a/src/devtools/views/vuex/VuexStateInspector.vue b/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>