Skip to content

Commit e258f5a

Browse files
AkryumAkryum
authored
feat(ui): dark mode (#1512)
* feat(ui): dark mode * fix(ui): ansi colors in dark mode * refactor(ui): dark mode in apollo state * feat(ui): xterm dark mode * feat(ui): custom srcrollbar (chrome/safari) * fix(ui): lower density * feat(ui): client state mixin * feat(ui): webpack analyzer dark-mode support * fix(ui): status bar
1 parent b361473 commit e258f5a

30 files changed

+264
-60
lines changed

‎packages/@vue/cli-ui-addon-webpack/src/components/BuildProgress.vue

+5
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,15 @@ export default {
7575
.vue-progress-path
7676
>>> .background
7777
stroke rgba($vue-ui-color-dark, .1)
78+
.vue-ui-dark-mode &
79+
stroke $vue-ui-color-darker
7880
7981
.operations
8082
color $vue-ui-color-dark
8183
padding-bottom 12px
84+
text-align center
85+
.vue-ui-dark-mode &
86+
color lighten($vue-ui-color-dark, 60%)
8287
&:first-letter
8388
text-transform uppercase
8489

‎packages/@vue/cli-ui-addon-webpack/src/components/WebpackAnalyzer.vue

+4-1
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,8 @@ export default {
198198
199199
methods: {
200200
getColors (index) {
201-
return colors[index % colors.length]
201+
const list = colors[this.darkMode ? 'dark' : 'light']
202+
return list[index % list.length]
202203
},
203204
204205
getChunk (id) {
@@ -320,6 +321,8 @@ export default {
320321
padding $padding-item
321322
background $vue-ui-color-light-neutral
322323
border-radius $br
324+
.vue-ui-dark-mode &
325+
background $vue-ui-color-dark
323326
324327
.content
325328
display flex

‎packages/@vue/cli-ui-addon-webpack/src/components/WebpackDashboard.vue

+4
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,8 @@ export default {
114114
.value
115115
color $vue-ui-color-dark
116116
font-size 24px
117+
.vue-ui-dark-mode &
118+
color $vue-ui-color-light
117119
118120
.secondary
119121
opacity .75
@@ -124,6 +126,8 @@ export default {
124126
padding $padding-item
125127
background $vue-ui-color-light-neutral
126128
border-radius $br
129+
.vue-ui-dark-mode &
130+
background $vue-ui-color-dark
127131
128132
.pane-toolbar
129133
margin-bottom $padding-item

‎packages/@vue/cli-ui-addon-webpack/src/util/colors.js

+68-32
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,70 @@
1-
export default [
2-
[
3-
'#42b983',
4-
'#5DC395',
5-
'#78CDA7',
6-
'#93D7B9',
7-
'#AEE1CB',
8-
'#C9EBDD'
1+
export default {
2+
light: [
3+
[
4+
'#42b983',
5+
'#5DC395',
6+
'#78CDA7',
7+
'#93D7B9',
8+
'#AEE1CB',
9+
'#C9EBDD'
10+
],
11+
[
12+
'#A96FDA',
13+
'#B684DF',
14+
'#C399E4',
15+
'#D0AEE9',
16+
'#DDC3EE',
17+
'#EAD8F3'
18+
],
19+
[
20+
'#03C2E6',
21+
'#27CBEA',
22+
'#4BD4EE',
23+
'#6FDDF2',
24+
'#93E6F6',
25+
'#B7EFFA'
26+
],
27+
[
28+
'#778F9B',
29+
'#8B9FA9',
30+
'#9FAFB7',
31+
'#B3BFC5',
32+
'#C7CFD3',
33+
'#DBDFE1'
34+
]
935
],
10-
[
11-
'#A96FDA',
12-
'#B684DF',
13-
'#C399E4',
14-
'#D0AEE9',
15-
'#DDC3EE',
16-
'#EAD8F3'
17-
],
18-
[
19-
'#03C2E6',
20-
'#27CBEA',
21-
'#4BD4EE',
22-
'#6FDDF2',
23-
'#93E6F6',
24-
'#B7EFFA'
25-
],
26-
[
27-
'#778F9B',
28-
'#8B9FA9',
29-
'#9FAFB7',
30-
'#B3BFC5',
31-
'#C7CFD3',
32-
'#DBDFE1'
36+
dark: [
37+
[
38+
'#42b983',
39+
'#3CA978',
40+
'#37986C',
41+
'#318760',
42+
'#2A7654',
43+
'#246548'
44+
],
45+
[
46+
'#A96FDA',
47+
'#9A65C7',
48+
'#8B5BB3',
49+
'#7B519F',
50+
'#6C478B',
51+
'#5D3D77'
52+
],
53+
[
54+
'#03C2E6',
55+
'#03B1D2',
56+
'#039FBD',
57+
'#038EA8',
58+
'#027C93',
59+
'#026A7E'
60+
],
61+
[
62+
'#778F9B',
63+
'#6D828D',
64+
'#62767F',
65+
'#576971',
66+
'#4C5C63',
67+
'#414E55'
68+
]
3369
]
34-
]
70+
}

‎packages/@vue/cli-ui/locales/en.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,8 @@
111111
"empty": "No logs yet"
112112
},
113113
"report-bug": "Report bug",
114-
"translate": "Help translate"
114+
"translate": "Help translate",
115+
"dark-mode": "Toggle dark mode"
115116
},
116117
"terminal-view": {
117118
"buttons": {

‎packages/@vue/cli-ui/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
"@vue/cli-plugin-eslint": "^3.0.0-beta.16",
5050
"@vue/cli-service": "^3.0.0-beta.16",
5151
"@vue/eslint-config-standard": "^3.0.0-beta.16",
52-
"@vue/ui": "^0.2.5",
52+
"@vue/ui": "^0.3.1",
5353
"ansi_up": "^2.0.2",
5454
"cross-env": "^5.1.5",
5555
"eslint": "^4.16.0",

‎packages/@vue/cli-ui/src/components/ContentView.vue

+4
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,15 @@ export default {
3838
.content
3939
height 100%
4040
background $color-background-light
41+
.vue-ui-dark-mode &
42+
background lighten($vue-ui-color-darker, 1%)
4143
.wrapper
4244
background $md-white
4345
position relative
4446
overflow-x hidden
4547
overflow-y auto
48+
.vue-ui-dark-mode &
49+
background $vue-ui-color-darker
4650
4751
&.limit-width
4852
.wrapper

‎packages/@vue/cli-ui/src/components/FileDiff.vue

+4-1
Original file line numberDiff line numberDiff line change
@@ -113,15 +113,18 @@ status-color($color)
113113
fill $color
114114
115115
.file-diff
116-
background $vue-ui-color-light
117116
border solid 1px $vue-ui-color-light-neutral
118117
margin $padding-item
118+
.vue-ui-dark-mode &
119+
border-color $vue-ui-color-dark
119120
120121
.toolbar
121122
padding $padding-item
122123
background $color-background-light
123124
h-box()
124125
align-items center
126+
.vue-ui-dark-mode &
127+
background $vue-ui-color-dark
125128
126129
>>> > *
127130
space-between-x($padding-item)

‎packages/@vue/cli-ui/src/components/FileDiffChange.vue

+13
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,9 @@ export default {
9292
h-box()
9393
background $color-background-light
9494
color rgba($vue-ui-color-dark, .4)
95+
.vue-ui-dark-mode &
96+
background darken($vue-ui-color-dark, 10%)
97+
color $vue-ui-color-light
9598
9699
.ln
97100
text-align right
@@ -112,11 +115,21 @@ export default {
112115
113116
&.type-add
114117
background lighten($vue-ui-color-success, 80%)
118+
.vue-ui-dark-mode &
119+
background darken($vue-ui-color-success, 70%)
115120
.lines
116121
background lighten($vue-ui-color-success, 60%)
122+
.vue-ui-dark-mode &
123+
background darken($vue-ui-color-success, 60%)
117124
118125
&.type-del
119126
background lighten($vue-ui-color-danger, 80%)
127+
.vue-ui-dark-mode &
128+
background darken($vue-ui-color-danger, 70%)
129+
120130
.lines
121131
background lighten($vue-ui-color-danger, 60%)
132+
.vue-ui-dark-mode &
133+
background darken($vue-ui-color-danger, 60%)
134+
122135
</style>

‎packages/@vue/cli-ui/src/components/FileDiffChunk.vue

+3
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,8 @@ export default {
3939
box-center()
4040
color darken($vue-ui-color-light-neutral, 30%)
4141
letter-spacing 4px
42+
.vue-ui-dark-mode &
43+
background lighten($vue-ui-color-darker, 1%)
44+
color $vue-ui-color-dark-neutral
4245
4346
</style>

‎packages/@vue/cli-ui/src/components/FileDiffView.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,6 @@ export default {
240240
241241
.toolbar
242242
padding $padding-item
243-
background $md-white
244243
h-box()
245244
align-items center
246245
@@ -249,8 +248,10 @@ export default {
249248
250249
.file-count
251250
padding 3px 6px
252-
background darken(@background, 3%)
251+
background darken($vue-ui-color-light, 3%)
253252
border-radius $br
253+
.vue-ui-dark-mode &
254+
background $vue-ui-color-dark
254255
255256
.list
256257
flex 100% 1 1

‎packages/@vue/cli-ui/src/components/FolderExplorer.vue

-1
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,6 @@ export default {
229229
230230
.toolbar
231231
padding $padding-item
232-
background $md-white
233232
h-box()
234233
align-items center
235234

‎packages/@vue/cli-ui/src/components/LoggerView.vue

+2
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,8 @@ export default {
120120
grid-template-columns 1fr
121121
grid-template-rows auto 1fr
122122
grid-template-areas "toolbar" "logs"
123+
.vue-ui-dark-mode &
124+
background $vue-ui-color-darker
123125
124126
.toolbar
125127
grid-area toolbar

‎packages/@vue/cli-ui/src/components/NavList.vue

+2
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,6 @@ export default {
5252
overflow-x hidden
5353
overflow-y auto
5454
background $color-background-light
55+
.vue-ui-dark-mode &
56+
background lighten($vue-ui-color-darker, 1%)
5557
</style>

‎packages/@vue/cli-ui/src/components/ProjectNav.vue

+5-8
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,9 @@ export default {
112112
@import "~@/style/imports"
113113
114114
.project-nav
115-
background $vue-ui-color-dark
115+
background $vue-ui-color-light-neutral
116+
.vue-ui-dark-mode &
117+
background $vue-ui-color-dark
116118
117119
.content
118120
v-box()
@@ -130,19 +132,14 @@ export default {
130132
display block !important
131133
132134
>>> .vue-ui-button
133-
button-colors(rgba($vue-ui-color-light, .7), transparent)
134135
border-radius 0
135136
padding-left 0
136137
padding-right @padding-left
137138
h-box()
138139
box-center()
139140
width 100%
140-
141-
&:hover, &:active
142-
$bg = darken($vue-ui-color-dark, 70%)
143-
button-colors($vue-ui-color-light, $bg)
144-
&.selected
145-
button-colors(lighten($vue-ui-color-primary, 40%), $bg)
141+
&.selected
142+
button-colors($vue-ui-color-primary, transparent)
146143
147144
&.wide
148145
>>> .vue-ui-button

‎packages/@vue/cli-ui/src/components/PromptsList.vue

+2
Original file line numberDiff line numberDiff line change
@@ -83,4 +83,6 @@ export default {
8383
font-size 1.6em
8484
font-weight lighter
8585
color $vue-ui-color-accent
86+
.vue-ui-dark-mode &
87+
color lighten($vue-ui-color-accent, 60%)
8688
</style>

0 commit comments

Comments
 (0)