Add appearance option in settings (#1342)

* Add appearance option in settings

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(<ViewMode[]>['DEFAULT', 'ZEN'])
   @IsOptional()
   viewMode?: ViewMode;
+
+  @IsIn(<Appearance[]>['DARK', 'LIGHT'])
+  @IsOptional()
+  appearance?: Appearance;
 }

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,12 @@ 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) {
+    const isDarkTheme = userPreferredAppearance
+      ? userPreferredAppearance === 'DARK'
+      : window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    this.materialCssVarsService.setDarkTheme(isDarkTheme);
 
     window.matchMedia('(prefers-color-scheme: dark)').addListener((event) => {
       this.materialCssVarsService.setDarkTheme(event.matches);

apps/client/src/app/pages/account/account-page.html

@@ -167,7 +167,7 @@
                   </mat-form-field>
                 </div>
               </div>
-              <div class="d-flex">
+              <div class="d-flex mb-2">
                 <div class="align-items-center d-flex pr-1 pt-1 w-50">
                   <ng-container i18n>View Mode</ng-container>
                 </div>
@@ -190,6 +190,30 @@
                   </div>
                 </div>
               </div>
+              <div class="d-flex">
+                <div class="align-items-center d-flex pr-1 pt-1 w-50">
+                  <ng-container i18n>Appearance</ng-container>
+                </div>
+                <div class="pl-1 w-50">
+                  <mat-form-field
+                    appearance="outline"
+                    class="compact-with-outline w-100 without-hint"
+                  >
+                    <mat-select
+                      name="appearance"
+                      [disabled]="!hasPermissionToUpdateUserSettings"
+                      [value]="user.settings.appearance"
+                      (selectionChange)="onChangeUserSetting('appearance', $event.value)"
+                      placeholder="AUTO"
+                      class="with-placeholder-as-option"
+                    >
+                      <mat-option [value]="null">AUTO</mat-option>
+                      <mat-option value="LIGHT">LIGHT</mat-option>
+                      <mat-option value="DARK">DARK</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                </div>
+              </div>
             </form>
           </div>
           <div class="align-items-center d-flex mt-4 py-1">

apps/client/src/styles.scss

@@ -97,6 +97,12 @@ body {
         color: rgba(var(--light-primary-text));
       }
     }
+
+    .with-placeholder-as-option {
+      .mat-select-placeholder {
+        color: rgba(var(--light-primary-text));
+      }
+    }
   }
 }
 
@@ -228,3 +234,9 @@ ngx-skeleton-loader {
 .with-info-message {
   height: calc(100vh - 5rem - 3.5rem) !important;
 }
+
+.with-placeholder-as-option {
+  .mat-select-placeholder {
+    color: rgba(var(--dark-primary-text));
+  }
+}

libs/common/src/lib/interfaces/user-settings.interface.ts

@@ -1,6 +1,7 @@
-import { DateRange, ViewMode } from '@ghostfolio/common/types';
+import { DateRange, ViewMode, Appearance } from '@ghostfolio/common/types';
 
 export interface UserSettings {
+  appearance?: Appearance;
   baseCurrency?: string;
   benchmark?: string;
   dateRange?: DateRange;

libs/common/src/lib/types/appearance.type.ts

@@ -0,0 +1 @@
+export type Appearance = 'LIGHT' | 'DARK';

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
 };