Skip to content

Commit 8f5e50a

Browse files
wushuangswushuangs
authored
feat: Devbox adds dark theme (#4)
1 parent 3783c3b commit 8f5e50a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+440
-370
lines changed

‎packages/web/package-lock.json‎

Lines changed: 32 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/web/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"build": "quasar build"
1414
},
1515
"dependencies": {
16-
"@bytetrade/ui": "^0.0.75",
16+
"@bytetrade/ui": "^0.1.11",
1717
"@devbox/core": "../core",
1818
"@guolao/vue-monaco-editor": "^1.3.0",
1919
"@quasar/extras": "^1.16.4",

‎packages/web/quasar.config.js‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -42,22 +42,7 @@ module.exports = configure(function (ctx) {
4242
css: ["app.scss", ctx.dev ? "font.dev.scss" : "font.pro.scss"],
4343

4444
// https://github.com/quasarframework/quasar/tree/dev/extras
45-
extras: [
46-
// 'ionicons-v4',
47-
// 'mdi-v5',
48-
// 'fontawesome-v6',
49-
// 'eva-icons',
50-
// 'themify',
51-
// 'line-awesome',
52-
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
53-
// "roboto-font", // optional, you are not bound to it
54-
// "material-icons", // optional, you are not bound to it
55-
// "bootstrap-icons",
56-
// "themify",
57-
"material-icons",
58-
// "material-symbols-outlined",
59-
// "material-symbols-rounded",
60-
],
45+
extras: ["material-icons"],
6146

6247
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
6348
build: {

‎packages/web/src/components/ConfigComponent.vue‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="config-right-header row items-center justify-between">
44
<div class="row items-center justify-start">
55
<img class="q-mr-sm" src="../assets/icon-txt.svg" style="width: 12px" />
6-
<span>App Configuration</span>
6+
<span class="text-ink-1">App Configuration</span>
77
<span
88
class="statusIcon q-ml-sm"
99
:style="{
@@ -26,11 +26,11 @@
2626
v-model="tab"
2727
dense
2828
vertical
29-
class="text-grey-5"
29+
class="text-ink-2"
3030
active-class="my-menu-class"
3131
active-color="teal-8"
32-
indicator-color="white"
33-
active-bg-color="grey-1"
32+
indicator-color="transparent"
33+
active-bg-color="background-selected"
3434
no-caps
3535
>
3636
<q-tab
@@ -228,25 +228,28 @@ const __onSave = async () => {
228228
.my-menu-class {
229229
border-radius: 8px;
230230
}
231+
.q-tab-panels {
232+
background-color: $background-1;
233+
}
231234
</style>
232235

233236
<style lang="scss" scoped>
234237
.config-right {
235238
height: calc(100vh - 110px);
236239
flex: 1;
237240
border-radius: 12px;
238-
border: 1px solid var(--Grey-02-, #ebebeb);
241+
border: 1px solid $separator;
239242
overflow: hidden;
240-
background: var(--Grey-01-, #f6f6f6);
243+
background: $background-3;
241244
margin-top: 16px;
242245
243246
.config-right-header {
244247
width: 100%;
245248
height: 32px;
246249
line-height: 32px;
247250
padding: 0 12px;
248-
border-bottom: 1px solid var(--Grey-02-, #ebebeb);
249-
background: var(--Grey-01-, #f6f6f6);
251+
border-bottom: 1px solid $separator;
252+
background: $background-3;
250253
.statusIcon {
251254
width: 6px;
252255
height: 6px;
@@ -256,7 +259,7 @@ const __onSave = async () => {
256259
}
257260
.config-right-content {
258261
height: calc(100% - 56px);
259-
background: #ffffff;
262+
background: $background-2;
260263
margin: 12px;
261264
padding: 32px;
262265
border-radius: 8px;

‎packages/web/src/components/ContainerComponent.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="dev-container">
3-
<!-- <div class="text-h3 text-grey-10">Dev Container List</div> -->
3+
<!-- <div class="text-h3 text-ink-1">Dev Container List</div> -->
44
<div class="container" v-if="containers && containers.length > 0">
55
<container-card
66
v-for="(container, index) in containers"

‎packages/web/src/components/EditComponent.vue‎

Lines changed: 46 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
:key="node.key"
1717
v-slot:[`extra-${node.key}`]
1818
>
19-
<q-icon size="xs" name="sym_r_add_circle">
19+
<q-icon size="xs" name="sym_r_add_circle" color="ink-2">
2020
<PopupMenu
2121
:items="fileMenu"
2222
:path="node.path"
@@ -424,8 +424,8 @@ const deletefile = async (path: string) => {
424424
</script>
425425
<style lang="scss">
426426
.my-code-link {
427-
background: rgba(246, 246, 246, 1);
428-
color: rgba(50, 47, 45, 1);
427+
background: $background-hover;
428+
color: $ink-1;
429429
}
430430
::-webkit-scrollbar {
431431
width: 0px !important;
@@ -443,27 +443,64 @@ const deletefile = async (path: string) => {
443443
border-radius: 10px;
444444
background: rgba(57, 177, 255, 0.16);
445445
}
446+
.monaco-editor .margin {
447+
background-color: $background-2 !important;
448+
}
449+
450+
.lines-content.monaco-editor-background {
451+
background-color: $background-2 !important;
452+
}
453+
454+
.minimap.slider-mouseover {
455+
background-color: $background-2 !important;
456+
}
457+
.minimap-decorations-layer {
458+
background-color: $background-2 !important;
459+
}
460+
.decorationsOverviewRuler {
461+
width: 0px !important;
462+
}
463+
464+
.inputarea.monaco-mouse-cursor-text {
465+
background-color: $ink-1 !important;
466+
caret-color: red !important;
467+
}
468+
.monaco-editor .inputarea {
469+
background-color: $ink-1 !important;
470+
z-index: 1 !important;
471+
caret-color: red !important;
472+
}
473+
474+
.view-lines .view-line {
475+
span {
476+
color: $ink-1 !important;
477+
}
478+
.mtk1 {
479+
color: $ink-1 !important;
480+
}
481+
}
446482
</style>
447483
<style lang="scss" scoped>
448484
.files {
449485
height: calc(100vh - 112px);
450486
margin-top: 32px;
451487
.files-left {
452488
width: 240px;
489+
background-color: $background-1;
453490
}
454491
.files-right {
455492
flex: 1;
456493
border-radius: 12px;
457-
border: 1px solid var(--Grey-02-, #ebebeb);
494+
border: 1px solid $separator;
458495
overflow: hidden;
459-
background: var(--Grey-01-, #f6f6f6);
496+
background: $background-3;
460497
.files-right-header {
461498
width: 100%;
462499
height: 32px;
463500
line-height: 32px;
464501
padding: 0 12px;
465-
border-bottom: 1px solid var(--Grey-02-, #ebebeb);
466-
background: var(--Grey-01-, #f6f6f6);
502+
border-bottom: 1px solid $separator;
503+
background: $background-3;
467504
.statusIcon {
468505
width: 6px;
469506
height: 6px;
@@ -474,7 +511,8 @@ const deletefile = async (path: string) => {
474511
.files-right-content {
475512
height: calc(100% - 32px);
476513
padding: 12px;
477-
background: rgba(246, 246, 246, 1);
514+
background: $background-3;
515+
478516
.files-monaco {
479517
height: 100%;
480518
border-radius: 12px;

‎packages/web/src/components/common/ClientCard.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,23 @@
33
<div class="resources-left row items-center justify-start">
44
<img :src="dynamicImageSrc" />
55
<div>
6-
<div class="text-grey-10 text-subtitle3">{{ data.label }}</div>
7-
<div class="text-grey-5 text-overline">{{ data.url }}</div>
6+
<div class="text-ink-1 text-subtitle3">{{ data.label }}</div>
7+
<div class="text-ink-2 text-overline">{{ data.url }}</div>
88
</div>
99
</div>
10-
<div class="resources-right row items-center justify-end text-grey-8">
10+
<div class="resources-right row items-center justify-end">
1111
<q-icon
1212
class="cursor-pointer"
1313
name="sym_r_edit_square"
1414
size="16px"
15+
color="ink-2"
1516
@click="editClient"
1617
/>
1718
<q-icon
1819
class="cursor-pointer q-ml-md"
1920
name="sym_r_delete"
2021
size="16px"
22+
color="ink-2"
2123
@click="deleteClient"
2224
/>
2325
</div>
@@ -51,7 +53,7 @@ const dynamicImageSrc = computed(() => {
5153

5254
<style lang="scss" scoped>
5355
.resources-item {
54-
border: 1px solid rgba(235, 235, 235, 1);
56+
border: 1px solid $separator;
5557
border-radius: 8px;
5658
margin-top: 12px;
5759
padding: 14px 20px;

0 commit comments

Comments
 (0)