From 20e2444307c731c96409a0292f9f06cd85f487b4 Mon Sep 17 00:00:00 2001 From: MaysWind Date: Sun, 31 Aug 2025 00:20:17 +0800 Subject: [PATCH] modify color and background image in desktop version --- public/img/desktop/background-dark.svg | 12 +- public/img/desktop/background.svg | 139 +++-- public/img/desktop/people1-dark.svg | 179 ++++++ public/img/desktop/people1.svg | 541 +++++------------- public/img/desktop/people2-dark.svg | 87 +++ public/img/desktop/people2.svg | 322 ++--------- public/img/desktop/people3-dark.svg | 101 ++++ public/img/desktop/people3.svg | 330 +++-------- public/img/desktop/people4-dark.svg | 119 ++++ public/img/desktop/people4.svg | 361 +++--------- src/desktop-main.ts | 14 +- src/styles/desktop/global.scss | 31 + src/views/desktop/ForgetPasswordPage.vue | 5 +- src/views/desktop/HomePage.vue | 2 +- src/views/desktop/LoginPage.vue | 5 +- src/views/desktop/ResetPasswordPage.vue | 5 +- src/views/desktop/SignupPage.vue | 5 +- src/views/desktop/UnlockPage.vue | 5 +- src/views/desktop/VerifyEmailPage.vue | 5 +- .../cards/IncomeExpenseOverviewCard.vue | 2 +- .../transactions/import/ImportDialog.vue | 2 +- .../tabs/UserDataManagementSettingTab.vue | 2 +- 22 files changed, 996 insertions(+), 1278 deletions(-) create mode 100644 public/img/desktop/people1-dark.svg create mode 100644 public/img/desktop/people2-dark.svg create mode 100644 public/img/desktop/people3-dark.svg create mode 100644 public/img/desktop/people4-dark.svg diff --git a/public/img/desktop/background-dark.svg b/public/img/desktop/background-dark.svg index 051b728b..e877e59b 100644 --- a/public/img/desktop/background-dark.svg +++ b/public/img/desktop/background-dark.svg @@ -1,8 +1,6 @@ - - - - Layer 1 - - - + + + + + \ No newline at end of file diff --git a/public/img/desktop/background.svg b/public/img/desktop/background.svg index e608c80c..636ce187 100644 --- a/public/img/desktop/background.svg +++ b/public/img/desktop/background.svg @@ -1,73 +1,72 @@ - - - - Layer 1 + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - \ No newline at end of file diff --git a/public/img/desktop/people1-dark.svg b/public/img/desktop/people1-dark.svg new file mode 100644 index 00000000..6ab5d11a --- /dev/null +++ b/public/img/desktop/people1-dark.svg @@ -0,0 +1,179 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/img/desktop/people1.svg b/public/img/desktop/people1.svg index d4d5d509..dccc8778 100644 --- a/public/img/desktop/people1.svg +++ b/public/img/desktop/people1.svg @@ -1,406 +1,179 @@ - - - - Layer 1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + - - - - + + + + + + + + + - - - + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + + + + + + + - - - - - - - + + + - - + + - - + + - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - + + + + - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/public/img/desktop/people2-dark.svg b/public/img/desktop/people2-dark.svg new file mode 100644 index 00000000..1b7d765b --- /dev/null +++ b/public/img/desktop/people2-dark.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/img/desktop/people2.svg b/public/img/desktop/people2.svg index 015eb312..dafec347 100644 --- a/public/img/desktop/people2.svg +++ b/public/img/desktop/people2.svg @@ -1,94 +1,24 @@ - - - - Layer 1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + - - - - - + + + + + - - - - - + + + + + - - + + @@ -97,191 +27,61 @@ - - + + - - - - - - + + + + + + - - + + - - - - - - + + + + + + - - - - + + + + + + + + + + - - - + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/public/img/desktop/people3-dark.svg b/public/img/desktop/people3-dark.svg new file mode 100644 index 00000000..1efaf485 --- /dev/null +++ b/public/img/desktop/people3-dark.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/img/desktop/people3.svg b/public/img/desktop/people3.svg index 482999f6..cb686de0 100644 --- a/public/img/desktop/people3.svg +++ b/public/img/desktop/people3.svg @@ -1,200 +1,79 @@ - - - - Layer 1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + - - - - - + + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + + - - - - - - - - + + - - + + - - + + - - + + - - - - - + + + + + + - - - - - + + + + + + + + + - - - - - - - + + - - - - + + + + - - + + @@ -202,96 +81,21 @@ - - - - - - + + + + + + - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/public/img/desktop/people4-dark.svg b/public/img/desktop/people4-dark.svg new file mode 100644 index 00000000..1ae75712 --- /dev/null +++ b/public/img/desktop/people4-dark.svg @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/img/desktop/people4.svg b/public/img/desktop/people4.svg index 52198634..d4b9eeae 100644 --- a/public/img/desktop/people4.svg +++ b/public/img/desktop/people4.svg @@ -1,302 +1,119 @@ - - - - Layer 1 - - - - - + + + + - - - - - - - - + + + + + + + + - - - - - - - + + + + + + + + + - + - - - - - - - - - + + + + + + + + + + + + + + + - - - - - - - - - - + + - - - - - - - - + + + + + + + + + - - - - - - - - - + + + - - - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - + + + + + + - - + + - - + + - - - - - - - - - - - - + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/desktop-main.ts b/src/desktop-main.ts index f99a7c87..7b3c3548 100644 --- a/src/desktop-main.ts +++ b/src/desktop-main.ts @@ -299,8 +299,8 @@ const vuetify = createVuetify({ 'primary': '#c67e48', 'primary-darken-1': '#b67443', 'on-primary': '#ffffff', - 'secondary': '#8a8d93', - 'secondary-darken-1': '#545659', + 'secondary': '#8c8c8c', + 'secondary-darken-1': '#595754', 'on-secondary': '#ffffff', 'success': '#4cd964', 'success-darken-1': '#40b654', @@ -321,6 +321,7 @@ const vuetify = createVuetify({ 'on-surface': '#413935', 'notification-background': '#ffffff', 'on-notification-background': '#000', + 'grey': '#8c8c8c', 'grey-50': '#fafafa', 'grey-100': '#f0f2f8', 'grey-200': '#eeeeee', @@ -331,7 +332,7 @@ const vuetify = createVuetify({ 'grey-700': '#616161', 'grey-800': '#424242', 'grey-900': '#212121', - 'perfect-scrollbar-thumb': '#dbdade', + 'perfect-scrollbar-thumb': '#dedcda', 'skin-bordered-background': '#fff', 'skin-bordered-surface': '#fff', 'expansion-panel-text-custom-bg': '#fafafa' @@ -340,6 +341,7 @@ const vuetify = createVuetify({ 'code-color': '#ff8000', 'overlay-scrim-background': '#413935', 'tooltip-background': '#212121', + 'tooltip-color': '#ffffff', 'overlay-scrim-opacity': 0.5, 'hover-opacity': 0.04, 'focus-opacity': 0.1, @@ -369,7 +371,7 @@ const vuetify = createVuetify({ 'primary': '#c67e48', 'primary-darken-1': '#b67443', 'on-primary': '#ffffff', - 'secondary': '#4d4c4b', + 'secondary': '#9d9b99', 'secondary-darken-1': '#3e3d3c', 'on-secondary': '#fff', 'success': '#4cd964', @@ -391,6 +393,7 @@ const vuetify = createVuetify({ 'on-surface': '#fcf0e3', 'notification-background': '#1e1e1e', 'on-notification-background': '#fff', + 'grey': '#4d4c4b', 'grey-50': '#212121', 'grey-100': '#424242', 'grey-200': '#616161', @@ -409,7 +412,8 @@ const vuetify = createVuetify({ variables: { 'code-color': '#ff8000', 'overlay-scrim-background': '#1a1a1a', - 'tooltip-background': '#d7d7d7', + 'tooltip-background': '#333333', + 'tooltip-color': '#eeeeee', 'overlay-scrim-opacity': 0.6, 'hover-opacity': 0.04, 'focus-opacity': 0.1, diff --git a/src/styles/desktop/global.scss b/src/styles/desktop/global.scss index 54b779ec..adf26cb6 100644 --- a/src/styles/desktop/global.scss +++ b/src/styles/desktop/global.scss @@ -103,6 +103,12 @@ input[type=number] { min-block-size: calc(var(--vh, 1vh) * 100); } +.v-theme--dark { + .auth-image-background { + background-color: #202122; + } +} + .auth-card { background-color: rgb(var(--v-theme-surface)); } @@ -253,6 +259,15 @@ html[dir="rtl"] .bidirectional-switch { } } +.v-theme--dark { + .v-btn--variant-elevated, + .v-btn--variant-flat { + &.v-btn--disabled .v-btn__overlay { + opacity: 0.35; + } + } +} + .v-btn { .v-btn__prepend, .v-btn__append { @@ -348,6 +363,22 @@ html[dir="rtl"] .v-img.img-with-direction > img { color: rgba(var(--v-theme-income), var(--v-medium-emphasis-opacity)) !important; } +.v-tooltip { + .v-overlay__content { + color: rgb(var(--v-tooltip-color)); + } +} + +.v-snackbar { + .v-snackbar__content { + color: rgb(var(--v-tooltip-color)); + } + + .bg-notification-background .v-snackbar__content { + color: rgb(var(--v-theme-on-notification-background)) !important; + } +} + .v-switch.v-switch--inset { .v-switch__track { min-width: 1.875rem !important; diff --git a/src/views/desktop/ForgetPasswordPage.vue b/src/views/desktop/ForgetPasswordPage.vue index 47a0f9dc..91e2afe8 100644 --- a/src/views/desktop/ForgetPasswordPage.vue +++ b/src/views/desktop/ForgetPasswordPage.vue @@ -7,7 +7,7 @@ - +
@@ -15,7 +15,8 @@
- + +
diff --git a/src/views/desktop/HomePage.vue b/src/views/desktop/HomePage.vue index a4f2fee6..ab704387 100644 --- a/src/views/desktop/HomePage.vue +++ b/src/views/desktop/HomePage.vue @@ -59,7 +59,7 @@
- +
diff --git a/src/views/desktop/LoginPage.vue b/src/views/desktop/LoginPage.vue index 3fe37954..27c48f2d 100644 --- a/src/views/desktop/LoginPage.vue +++ b/src/views/desktop/LoginPage.vue @@ -7,7 +7,7 @@
- +
@@ -15,7 +15,8 @@
- + +
diff --git a/src/views/desktop/ResetPasswordPage.vue b/src/views/desktop/ResetPasswordPage.vue index 9b38991a..50e7b426 100644 --- a/src/views/desktop/ResetPasswordPage.vue +++ b/src/views/desktop/ResetPasswordPage.vue @@ -7,7 +7,7 @@ - +
@@ -15,7 +15,8 @@
- + +
diff --git a/src/views/desktop/SignupPage.vue b/src/views/desktop/SignupPage.vue index 7c1c4554..1d53cd50 100644 --- a/src/views/desktop/SignupPage.vue +++ b/src/views/desktop/SignupPage.vue @@ -7,7 +7,7 @@ - +
@@ -15,7 +15,8 @@
- + +
diff --git a/src/views/desktop/UnlockPage.vue b/src/views/desktop/UnlockPage.vue index eb1f686e..889805a2 100644 --- a/src/views/desktop/UnlockPage.vue +++ b/src/views/desktop/UnlockPage.vue @@ -7,7 +7,7 @@ - +
@@ -15,7 +15,8 @@
- + +
diff --git a/src/views/desktop/VerifyEmailPage.vue b/src/views/desktop/VerifyEmailPage.vue index 7746ad40..5c141e4d 100644 --- a/src/views/desktop/VerifyEmailPage.vue +++ b/src/views/desktop/VerifyEmailPage.vue @@ -7,7 +7,7 @@ - +
@@ -15,7 +15,8 @@
- + +
diff --git a/src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue b/src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue index 1529f484..2993d436 100644 --- a/src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue +++ b/src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue @@ -1,7 +1,7 @@