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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy