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

+111
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

-9
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

+2-1
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

+1-1
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

+1-1
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

+1-1
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

+1-12
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

+3-3
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

+1-1
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

+2-2
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

‎packages/app-frontend/src/features/inspector/custom/CustomInspector.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export default defineComponent({
8888
>
8989
<template #left>
9090
<div class="flex flex-col h-full">
91-
<div class="border-b border-gray-200 dark:border-gray-800 flex items-center pr-2 h-8 box-content">
91+
<div class="border-b border-gray-200 dark:border-gray-700 flex items-center pr-2 h-8 box-content">
9292
<VueInput
9393
v-model="inspector.treeFilter"
9494
icon-left="search"

‎packages/app-frontend/src/features/inspector/custom/CustomInspectorSelectedNodePane.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export default defineComponent({
6767
v-if="inspector.selectedNode"
6868
class="h-full flex flex-col"
6969
>
70-
<div class="px-2 h-8 box-content border-b border-gray-200 dark:border-gray-800 flex items-center flex-none">
70+
<div class="px-2 h-8 box-content border-b border-gray-200 dark:border-gray-700 flex items-center flex-none">
7171
<div>
7272
{{ inspector.selectedNode.label }}
7373
</div>

‎packages/app-frontend/src/features/layout/SplitPane.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ export default defineComponent({
164164
class="relative top-0 left-0 overflow-hidden"
165165
:class="{
166166
'pointer-events-none': dragging,
167-
'border-r border-gray-200 dark:border-gray-800': orientation === 'landscape' && !leftCollapsed && !rightCollapsed,
167+
'border-r border-gray-200 dark:border-gray-700': orientation === 'landscape' && !leftCollapsed && !rightCollapsed,
168168
}"
169169
:style="leftStyle"
170170
>
@@ -194,7 +194,7 @@ export default defineComponent({
194194
>
195195
<button
196196
v-tooltip="rightCollapsed ? `Expand ${orientation === 'landscape' ? 'Right' : 'Bottom'} pane` : `Collapse ${orientation === 'landscape' ? 'Left' : 'Top'} pane`"
197-
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 flex items-center justify-center w-2.5 h-6 rounded overflow-hidden pointer-events-auto opacity-70 hover:opacity-100"
197+
class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 flex items-center justify-center w-2.5 h-6 rounded overflow-hidden pointer-events-auto opacity-70 hover:opacity-100"
198198
:class="{
199199
'rounded-r-none border-r-0': orientation === 'landscape',
200200
'rounded-b-none border-b-0': orientation === 'portrait',
@@ -212,7 +212,7 @@ export default defineComponent({
212212
class="relative bottom-0 right-0"
213213
:class="{
214214
'pointer-events-none': dragging,
215-
'border-t border-gray-200 dark:border-gray-800': orientation === 'portrait'
215+
'border-t border-gray-200 dark:border-gray-700': orientation === 'portrait'
216216
}"
217217
:style="rightStyle"
218218
>
@@ -226,7 +226,7 @@ export default defineComponent({
226226
>
227227
<button
228228
v-tooltip="leftCollapsed ? `Expand ${orientation === 'landscape' ? 'Left' : 'Top'} pane` : `Collapse ${orientation === 'landscape' ? 'Right' : 'Bottom'} pane`"
229-
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 flex items-center justify-center w-2.5 h-6 rounded overflow-hidden pointer-events-auto opacity-70 hover:opacity-100"
229+
class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 flex items-center justify-center w-2.5 h-6 rounded overflow-hidden pointer-events-auto opacity-70 hover:opacity-100"
230230
:class="{
231231
'rounded-l-none border-l-0': orientation === 'landscape',
232232
'rounded-t-none border-t-0': orientation === 'portrait',

‎packages/app-frontend/src/features/plugin/Plugins.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default defineComponent({
4747
>
4848
<template #left>
4949
<div class="h-full flex flex-col">
50-
<div class="flex-none flex items-center border-b border-gray-200 dark:border-gray-800">
50+
<div class="flex-none flex items-center border-b border-gray-200 dark:border-gray-700">
5151
<VueInput
5252
v-model="search"
5353
icon-left="search"

‎packages/app-frontend/src/features/timeline/LayerItem.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export default defineComponent({
5555
@click="select()"
5656
>
5757
<div
58-
class="border-b border-gray-200 dark:border-gray-800"
58+
class="border-b border-gray-200 dark:border-gray-700"
5959
:style="{
6060
height: `${(layer.height + 1) * 16}px`
6161
}"

‎packages/app-frontend/src/features/timeline/Timeline.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -361,7 +361,7 @@ export default defineComponent({
361361
>
362362
<template #left>
363363
<div class="flex flex-col h-full">
364-
<div class="h-8 flex-none border-b border-gray-200 dark:border-gray-800 flex items-center">
364+
<div class="h-8 flex-none border-b border-gray-200 dark:border-gray-700 flex items-center">
365365
<VueDropdown>
366366
<template #trigger>
367367
<VueButton
@@ -490,7 +490,7 @@ export default defineComponent({
490490
>
491491
<template #left>
492492
<div class="h-full flex flex-col select-none">
493-
<div class="h-8 flex items-center flex-none border-b border-gray-200 dark:border-gray-800">
493+
<div class="h-8 flex items-center flex-none border-b border-gray-200 dark:border-gray-700">
494494
<VueButton
495495
icon-left="arrow_left"
496496
class="flex-none w-4 h-4 p-0 flat zoom-btn"
@@ -533,7 +533,7 @@ export default defineComponent({
533533
<div class="absolute top-0 left-0 w-full pointer-events-none flex items-center justify-center">
534534
<div
535535
v-if="formattedCursorTime"
536-
class="text-gray-700 dark:text-gray-300 bg-white dark:bg-black border border-gray-200 dark:border-gray-800 px-1 py-0.5 rounded-full text-2xs font-mono leading-none mt-1 flex items-center space-x-0.5"
536+
class="text-gray-700 dark:text-gray-300 bg-white dark:bg-black border border-gray-200 dark:border-gray-700 px-1 py-0.5 rounded-full text-2xs font-mono leading-none mt-1 flex items-center space-x-0.5"
537537
>
538538
<VueIcon
539539
icon="schedule"

‎packages/app-frontend/src/features/timeline/TimelineEventInspector.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export default defineComponent({
5252
v-if="inspectedEvent && inspectedEventState"
5353
class="flex flex-col h-full"
5454
>
55-
<div class="header flex-none flex items-center border-b border-gray-200 dark:border-gray-800 px-2 pl-3 h-8 box-content text-bluegray-900 dark:text-bluegray-100 space-x-2">
55+
<div class="header flex-none flex items-center border-b border-gray-200 dark:border-gray-700 px-2 pl-3 h-8 box-content text-bluegray-900 dark:text-bluegray-100 space-x-2">
5656
<div
5757
class="flex-none w-2.5 h-2.5 rounded-full border-2"
5858
:style="{
@@ -101,7 +101,7 @@ export default defineComponent({
101101

102102
<div
103103
v-if="$shared.debugInfo"
104-
class="opacity-50 text-2xs px-2 text-center border-b border-gray-200 dark:border-gray-800"
104+
class="opacity-50 text-2xs px-2 text-center border-b border-gray-200 dark:border-gray-700"
105105
>
106106
Time: {{ inspectedEvent.time }}
107107
</div>

‎packages/app-frontend/src/features/timeline/TimelineEventList.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -206,12 +206,12 @@ export default defineComponent({
206206
v-if="selectedLayer && (filteredEvents.length || filter.length)"
207207
class="h-full flex flex-col relative"
208208
>
209-
<div class="flex-none flex flex-col items-stretch border-gray-200 dark:border-gray-800 border-b">
209+
<div class="flex-none flex flex-col items-stretch border-gray-200 dark:border-gray-700 border-b">
210210
<VueGroup
211211
v-if="selectedEvent && selectedEvent.group"
212212
v-model="tabId"
213213
indicator
214-
class="accent extend border-gray-200 dark:border-gray-800 border-b"
214+
class="accent extend border-gray-200 dark:border-gray-700 border-b"
215215
>
216216
<VueGroupButton
217217
value="all"

‎packages/app-frontend/src/features/timeline/TimelineEventListItem.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@ export default defineComponent({
3535

3636
<template>
3737
<div
38-
class="event border-gray-100 dark:border-gray-900 border-b flex items-center space-x-2 pl-3 pr-2 text-xs cursor-pointer select-none"
38+
class="event flex items-center space-x-2 pl-3 pr-2 text-xs cursor-pointer select-none"
3939
:class="{
4040
'inspected bg-green-500 text-white': isInspected,
41-
'hover:bg-blue-100 dark:hover:bg-blue-900 text-bluegray-800 dark:text-bluegray-200': !isInspected
41+
'hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-800 dark:text-gray-200': !isInspected
4242
}"
4343
@click="$emit('inspect')"
4444
@dblclick="$emit('select')"

0 commit comments

Comments
 (0)