diff --git a/packages/@vue/cli-ui-addon-webpack/src/components/BuildProgress.vue b/packages/@vue/cli-ui-addon-webpack/src/components/BuildProgress.vue
index 86affabb6a..270e087a3d 100644
--- 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
index b3a8b92a9e..414f70f5bc 100644
--- 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
index 6c6dc9de48..a24f61cfdc 100644
--- 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
index 371f3b5d39..dc22942065 100644
--- 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
index 6cc9a6f450..800147a46e 100644
--- 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
index 1b342ba76b..8e6323d964 100644
--- 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
index b6e9b983c8..93b6ac806b 100644
--- 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
index ec3db3600e..f76d3170c6 100644
--- 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
index 5302a544ce..2e79ea0a5d 100644
--- 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
index 6fb5ca2363..e2b83668b2 100644
--- 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
index f6ec106d1b..3aa2a53f81 100644
--- 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
index 4d08b9862d..8d69f8d560 100644
--- 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
index 80347b8d86..dfbfd49b76 100644
--- 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
index febfb321d2..d97ea4c2ed 100644
--- 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
index 6822855993..128bc89fd0 100644
--- 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
index 8305970b62..e13eae1a01 100644
--- 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>
diff --git a/packages/@vue/cli-ui/src/components/StatusBar.vue b/packages/@vue/cli-ui/src/components/StatusBar.vue
index b5966f5605..59a7fc3f88 100644
--- a/packages/@vue/cli-ui/src/components/StatusBar.vue
+++ b/packages/@vue/cli-ui/src/components/StatusBar.vue
@@ -48,19 +48,27 @@
         <div v-else class="last-message">{{ $t('components.status-bar.log.empty') }}</div>
       </div>
 
+      <div
+        class="section action dark-mode"
+        v-tooltip="$t('components.status-bar.dark-mode')"
+        @click="toggleDarkMode()"
+      >
+        <VueIcon icon="invert_colors"/>
+      </div>
+
       <div
         class="section action bug-report"
+        v-tooltip="$t('components.status-bar.report-bug')"
         @click="onBugReportClick()"
       >
         <VueIcon icon="bug_report"/>
-        <span>{{ $t('components.status-bar.report-bug') }}</span>
       </div>
       <div
         class="section action translate"
+        v-tooltip="$t('components.status-bar.translate')"
         @click="onTranslateClick()"
       >
         <VueIcon icon="g_translate"/>
-        <span>{{ $t('components.status-bar.translate') }}</span>
       </div>
     </div>
   </div>
@@ -70,6 +78,7 @@
 import PROJECT_CURRENT from '../graphql/projectCurrent.gql'
 import CONSOLE_LOG_LAST from '../graphql/consoleLogLast.gql'
 import CONSOLE_LOG_ADDED from '../graphql/consoleLogAdded.gql'
+import DARK_MODE_SET from '../graphql/darkModeSet.gql'
 
 let lastRoute
 
@@ -95,6 +104,10 @@ export default {
     }
   },
 
+  created () {
+    this.loadDarkMode()
+  },
+
   methods: {
     onProjectClick () {
       this.$emit('project')
@@ -134,6 +147,31 @@ export default {
         '_blank'
       )
       win.focus()
+    },
+
+    loadDarkMode () {
+      const raw = localStorage.getItem('vue-ui-dark-mode')
+      this.applyDarkMode(raw === 'true')
+    },
+
+    async applyDarkMode (enabled) {
+      localStorage.setItem('vue-ui-dark-mode', enabled.toString())
+      const el = document.getElementsByTagName('html')[0]
+      if (enabled) {
+        el.classList.add('vue-ui-dark-mode')
+      } else {
+        el.classList.remove('vue-ui-dark-mode')
+      }
+      await this.$apollo.mutate({
+        mutation: DARK_MODE_SET,
+        variables: {
+          enabled
+        }
+      })
+    },
+
+    toggleDarkMode () {
+      this.applyDarkMode(!this.darkMode)
     }
   }
 }
@@ -146,13 +184,17 @@ export default {
   position relative
   z-index 1
   box-shadow 0 -2px 10px rgba(black, .05)
+  .vue-ui-dark-mode &
+    box-shadow 0 -2px 10px rgba(black, .2)
 
   .content
     h-box()
     align-items center
     background $vue-ui-color-light
-    font-size $padding-item
+    font-size 12px
     height 28px
+    .vue-ui-dark-mode &
+      background $vue-ui-color-darker
 
   .section
     h-box()
@@ -165,12 +207,16 @@ export default {
     &:hover
       opacity 1
       background lighten($vue-ui-color-light-neutral, 30%)
+      .vue-ui-dark-mode &
+        background $vue-ui-color-dark
 
     > .vue-ui-icon + *
       margin-left 4px
 
     .label
       color lighten($vue-ui-color-dark, 20%)
+      .vue-ui-dark-mode &
+        color lighten($vue-ui-color-dark-neutral, 20%)
 
     &.action
       user-select none
diff --git a/packages/@vue/cli-ui/src/components/StepWizard.vue b/packages/@vue/cli-ui/src/components/StepWizard.vue
index 179fadaa3c..b48f618576 100644
--- a/packages/@vue/cli-ui/src/components/StepWizard.vue
+++ b/packages/@vue/cli-ui/src/components/StepWizard.vue
@@ -83,6 +83,8 @@ export default {
   .header,
   >>> .tabs
     background $vue-ui-color-light-neutral
+    .vue-ui-dark-mode &
+      background $vue-ui-color-dark
 
   >>> .tabs-content
     height 0
@@ -123,6 +125,8 @@ export default {
     $max-width = 1200px
     .shell
       background $md-white
+      .vue-ui-dark-mode &
+        background $vue-ui-color-darker
     .header .content,
     >>> .vue-ui-tab
       max-width $max-width
diff --git a/packages/@vue/cli-ui/src/components/TerminalView.vue b/packages/@vue/cli-ui/src/components/TerminalView.vue
index 513f4b63a7..31dc1cf5ba 100644
--- a/packages/@vue/cli-ui/src/components/TerminalView.vue
+++ b/packages/@vue/cli-ui/src/components/TerminalView.vue
@@ -40,8 +40,8 @@ Terminal.applyAddon(fit)
 Terminal.applyAddon(webLinks)
 
 const defaultTheme = {
-  foreground: '#000',
-  background: '#dbebec',
+  foreground: '#2c3e50',
+  background: '#e4f5ef',
   cursor: 'rgba(0, 0, 0, .4)',
   selection: 'rgba(0, 0, 0, 0.3)',
   black: '#000000',
@@ -62,6 +62,16 @@ const defaultTheme = {
   brightWhite: '#ffffff'
 }
 
+const darkTheme = {
+  ...defaultTheme,
+  foreground: '#fff',
+  background: '#2c3e50',
+  cursor: 'rgba(255, 255, 255, .4)',
+  selection: 'rgba(255, 255, 255, 0.3)',
+  magenta: '#e83030',
+  brightMagenta: '#e83030'
+}
+
 export default {
   props: {
     cols: {
@@ -105,6 +115,16 @@ export default {
     }
   },
 
+  computed: {
+    theme () {
+      if (this.darkMode) {
+        return darkTheme
+      } else {
+        return defaultTheme
+      }
+    }
+  },
+
   watch: {
     cols (c) {
       this.$_terminal.resize(c, this.rows)
@@ -114,7 +134,16 @@ export default {
       this.$_terminal.resize(this.cols, r)
     },
 
-    content: 'setContent'
+    content: 'setContent',
+
+    theme: {
+      handler (value) {
+        if (this.$_terminal) {
+          this.$_terminal._setTheme(this.theme)
+        }
+      },
+      immediate: true
+    }
   },
 
   mounted () {
@@ -134,7 +163,7 @@ export default {
       let term = this.$_terminal = new Terminal({
         cols: this.cols,
         rows: this.rows,
-        theme: defaultTheme,
+        theme: this.theme,
         ...this.options
       })
       webLinks.webLinksInit(term, this.handleLink)
@@ -210,6 +239,8 @@ export default {
   v-box()
   align-items stretch
   background $vue-ui-color-light-neutral
+  .vue-ui-dark-mode &
+    background $vue-ui-color-dark
 
   .view
     flex 100% 1 1
diff --git a/packages/@vue/cli-ui/src/components/TopBar.vue b/packages/@vue/cli-ui/src/components/TopBar.vue
index bae7a83f4c..41214578ac 100644
--- a/packages/@vue/cli-ui/src/components/TopBar.vue
+++ b/packages/@vue/cli-ui/src/components/TopBar.vue
@@ -81,6 +81,9 @@ export default {
   height 32px
   z-index 1
   box-shadow 0 2px 10px rgba(black, .05)
+  .vue-ui-dark-mode &
+    background $vue-ui-color-darker
+    box-shadow 0 2px 10px rgba(black, .2)
 
   &,
   .actions
diff --git a/packages/@vue/cli-ui/src/graphql/darkMode.gql b/packages/@vue/cli-ui/src/graphql/darkMode.gql
new file mode 100644
index 0000000000..a170fe032c
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/darkMode.gql
@@ -0,0 +1,3 @@
+query darkMode {
+  darkMode @client
+}
diff --git a/packages/@vue/cli-ui/src/graphql/darkModeSet.gql b/packages/@vue/cli-ui/src/graphql/darkModeSet.gql
new file mode 100644
index 0000000000..04ac843036
--- /dev/null
+++ b/packages/@vue/cli-ui/src/graphql/darkModeSet.gql
@@ -0,0 +1,3 @@
+mutation darkModeSet($enabled: Boolean!) {
+  darkModeSet (enabled: $enabled) @client
+}
diff --git a/packages/@vue/cli-ui/src/main.js b/packages/@vue/cli-ui/src/main.js
index fa8449afc9..e5c0ae3b1f 100644
--- a/packages/@vue/cli-ui/src/main.js
+++ b/packages/@vue/cli-ui/src/main.js
@@ -14,6 +14,7 @@ import Responsive from './util/responsive'
 import SharedData from './util/shared-data'
 import PluginAction from './util/plugin-action'
 import gql from 'graphql-tag'
+import ClientState from './mixins/ClientState'
 
 window.gql = gql
 
@@ -44,6 +45,8 @@ for (const key in Filters) {
   Vue.filter(key, Filters[key])
 }
 
+Vue.mixin(ClientState)
+
 Vue.config.productionTip = false
 
 // For client addons
diff --git a/packages/@vue/cli-ui/src/mixins/ClientState.js b/packages/@vue/cli-ui/src/mixins/ClientState.js
new file mode 100644
index 0000000000..45042a9980
--- /dev/null
+++ b/packages/@vue/cli-ui/src/mixins/ClientState.js
@@ -0,0 +1,11 @@
+import CONNECTED from '../graphql/connected.gql'
+import DARK_MODE from '../graphql/darkMode.gql'
+
+// @vue/component
+export default {
+  apollo: {
+    // In plugins, user `this.$root.connected` for example
+    connected: CONNECTED,
+    darkMode: DARK_MODE
+  }
+}
diff --git a/packages/@vue/cli-ui/src/state/defaults.js b/packages/@vue/cli-ui/src/state/defaults.js
index 9f79703fae..332fe6750c 100644
--- a/packages/@vue/cli-ui/src/state/defaults.js
+++ b/packages/@vue/cli-ui/src/state/defaults.js
@@ -1,4 +1,5 @@
 export default {
   connected: true,
-  loading: 0
+  loading: 0,
+  darkMode: false
 }
diff --git a/packages/@vue/cli-ui/src/state/resolvers.js b/packages/@vue/cli-ui/src/state/resolvers.js
index e38aa646ea..7b82625013 100644
--- a/packages/@vue/cli-ui/src/state/resolvers.js
+++ b/packages/@vue/cli-ui/src/state/resolvers.js
@@ -16,6 +16,13 @@ export default {
       }
       cache.writeData({ data })
       return null
+    },
+    darkModeSet: (root, { enabled }, { cache }) => {
+      const data = {
+        darkMode: enabled
+      }
+      cache.writeData({ data })
+      return null
     }
   }
 }
diff --git a/packages/@vue/cli-ui/src/style/main.styl b/packages/@vue/cli-ui/src/style/main.styl
index ef7f6c883a..a500697ee1 100644
--- a/packages/@vue/cli-ui/src/style/main.styl
+++ b/packages/@vue/cli-ui/src/style/main.styl
@@ -17,7 +17,6 @@ h2
 
 .actions-bar
   padding $padding-item
-  background $md-white
   h-box()
   box-center()
   position relative
@@ -50,6 +49,10 @@ ansi-colors('blue', $md-blue)
 ansi-colors('magenta', $vue-ui-color-accent)
 ansi-colors('cyan', $vue-ui-color-info)
 ansi-colors('white', $vue-ui-color-light)
+.vue-ui-dark-mode
+  ansi-colors('black', $vue-ui-color-dark-neutral)
+  ansi-colors('magenta', lighten($vue-ui-color-accent, 60%))
+  ansi-colors('white', $vue-ui-color-light-neutral)
 
 .vue-ui-icon.separator
   width 6px
@@ -59,6 +62,8 @@ ansi-colors('white', $vue-ui-color-light)
   margin $padding-item
   svg
     fill rgba($vue-ui-color-dark, .2)
+    .vue-ui-dark-mode &
+      fill rgba($vue-ui-color-light, .2)
 
 .ais-index
   height 100%
@@ -82,9 +87,14 @@ ansi-colors('white', $vue-ui-color-light)
     color darken($vue-ui-color-primary, 10%)
     padding 0 2px
     border-radius $br
+    .vue-ui-dark-mode &
+      background $vue-ui-color-dark
+      color $vue-ui-color-primary
 
 .ais-logo
   max-width 150px
+  .vue-ui-dark-mode &
+    filter brightness(200%)
 
 .no-padding-x
   padding-left 0
diff --git a/packages/@vue/cli-ui/src/style/vars.styl b/packages/@vue/cli-ui/src/style/vars.styl
index 0dc95ec2cc..0a5ac879bf 100644
--- a/packages/@vue/cli-ui/src/style/vars.styl
+++ b/packages/@vue/cli-ui/src/style/vars.styl
@@ -1,2 +1,2 @@
-$padding-item = 12px
+$padding-item = 16px
 $font-mono = 'Roboto Mono', monospace
diff --git a/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue b/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue
index 0d4ea14f46..11c1a7f96c 100644
--- a/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue
+++ b/packages/@vue/cli-ui/src/views/ProjectTaskDetails.vue
@@ -310,6 +310,9 @@ export default {
   h-box()
   box-center()
   border-radius $br
+  .vue-ui-dark-mode &
+    background $vue-ui-color-dark
+    color $vue-ui-color-light
 
 .content
   flex auto 1 1
@@ -342,12 +345,16 @@ export default {
     margin-right 4px
     >>> svg
       fill $vue-ui-color-dark
+      .vue-ui-dark-mode &
+        fill $vue-ui-color-light-neutral
 
   .name
     font-size 22px
     color $vue-ui-color-dark
     position relative
     top -1px
+    .vue-ui-dark-mode &
+      color $vue-ui-color-light-neutral
 
   .description
     color $color-text-light
diff --git a/yarn.lock b/yarn.lock
index b4ec9c85b9..6b2559b3ea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1028,9 +1028,9 @@
   dependencies:
     lodash "^4.17.4"
 
-"@vue/ui@^0.2.5":
-  version "0.2.8"
-  resolved "https://registry.yarnpkg.com/@vue/ui/-/ui-0.2.8.tgz#11cd83cb691e045ce0925f6562267ebc4394b4c2"
+"@vue/ui@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@vue/ui/-/ui-0.3.1.tgz#1c7d1b68bdea45ca65f32bdde0ff4d37baf6eadd"
   dependencies:
     focus-visible "^4.1.0"
     material-design-icons "^3.0.1"