From f07e37de4a2293e05ab77f3db090389171ee3c3f Mon Sep 17 00:00:00 2001 From: yksolanki9 Date: Sun, 9 Oct 2022 19:53:12 +0530 Subject: [PATCH] Add appearance option in settings --- .../src/app/user/update-user-setting.dto.ts | 6 ++++- apps/api/src/app/user/user.service.ts | 5 ++++ apps/client/src/app/app.component.ts | 14 +++++++---- .../src/app/pages/account/account-page.html | 24 ++++++++++++++++++- .../lib/interfaces/user-settings.interface.ts | 3 ++- libs/common/src/lib/types/appearance.type.ts | 1 + libs/common/src/lib/types/index.ts | 4 +++- .../migration.sql | 5 ++++ prisma/schema.prisma | 6 +++++ 9 files changed, 60 insertions(+), 8 deletions(-) create mode 100644 libs/common/src/lib/types/appearance.type.ts create mode 100644 prisma/migrations/20221009120121_added_appearance_column_to_settings_table/migration.sql diff --git a/apps/api/src/app/user/update-user-setting.dto.ts b/apps/api/src/app/user/update-user-setting.dto.ts index ea2e784ab..a237a77dc 100644 --- a/apps/api/src/app/user/update-user-setting.dto.ts +++ b/apps/api/src/app/user/update-user-setting.dto.ts @@ -1,4 +1,4 @@ -import type { DateRange, ViewMode } from '@ghostfolio/common/types'; +import type { Appearance, DateRange, ViewMode } from '@ghostfolio/common/types'; import { IsBoolean, IsIn, @@ -47,4 +47,8 @@ export class UpdateUserSettingDto { @IsIn(['DEFAULT', 'ZEN']) @IsOptional() viewMode?: ViewMode; + + @IsIn(['AUTO', 'DARK', 'LIGHT']) + @IsOptional() + appearance?: Appearance; } diff --git a/apps/api/src/app/user/user.service.ts b/apps/api/src/app/user/user.service.ts index 13f82aa47..7cba3467f 100644 --- a/apps/api/src/app/user/user.service.ts +++ b/apps/api/src/app/user/user.service.ts @@ -154,6 +154,11 @@ export class UserService { (user.Settings.settings as UserSettings).viewMode = 'DEFAULT'; } + // Set default appearance value to AUTO + if (!(user.Settings.settings as UserSettings).appearance) { + (user.Settings.settings as UserSettings).appearance = 'AUTO'; + } + if (this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) { user.subscription = this.subscriptionService.getSubscription(Subscription); diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts index 7f6774f52..01765aea5 100644 --- a/apps/client/src/app/app.component.ts +++ b/apps/client/src/app/app.component.ts @@ -13,6 +13,7 @@ import { } from '@ghostfolio/common/config'; import { InfoItem, User } from '@ghostfolio/common/interfaces'; import { hasPermission, permissions } from '@ghostfolio/common/permissions'; +import { Appearance } from '@ghostfolio/common/types'; import { MaterialCssVarsService } from 'angular-material-css-vars'; import { DeviceDetectorService } from 'ngx-device-detector'; import { Subject } from 'rxjs'; @@ -77,6 +78,8 @@ export class AppComponent implements OnDestroy, OnInit { permissions.createUserAccount ); + this.initializeTheme(this.user?.settings.appearance); + this.changeDetectorRef.markForCheck(); }); } @@ -97,10 +100,13 @@ export class AppComponent implements OnDestroy, OnInit { this.unsubscribeSubject.complete(); } - private initializeTheme() { - this.materialCssVarsService.setDarkTheme( - window.matchMedia('(prefers-color-scheme: dark)').matches - ); + private initializeTheme(userPreferredAppearance: Appearance = 'AUTO') { + const setDarkTheme = + userPreferredAppearance === 'DARK' || + (userPreferredAppearance === 'AUTO' && + window.matchMedia('(prefers-color-scheme: dark)').matches); + + this.materialCssVarsService.setDarkTheme(setDarkTheme); window.matchMedia('(prefers-color-scheme: dark)').addListener((event) => { this.materialCssVarsService.setDarkTheme(event.matches); diff --git a/apps/client/src/app/pages/account/account-page.html b/apps/client/src/app/pages/account/account-page.html index e3c446f57..249aa534f 100644 --- a/apps/client/src/app/pages/account/account-page.html +++ b/apps/client/src/app/pages/account/account-page.html @@ -167,7 +167,7 @@ -
+
View Mode
@@ -190,6 +190,28 @@
+
+
+ Appearance +
+
+ + + AUTO + LIGHT + DARK + + +
+
diff --git a/libs/common/src/lib/interfaces/user-settings.interface.ts b/libs/common/src/lib/interfaces/user-settings.interface.ts index 1237696a4..1dc01a47d 100644 --- a/libs/common/src/lib/interfaces/user-settings.interface.ts +++ b/libs/common/src/lib/interfaces/user-settings.interface.ts @@ -1,4 +1,4 @@ -import { DateRange, ViewMode } from '@ghostfolio/common/types'; +import { DateRange, ViewMode, Appearance } from '@ghostfolio/common/types'; export interface UserSettings { baseCurrency?: string; @@ -10,4 +10,5 @@ export interface UserSettings { language?: string; locale?: string; viewMode?: ViewMode; + appearance?: Appearance; } diff --git a/libs/common/src/lib/types/appearance.type.ts b/libs/common/src/lib/types/appearance.type.ts new file mode 100644 index 000000000..b549dbc0a --- /dev/null +++ b/libs/common/src/lib/types/appearance.type.ts @@ -0,0 +1 @@ +export type Appearance = 'AUTO' | 'LIGHT' | 'DARK'; diff --git a/libs/common/src/lib/types/index.ts b/libs/common/src/lib/types/index.ts index 54ef29ef4..7e7559459 100644 --- a/libs/common/src/lib/types/index.ts +++ b/libs/common/src/lib/types/index.ts @@ -9,6 +9,7 @@ import type { OrderWithAccount } from './order-with-account.type'; import type { RequestWithUser } from './request-with-user.type'; import { ToggleOption } from './toggle-option.type'; import type { ViewMode } from './view-mode.type'; +import type { Appearance } from './appearance.type'; export type { AccessWithGranteeUser, @@ -21,5 +22,6 @@ export type { OrderWithAccount, RequestWithUser, ToggleOption, - ViewMode + ViewMode, + Appearance }; diff --git a/prisma/migrations/20221009120121_added_appearance_column_to_settings_table/migration.sql b/prisma/migrations/20221009120121_added_appearance_column_to_settings_table/migration.sql new file mode 100644 index 000000000..660a00661 --- /dev/null +++ b/prisma/migrations/20221009120121_added_appearance_column_to_settings_table/migration.sql @@ -0,0 +1,5 @@ +-- CreateEnum +CREATE TYPE "Appearance" AS ENUM ('AUTO', 'LIGHT', 'DARK'); + +-- Update Settings table +ALTER TABLE "Settings" ADD COLUMN "appearance" "Appearance"; \ No newline at end of file diff --git a/prisma/schema.prisma b/prisma/schema.prisma index 11bef3e47..5fa485a1a 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -215,6 +215,12 @@ enum ViewMode { ZEN } +enum Appearance { + AUTO + LIGHT + DARK +} + enum Provider { ANONYMOUS GOOGLE