Add appearance option in settings

apps/api/src/app/user/update-user-setting.dto.ts

@@ -51,4 +51,8 @@ export class UpdateUserSettingDto {
   @IsIn(<ViewMode[]>['DEFAULT', 'ZEN'])
   @IsOptional()
   viewMode?: ViewMode;
+
+  @IsIn(<Appearance[]>['AUTO', 'DARK', 'LIGHT'])
+  @IsOptional()
+  appearance?: Appearance;
 }

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

apps/client/src/app/app.component.ts

@@ -100,12 +100,13 @@ export class AppComponent implements OnDestroy, OnInit {
     this.unsubscribeSubject.complete();
   }
 
-  private initializeTheme(userPreferredAppearance?: Appearance) {
+  private initializeTheme(userPreferredAppearance: Appearance = 'AUTO') {
-    const isDarkTheme = userPreferredAppearance
+    const setDarkTheme =
-      ? userPreferredAppearance === 'DARK'
+      userPreferredAppearance === 'DARK' ||
-      : window.matchMedia('(prefers-color-scheme: dark)').matches;
+      (userPreferredAppearance === 'AUTO' &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches);
 
-    this.materialCssVarsService.setDarkTheme(isDarkTheme);
+    this.materialCssVarsService.setDarkTheme(setDarkTheme);
 
     window.matchMedia('(prefers-color-scheme: dark)').addListener((event) => {
       if (!this.user?.settings.appearance) {

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

@@ -201,15 +201,13 @@
                   >
                     <mat-select
                       name="appearance"
-                      class="with-placeholder-as-option"
                       [disabled]="!hasPermissionToUpdateUserSettings"
-                      [placeholder]="appearancePlaceholder"
                       [value]="user.settings.appearance"
                       (selectionChange)="onChangeUserSetting('appearance', $event.value)"
                     >
-                      <mat-option i18n [value]="null">Auto</mat-option>
+                      <mat-option value="AUTO">AUTO</mat-option>
-                      <mat-option i18n value="LIGHT">Light</mat-option>
+                      <mat-option value="LIGHT">LIGHT</mat-option>
-                      <mat-option i18n value="DARK">Dark</mat-option>
+                      <mat-option value="DARK">DARK</mat-option>
                     </mat-select>
                   </mat-form-field>
                 </div>

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

@@ -11,4 +11,5 @@ export interface UserSettings {
   language?: string;
   locale?: string;
   viewMode?: ViewMode;
+  appearance?: Appearance;
 }

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

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

libs/common/src/lib/types/index.ts

@@ -23,5 +23,6 @@ export type {
   OrderWithAccount,
   RequestWithUser,
   ToggleOption,
-  ViewMode
+  ViewMode,
+  Appearance
 };

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

prisma/schema.prisma

@@ -215,6 +215,12 @@ enum ViewMode {
   ZEN
 }
 
+enum Appearance {
+  AUTO
+  LIGHT
+  DARK
+}
+
 enum Provider {
   ANONYMOUS
   GOOGLE