theming update

angular.json

@@ -31,7 +31,7 @@
               "src/config"
             ],
             "styles": [
-              "src/styles/main.theme.scss",
+              "angularlib/styles/main.theme.scss",
               "src/styles.scss"
             ],
             "scripts": []

src/app/app.component.html

@@ -10,7 +10,7 @@
 <style>
   
 </style>
-<mat-toolbar class="toolbar">
+<mat-toolbar class="toolbar" color="primary">
   <button mat-icon-button aria-label="menu">
     <mat-icon>menu</mat-icon>
   </button>
@@ -71,13 +71,25 @@
 
 <!--menus-->
 <mat-menu #userMenu="matMenu">
-  <button mat-menu-item [matMenuTriggerFor]="themes">{{'themes'|tr:'Themes'}}</button>
+  <button mat-menu-item [matMenuTriggerFor]="settings">{{'settings'|tr:'Settings'}}</button>
   <button mat-menu-item (click)="loginService.logout()" [disabled]="!loginService.user">
     <mat-icon>logout</mat-icon>
     {{'logout'|tr:'Logout'}}</button>
 </mat-menu>
 
+<mat-menu #settings="matMenu">
+  <button mat-menu-item [matMenuTriggerFor]="themes">{{'themes'|tr:'Themes'}}</button>
+</mat-menu>
+
 <mat-menu #themes="matMenu">
-  <button mat-menu-item (click)="changeTheme('theme')">{{'light'|tr:'Light'}}</button>
-  <button mat-menu-item (click)="changeTheme('dark-theme')">{{'dark'|tr:'Dark'}}</button>
+  <button mat-menu-item [matMenuTriggerFor]="lightThemes">{{'light'|tr:'Light'}}</button>
+  <button mat-menu-item [matMenuTriggerFor]="darkThemes">{{'dark'|tr:'Dark'}}</button>
+</mat-menu>
+
+<mat-menu #lightThemes="matMenu">
+  <button mat-menu-item (click)="changeTheme('theme')">{{'main'|tr:'Main'}}</button>
+</mat-menu>
+
+<mat-menu #darkThemes="matMenu">
+  <button mat-menu-item (click)="changeTheme('dark-theme')">{{'main'|tr:'Main'}}</button>
 </mat-menu>

src/app/dashboard/dashboard.component.html

@@ -1,4 +1,4 @@
-<main class="main">
+<main class="main" [ngClass]="cs.theme">
     <div class="content">
       <div class="left-side">
         <div>
@@ -72,7 +72,7 @@
               </linearGradient>
             </defs>
           </svg>
-          <h1 [ngClass]="cs.theme">Welcome</h1>
+          <h1>Welcome</h1>
         </div>
       </div>
       <div class="divider" role="separator" aria-label="Divider"></div>

src/app/dashboard/dashboard.component.scss

@@ -36,7 +36,6 @@
 
   h1 {
     font-size: 3.125rem;
-    color: var(--gray-900);
     font-weight: 500;
     line-height: 100%;
     letter-spacing: -0.125rem;

src/dependencies/angularlib

@@ -1 +1 @@
-Subproject commit e5f02f60e2e236e612c9867b03469ffd7d9b126e
+Subproject commit c946df75a201d640d39ba56162b94e4146a87850

src/styles/main.theme.scss

@@ -1,50 +0,0 @@
-@use '@angular/material' as mat;
-
-@include mat.core();
-
-$primary: mat.define-palette(mat.$indigo-palette, 500);
-$accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-
-$theme: mat.define-light-theme((
- color: (
-   primary: $primary,
-   accent: $accent,
- ),
- typography: mat.define-typography-config(),
- density: 0,
-));
-
-// Define a dark theme
-$dark-theme: mat.define-dark-theme((
- color: (
-   primary: mat.define-palette(mat.$pink-palette),
-   accent: mat.define-palette(mat.$blue-grey-palette),
- ),
-  // Only include `typography` and `density` in the default dark theme.
-  typography: mat.define-typography-config(),
-  density: 0,
-));
-
-@include mat.core-theme($dark-theme);
-@include mat.button-theme($dark-theme);
-@include mat.all-component-themes($dark-theme);
-
-
-@media (prefers-color-scheme: light) {
-    // Use the `-color` mixins to only apply color styles without reapplying the same
-    // typography and density styles.
-    @include mat.core-color($theme);
-    @include mat.button-color($theme);
-}
-
-.theme {
-    @include mat.core-theme($theme);
-    @include mat.button-theme($theme);
-    @include mat.all-component-themes($theme);
-}
-
-.dark-theme {
-    @include mat.core-theme($dark-theme);
-    @include mat.button-theme($dark-theme);
-    @include mat.all-component-themes($dark-theme);
-}