Skip to content

Commit 37252d8

Browse files
AkryumAkryum
committed
feat: new dark mode theme
1 parent ad0d848 commit 37252d8

23 files changed

+158
-53
lines changed

‎packages/app-frontend/src/assets/style/index.postcss

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,114 @@
1+
html, body, #app {
2+
@apply dark:!bg-gray-800;
3+
}
4+
5+
.vue-ui-high-contrast {
6+
#app {
7+
@apply !bg-black;
8+
}
9+
}
10+
11+
/* Poppers */
12+
113
.v-popper__popper.v-popper--theme-tooltip code {
214
@apply bg-gray-500/50 rounded px-1 text-[11px] font-mono;
315
}
16+
17+
.v-popper--theme-dropdown {
18+
.vue-ui-dark-mode & {
19+
.v-popper__inner,
20+
.v-popper__arrow-outer {
21+
@apply border-gray-900;
22+
}
23+
24+
.v-popper__inner {
25+
@apply bg-gray-800;
26+
}
27+
28+
.v-popper__arrow-inner {
29+
@apply border-gray-800;
30+
}
31+
}
32+
}
33+
34+
/* Scrollbars */
35+
36+
::-webkit-scrollbar {
37+
width: 10px;
38+
height: 10px;
39+
}
40+
41+
::-webkit-scrollbar-track-piece {
42+
@apply bg-transparent;
43+
}
44+
45+
::-webkit-scrollbar-track:hover {
46+
@apply bg-gray-600/5 dark:bg-gray-600/10;
47+
}
48+
49+
::-webkit-scrollbar-thumb {
50+
@apply bg-gray-300 hover:bg-gray-600 border-[3px] border-transparent bg-clip-padding rounded dark:bg-gray-700 dark:hover:bg-gray-500;
51+
}
52+
53+
.vue-ui-dark-mode {
54+
scrollbar-color: theme('colors.gray.800') theme('colors.black');
55+
56+
.selectable-item {
57+
@apply bg-gray-800 hover:bg-gray-900;
58+
59+
&.selected {
60+
@apply hover:bg-green-600;
61+
}
62+
}
63+
}
64+
65+
/* Buttons */
66+
67+
.vue-ui-button:not(.flat):not(.vue-ui-dropdown-button) {
68+
@apply dark:bg-gray-700 dark:hover:!bg-gray-600;
69+
}
70+
71+
.vue-ui-button.flat,
72+
.vue-ui-dropdown-button {
73+
@apply hover:!bg-green-500/30;
74+
}
75+
76+
.vue-ui-dark-mode {
77+
.vue-ui-group {
78+
.vue-ui-button:not(.flat) {
79+
@apply !bg-gray-700 hover:!bg-gray-600;
80+
81+
&.selected {
82+
@apply !bg-green-700;
83+
}
84+
}
85+
}
86+
}
87+
88+
/* Switch */
89+
90+
.vue-ui-dark-mode {
91+
.vue-ui-switch {
92+
> .content > .wrapper {
93+
@apply bg-gray-700;
94+
}
95+
&.selected {
96+
> .content > .wrapper {
97+
@apply bg-green-600;
98+
}
99+
}
100+
}
101+
}
102+
103+
/* Tab */
104+
105+
.vue-ui-dark-mode {
106+
.vue-ui-group {
107+
.indicator .content {
108+
@apply !border-b-green-500;
109+
}
110+
.vue-ui-button.selected {
111+
@apply text-green-500;
112+
}
113+
}
114+
}

‎packages/app-frontend/src/assets/style/index.styl

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,6 @@ button:focus
6464
.vue-ui-icon svg
6565
fill currentColor
6666

67-
// Popover
68-
69-
.v-popper--theme-dropdown
70-
.vue-ui-dark-mode &
71-
.v-popper__inner,
72-
.v-popper__arrow-inner,
73-
.v-popper__arrow-outer
74-
border-color $vue-ui-gray-900
75-
7667
// Tooltips
7768

7869
.keyboard

‎packages/app-frontend/src/features/App.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ export default defineComponent({
8080
isInitializing,
8181
showAppsSelector,
8282
orientation,
83+
isChrome,
8384
}
8485
},
8586
})
@@ -105,7 +106,7 @@ export default defineComponent({
105106
/>
106107

107108
<template v-else>
108-
<AppHeader class="flex-none relative z-10 border-b border-gray-200 dark:border-gray-800" />
109+
<AppHeader class="flex-none relative z-10 border-b border-gray-200 dark:border-gray-700" />
109110

110111
<SplitPane
111112
save-id="app-select-pane"

‎packages/app-frontend/src/features/apps/AppSelectPane.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export default defineComponent({
7979

8080
<template>
8181
<div class="flex flex-col">
82-
<div class="flex-none border-b border-gray-200 dark:border-gray-800 flex items-center space-x-1 h-8 pr-1 box-content">
82+
<div class="flex-none border-b border-gray-200 dark:border-gray-700 flex items-center space-x-1 h-8 pr-1 box-content">
8383
<VueInput
8484
v-model="search"
8585
icon-left="search"

‎packages/app-frontend/src/features/components/ComponentsInspector.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export default defineComponent({
105105
>
106106
<template #left>
107107
<div class="flex flex-col h-full">
108-
<div class="flex items-center border-b border-gray-200 dark:border-gray-800">
108+
<div class="flex items-center border-b border-gray-200 dark:border-gray-700">
109109
<VueInput
110110
ref="treeFilterInput"
111111
v-model="treeFilter"

‎packages/app-frontend/src/features/components/SelectedComponentPane.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export default defineComponent({
7373
v-if="data && sameApp"
7474
class="h-full flex flex-col relative"
7575
>
76-
<div class="px-2 h-8 box-content border-b border-gray-200 dark:border-gray-800 flex items-center flex-none">
76+
<div class="px-2 h-8 box-content border-b border-gray-200 dark:border-gray-700 flex items-center flex-none">
7777
<VTooltip
7878
:shown="showCopiedName"
7979
:triggers="[]"

‎packages/app-frontend/src/features/connection/AppConnecting.vue

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="app-connecting">
2+
<div class="app-connecting w-full h-full flex items-center justify-center bg-white dark:bg-gray-800">
33
<div class="animation-outer">
44
<div class="animation-inner">
55
<img
@@ -13,17 +13,6 @@
1313
</template>
1414

1515
<style lang="stylus" scoped>
16-
.app-connecting
17-
width 100%
18-
height 100%
19-
display flex
20-
align-items center
21-
justify-content center
22-
background white
23-
24-
.vue-ui-dark-mode &
25-
background $vue-ui-color-almost-black
26-
2716
.animation-inner
2817
padding 28px 24px 16px
2918
background rgba($vue-ui-color-primary, .1)

‎packages/app-frontend/src/features/header/AppHeader.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export default defineComponent({
133133
</script>
134134

135135
<template>
136-
<div class="flex items-center border-r border-gray-200 dark:border-gray-800 p-0.5"
136+
<div class="flex items-center border-r border-gray-200 dark:border-gray-700 p-0.5"
137137
:class="{
138138
'flex-col': orientation === 'landscape',
139139
}"
@@ -218,7 +218,7 @@ export default defineComponent({
218218
Devtools plugins
219219
</VueDropdownButton>
220220

221-
<div class="border-t border-gray-200 dark:border-gray-800 my-1" />
221+
<div class="border-t border-gray-200 dark:border-gray-700 my-1" />
222222

223223
<VueDropdownButton
224224
href="https://devtools.vuejs.org"
@@ -255,7 +255,7 @@ export default defineComponent({
255255

256256
<style lang="postcss" scoped>
257257
.vue-ui-group :deep(.indicator) {
258-
@apply !p-0.5;
258+
@apply !p-px;
259259
.content {
260260
@apply !border !border-green-500/30 rounded-md bg-green-500/10;
261261
}

‎packages/app-frontend/src/features/header/AppHeaderSelect.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,7 @@ export default defineComponent({
214214

215215
<div
216216
v-if="$shared.showMenuScrollTip"
217-
class="text-xs flex items-center space-x-2 text-gray-500 pl-4 pr-1 py-1 border-t border-gray-200 dark:border-gray-800 group"
217+
class="text-xs flex items-center space-x-2 text-gray-500 pl-4 pr-1 py-1 border-t border-gray-200 dark:border-gray-700 group"
218218
>
219219
<span>Scroll to switch</span>
220220
<VueIcon icon="mouse" />

‎packages/app-frontend/src/features/inspector/StateType.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export default defineComponent({
155155
padding 0 9px 0 21px
156156
157157
.data-type
158-
color $blueishGrey
158+
color theme('colors.gray.600')
159159
position relative
160160
cursor pointer
161161
border-radius 3px
@@ -165,7 +165,7 @@ export default defineComponent({
165165
user-select none
166166
167167
.vue-ui-dark-mode &
168-
color lighten(#486887, 30%)
168+
color theme('colors.gray.400')
169169
170170
.arrow
171171
transition transform .1s ease

0 commit comments

Comments
 (0)