vuejs · Akryum · Jun 10, 2018 · Jun 5, 2018 · Jun 7, 2018 · Jun 7, 2018
diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/BuildProgress.vue b/packages/@vue/cli-ui-addon-webpack/src/components/BuildProgress.vue
@@ -75,10 +75,15 @@ export default {
   .vue-progress-path
     >>> .background
       stroke rgba($vue-ui-color-dark, .1)
+      .vue-ui-dark-mode &
+        stroke $vue-ui-color-darker
 
   .operations
     color $vue-ui-color-dark
     padding-bottom 12px
+    text-align center
+    .vue-ui-dark-mode &
+      color lighten($vue-ui-color-dark, 60%)
     &:first-letter
       text-transform uppercase
 

diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue b/packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue
@@ -198,7 +198,8 @@ export default {
 
   methods: {
     getColors (index) {
-      return colors[index % colors.length]
+      const list = colors[this.darkMode ? 'dark' : 'light']
+      return list[index % list.length]
     },
 
     getChunk (id) {
@@ -320,6 +321,8 @@ export default {
     padding $padding-item
     background $vue-ui-color-light-neutral
     border-radius $br
+    .vue-ui-dark-mode &
+      background $vue-ui-color-dark
 
   .content
     display flex

diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/WebpackDashboard.vue b/packages/@vue/cli-ui-addon-webpack/src/components/WebpackDashboard.vue
@@ -114,6 +114,8 @@ export default {
         .value
           color $vue-ui-color-dark
           font-size 24px
+          .vue-ui-dark-mode &
+            color $vue-ui-color-light
 
           .secondary
             opacity .75
@@ -124,6 +126,8 @@ export default {
     padding $padding-item
     background $vue-ui-color-light-neutral
     border-radius $br
+    .vue-ui-dark-mode &
+      background $vue-ui-color-dark
 
   .pane-toolbar
     margin-bottom $padding-item

diff --git a/packages/@vue/cli-ui-addon-webpack/src/util/colors.js b/packages/@vue/cli-ui-addon-webpack/src/util/colors.js
@@ -1,34 +1,70 @@
-export default [
-  [
-    '#42b983',
-    '#5DC395',
-    '#78CDA7',
-    '#93D7B9',
-    '#AEE1CB',
-    '#C9EBDD'
+export default {
+  light: [
+    [
+      '#42b983',
+      '#5DC395',
+      '#78CDA7',
+      '#93D7B9',
+      '#AEE1CB',
+      '#C9EBDD'
+    ],
+    [
+      '#A96FDA',
+      '#B684DF',
+      '#C399E4',
+      '#D0AEE9',
+      '#DDC3EE',
+      '#EAD8F3'
+    ],
+    [
+      '#03C2E6',
+      '#27CBEA',
+      '#4BD4EE',
+      '#6FDDF2',
+      '#93E6F6',
+      '#B7EFFA'
+    ],
+    [
+      '#778F9B',
+      '#8B9FA9',
+      '#9FAFB7',
+      '#B3BFC5',
+      '#C7CFD3',
+      '#DBDFE1'
+    ]
   ],
-  [
-    '#A96FDA',
-    '#B684DF',
-    '#C399E4',
-    '#D0AEE9',
-    '#DDC3EE',
-    '#EAD8F3'
-  ],
-  [
-    '#03C2E6',
-    '#27CBEA',
-    '#4BD4EE',
-    '#6FDDF2',
-    '#93E6F6',
-    '#B7EFFA'
-  ],
-  [
-    '#778F9B',
-    '#8B9FA9',
-    '#9FAFB7',
-    '#B3BFC5',
-    '#C7CFD3',
-    '#DBDFE1'
+  dark: [
+    [
+      '#42b983',
+      '#3CA978',
+      '#37986C',
+      '#318760',
+      '#2A7654',
+      '#246548'
+    ],
+    [
+      '#A96FDA',
+      '#9A65C7',
+      '#8B5BB3',
+      '#7B519F',
+      '#6C478B',
+      '#5D3D77'
+    ],
+    [
+      '#03C2E6',
+      '#03B1D2',
+      '#039FBD',
+      '#038EA8',
+      '#027C93',
+      '#026A7E'
+    ],
+    [
+      '#778F9B',
+      '#6D828D',
+      '#62767F',
+      '#576971',
+      '#4C5C63',
+      '#414E55'
+    ]
   ]
-]
+}
diff --git a/packages/@vue/cli-ui/locales/en.json b/packages/@vue/cli-ui/locales/en.json
@@ -111,7 +111,8 @@
         "empty": "No logs yet"
       },
       "report-bug": "Report bug",
-      "translate": "Help translate"
+      "translate": "Help translate",
+      "dark-mode": "Toggle dark mode"
     },
     "terminal-view": {
       "buttons": {

diff --git a/packages/@vue/cli-ui/package.json b/packages/@vue/cli-ui/package.json
@@ -49,7 +49,7 @@
     "@vue/cli-plugin-eslint": "^3.0.0-beta.16",
     "@vue/cli-service": "^3.0.0-beta.16",
     "@vue/eslint-config-standard": "^3.0.0-beta.16",
-    "@vue/ui": "^0.2.5",
+    "@vue/ui": "^0.3.1",
     "ansi_up": "^2.0.2",
     "cross-env": "^5.1.5",
     "eslint": "^4.16.0",

diff --git a/packages/@vue/cli-ui/src/components/ContentView.vue b/packages/@vue/cli-ui/src/components/ContentView.vue
@@ -38,11 +38,15 @@ export default {
   .content
     height 100%
     background $color-background-light
+    .vue-ui-dark-mode &
+      background lighten($vue-ui-color-darker, 1%)
     .wrapper
       background $md-white
       position relative
       overflow-x hidden
       overflow-y auto
+      .vue-ui-dark-mode &
+        background $vue-ui-color-darker
 
   &.limit-width
     .wrapper

diff --git a/packages/@vue/cli-ui/src/components/FileDiff.vue b/packages/@vue/cli-ui/src/components/FileDiff.vue
@@ -113,15 +113,18 @@ status-color($color)
       fill $color
 
 .file-diff
-  background $vue-ui-color-light
   border solid 1px $vue-ui-color-light-neutral
   margin $padding-item
+  .vue-ui-dark-mode &
+    border-color $vue-ui-color-dark
 
   .toolbar
     padding $padding-item
     background $color-background-light
     h-box()
     align-items center
+    .vue-ui-dark-mode &
+      background $vue-ui-color-dark
 
     >>> > *
       space-between-x($padding-item)

diff --git a/packages/@vue/cli-ui/src/components/FileDiffChange.vue b/packages/@vue/cli-ui/src/components/FileDiffChange.vue
@@ -92,6 +92,9 @@ export default {
     h-box()
     background $color-background-light
     color rgba($vue-ui-color-dark, .4)
+    .vue-ui-dark-mode &
+      background darken($vue-ui-color-dark, 10%)
+      color $vue-ui-color-light
 
     .ln
       text-align right
@@ -112,11 +115,21 @@ export default {
 
   &.type-add
     background lighten($vue-ui-color-success, 80%)
+    .vue-ui-dark-mode &
+      background darken($vue-ui-color-success, 70%)
     .lines
       background lighten($vue-ui-color-success, 60%)
+      .vue-ui-dark-mode &
+       background darken($vue-ui-color-success, 60%)
 
   &.type-del
     background lighten($vue-ui-color-danger, 80%)
+    .vue-ui-dark-mode &
+      background darken($vue-ui-color-danger, 70%)
+
     .lines
       background lighten($vue-ui-color-danger, 60%)
+      .vue-ui-dark-mode &
+        background darken($vue-ui-color-danger, 60%)
+
 </style>
diff --git a/packages/@vue/cli-ui/src/components/FileDiffChunk.vue b/packages/@vue/cli-ui/src/components/FileDiffChunk.vue
@@ -39,5 +39,8 @@ export default {
       box-center()
       color darken($vue-ui-color-light-neutral, 30%)
       letter-spacing 4px
+      .vue-ui-dark-mode &
+        background lighten($vue-ui-color-darker, 1%)
+        color $vue-ui-color-dark-neutral
 
 </style>
diff --git a/packages/@vue/cli-ui/src/components/FileDiffView.vue b/packages/@vue/cli-ui/src/components/FileDiffView.vue
@@ -240,7 +240,6 @@ export default {
 
   .toolbar
     padding $padding-item
-    background $md-white
     h-box()
     align-items center
 
@@ -249,8 +248,10 @@ export default {
 
     .file-count
       padding 3px 6px
-      background darken(@background, 3%)
+      background darken($vue-ui-color-light, 3%)
       border-radius $br
+      .vue-ui-dark-mode &
+        background $vue-ui-color-dark
 
   .list
     flex 100% 1 1

diff --git a/packages/@vue/cli-ui/src/components/FolderExplorer.vue b/packages/@vue/cli-ui/src/components/FolderExplorer.vue
@@ -229,7 +229,6 @@ export default {
 
 .toolbar
   padding $padding-item
-  background $md-white
   h-box()
   align-items center
 

diff --git a/packages/@vue/cli-ui/src/components/LoggerView.vue b/packages/@vue/cli-ui/src/components/LoggerView.vue
@@ -120,6 +120,8 @@ export default {
   grid-template-columns 1fr
   grid-template-rows auto 1fr
   grid-template-areas "toolbar" "logs"
+  .vue-ui-dark-mode &
+    background $vue-ui-color-darker
 
   .toolbar
     grid-area toolbar

diff --git a/packages/@vue/cli-ui/src/components/NavList.vue b/packages/@vue/cli-ui/src/components/NavList.vue
@@ -52,4 +52,6 @@ export default {
   overflow-x hidden
   overflow-y auto
   background $color-background-light
+  .vue-ui-dark-mode &
+    background lighten($vue-ui-color-darker, 1%)
 </style>
diff --git a/packages/@vue/cli-ui/src/components/ProjectNav.vue b/packages/@vue/cli-ui/src/components/ProjectNav.vue
@@ -112,7 +112,9 @@ export default {
 @import "~@/style/imports"
 
 .project-nav
-  background $vue-ui-color-dark
+  background $vue-ui-color-light-neutral
+  .vue-ui-dark-mode &
+    background $vue-ui-color-dark
 
   .content
     v-box()
@@ -130,19 +132,14 @@ export default {
       display block !important
 
     >>> .vue-ui-button
-      button-colors(rgba($vue-ui-color-light, .7), transparent)
       border-radius 0
       padding-left 0
       padding-right @padding-left
       h-box()
       box-center()
       width 100%
-
-      &:hover, &:active
-        $bg = darken($vue-ui-color-dark, 70%)
-        button-colors($vue-ui-color-light, $bg)
-        &.selected
-          button-colors(lighten($vue-ui-color-primary, 40%), $bg)
+      &.selected
+        button-colors($vue-ui-color-primary, transparent)
 
   &.wide
     >>> .vue-ui-button

diff --git a/packages/@vue/cli-ui/src/components/PromptsList.vue b/packages/@vue/cli-ui/src/components/PromptsList.vue
@@ -83,4 +83,6 @@ export default {
   font-size 1.6em
   font-weight lighter
   color $vue-ui-color-accent
+  .vue-ui-dark-mode &
+    color lighten($vue-ui-color-accent, 60%)
 </style>