feat: Devbox adds dark theme (#4)

beclab · Jun 18, 2024 · 8f5e50a · 8f5e50a
1 parent 3783c3b
commit 8f5e50a
Show file tree

Hide file tree

Showing 44 changed files with 440 additions and 370 deletions.
diff --git a/packages/web/package-lock.json b/packages/web/package-lock.json
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -13,7 +13,7 @@
 		"build": "quasar build"
 	},
 	"dependencies": {
-		"@bytetrade/ui": "^0.0.75",
+		"@bytetrade/ui": "^0.1.11",
 		"@devbox/core": "../core",
 		"@guolao/vue-monaco-editor": "^1.3.0",
 		"@quasar/extras": "^1.16.4",

diff --git a/packages/web/quasar.config.js b/packages/web/quasar.config.js
@@ -42,22 +42,7 @@ module.exports = configure(function (ctx) {
 		css: ["app.scss", ctx.dev ? "font.dev.scss" : "font.pro.scss"],
 
 		// https://github.com/quasarframework/quasar/tree/dev/extras
-		extras: [
-			// 'ionicons-v4',
-			// 'mdi-v5',
-			// 'fontawesome-v6',
-			// 'eva-icons',
-			// 'themify',
-			// 'line-awesome',
-			// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
-			// "roboto-font", // optional, you are not bound to it
-			// "material-icons", // optional, you are not bound to it
-			// "bootstrap-icons",
-			// "themify",
-			"material-icons",
-			// "material-symbols-outlined",
-			// "material-symbols-rounded",
-		],
+		extras: ["material-icons"],
 
 		// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
 		build: {

diff --git a/packages/web/src/components/ConfigComponent.vue b/packages/web/src/components/ConfigComponent.vue
@@ -3,7 +3,7 @@
 		<div class="config-right-header row items-center justify-between">
 			<div class="row items-center justify-start">
 				<img class="q-mr-sm" src="../assets/icon-txt.svg" style="width: 12px" />
-				<span>App Configuration</span>
+				<span class="text-ink-1">App Configuration</span>
 				<span
 					class="statusIcon q-ml-sm"
 					:style="{
@@ -26,11 +26,11 @@
 					v-model="tab"
 					dense
 					vertical
-					class="text-grey-5"
+					class="text-ink-2"
 					active-class="my-menu-class"
 					active-color="teal-8"
-					indicator-color="white"
-					active-bg-color="grey-1"
+					indicator-color="transparent"
+					active-bg-color="background-selected"
 					no-caps
 				>
 					<q-tab
@@ -228,25 +228,28 @@ const __onSave = async () => {
 .my-menu-class {
 	border-radius: 8px;
 }
+.q-tab-panels {
+	background-color: $background-1;
+}
 </style>
 
 <style lang="scss" scoped>
 .config-right {
 	height: calc(100vh - 110px);
 	flex: 1;
 	border-radius: 12px;
-	border: 1px solid var(--Grey-02-, #ebebeb);
+	border: 1px solid $separator;
 	overflow: hidden;
-	background: var(--Grey-01-, #f6f6f6);
+	background: $background-3;
 	margin-top: 16px;
 
 	.config-right-header {
 		width: 100%;
 		height: 32px;
 		line-height: 32px;
 		padding: 0 12px;
-		border-bottom: 1px solid var(--Grey-02-, #ebebeb);
-		background: var(--Grey-01-, #f6f6f6);
+		border-bottom: 1px solid $separator;
+		background: $background-3;
 		.statusIcon {
 			width: 6px;
 			height: 6px;
@@ -256,7 +259,7 @@ const __onSave = async () => {
 	}
 	.config-right-content {
 		height: calc(100% - 56px);
-		background: #ffffff;
+		background: $background-2;
 		margin: 12px;
 		padding: 32px;
 		border-radius: 8px;

diff --git a/packages/web/src/components/ContainerComponent.vue b/packages/web/src/components/ContainerComponent.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="dev-container">
-		<!-- <div class="text-h3 text-grey-10">Dev Container List</div> -->
+		<!-- <div class="text-h3 text-ink-1">Dev Container List</div> -->
 		<div class="container" v-if="containers && containers.length > 0">
 			<container-card
 				v-for="(container, index) in containers"

diff --git a/packages/web/src/components/EditComponent.vue b/packages/web/src/components/EditComponent.vue
@@ -16,7 +16,7 @@
 					:key="node.key"
 					v-slot:[`extra-${node.key}`]
 				>
-					<q-icon size="xs" name="sym_r_add_circle">
+					<q-icon size="xs" name="sym_r_add_circle" color="ink-2">
 						<PopupMenu
 							:items="fileMenu"
 							:path="node.path"
@@ -424,8 +424,8 @@ const deletefile = async (path: string) => {
 </script>
 <style lang="scss">
 .my-code-link {
-	background: rgba(246, 246, 246, 1);
-	color: rgba(50, 47, 45, 1);
+	background: $background-hover;
+	color: $ink-1;
 }
 ::-webkit-scrollbar {
 	width: 0px !important;
@@ -443,27 +443,64 @@ const deletefile = async (path: string) => {
 	border-radius: 10px;
 	background: rgba(57, 177, 255, 0.16);
 }
+.monaco-editor .margin {
+	background-color: $background-2 !important;
+}
+
+.lines-content.monaco-editor-background {
+	background-color: $background-2 !important;
+}
+
+.minimap.slider-mouseover {
+	background-color: $background-2 !important;
+}
+.minimap-decorations-layer {
+	background-color: $background-2 !important;
+}
+.decorationsOverviewRuler {
+	width: 0px !important;
+}
+
+.inputarea.monaco-mouse-cursor-text {
+	background-color: $ink-1 !important;
+	caret-color: red !important;
+}
+.monaco-editor .inputarea {
+	background-color: $ink-1 !important;
+	z-index: 1 !important;
+	caret-color: red !important;
+}
+
+.view-lines .view-line {
+	span {
+		color: $ink-1 !important;
+	}
+	.mtk1 {
+		color: $ink-1 !important;
+	}
+}
 </style>
 <style lang="scss" scoped>
 .files {
 	height: calc(100vh - 112px);
 	margin-top: 32px;
 	.files-left {
 		width: 240px;
+		background-color: $background-1;
 	}
 	.files-right {
 		flex: 1;
 		border-radius: 12px;
-		border: 1px solid var(--Grey-02-, #ebebeb);
+		border: 1px solid $separator;
 		overflow: hidden;
-		background: var(--Grey-01-, #f6f6f6);
+		background: $background-3;
 		.files-right-header {
 			width: 100%;
 			height: 32px;
 			line-height: 32px;
 			padding: 0 12px;
-			border-bottom: 1px solid var(--Grey-02-, #ebebeb);
-			background: var(--Grey-01-, #f6f6f6);
+			border-bottom: 1px solid $separator;
+			background: $background-3;
 			.statusIcon {
 				width: 6px;
 				height: 6px;
@@ -474,7 +511,8 @@ const deletefile = async (path: string) => {
 		.files-right-content {
 			height: calc(100% - 32px);
 			padding: 12px;
-			background: rgba(246, 246, 246, 1);
+			background: $background-3;
+
 			.files-monaco {
 				height: 100%;
 				border-radius: 12px;

diff --git a/packages/web/src/components/common/ClientCard.vue b/packages/web/src/components/common/ClientCard.vue
@@ -3,21 +3,23 @@
 		<div class="resources-left row items-center justify-start">
 			<img :src="dynamicImageSrc" />
 			<div>
-				<div class="text-grey-10 text-subtitle3">{{ data.label }}</div>
-				<div class="text-grey-5 text-overline">{{ data.url }}</div>
+				<div class="text-ink-1 text-subtitle3">{{ data.label }}</div>
+				<div class="text-ink-2 text-overline">{{ data.url }}</div>
 			</div>
 		</div>
-		<div class="resources-right row items-center justify-end text-grey-8">
+		<div class="resources-right row items-center justify-end">
 			<q-icon
 				class="cursor-pointer"
 				name="sym_r_edit_square"
 				size="16px"
+				color="ink-2"
 				@click="editClient"
 			/>
 			<q-icon
 				class="cursor-pointer q-ml-md"
 				name="sym_r_delete"
 				size="16px"
+				color="ink-2"
 				@click="deleteClient"
 			/>
 		</div>
@@ -51,7 +53,7 @@ const dynamicImageSrc = computed(() => {
 
 <style lang="scss" scoped>
 .resources-item {
-	border: 1px solid rgba(235, 235, 235, 1);
+	border: 1px solid $separator;
 	border-radius: 8px;
 	margin-top: 12px;
 	padding: 14px 20px;