Toolbar with prebuilt color palettes

angular.json

@@ -209,5 +209,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "d3847458-0bc6-4b22-bdfc-7f8c232811f8"
   }
 }

projects/auto-crud/src/app/app.component.ts

@@ -1,16 +1,16 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { ToolbarComponent } from './layouts/components/toolbar/toolbar.component';
 
 @Component({
-  selector: 'ac-root',
-  imports: [RouterOutlet],
-  template: `
-    <h1>Welcome to {{title}}!</h1>
-
-    <router-outlet />
-  `,
-  styles: [],
+    selector: 'ac-root',
+    imports: [RouterOutlet, ToolbarComponent],
+    template: `
+        <ac-toolbar />
+        <router-outlet />
+    `,
+    styles: [],
 })
 export class AppComponent {
-  title = 'auto-crud';
+    title = 'auto-crud';
 }

projects/auto-crud/src/app/layouts/components/toolbar/toolbar.component.html

@@ -0,0 +1,40 @@
+<mat-toolbar>
+    <h1 class="font-bold">Auto Crud</h1>
+    <div class="flex-1"></div>
+
+    <button mat-icon-button [matMenuTriggerFor]="themeMenu">
+      <mat-icon>format_color_fill</mat-icon>
+    </button>
+
+    <mat-menu #themeMenu="matMenu">
+      <ng-container *ngFor="let theme of themes">
+        <button mat-menu-item (click)="changeTheme(theme.class)">
+          <mat-icon>{{ theme.icon }}</mat-icon>
+            {{theme.label}}
+        </button>
+      </ng-container>
+    </mat-menu>
+
+    <button mat-icon-button [matMenuTriggerFor]="languageMenu">
+      <mat-icon>language</mat-icon>
+    </button>
+
+    <mat-menu #languageMenu="matMenu">
+      <ng-container *ngFor="let language of languages">
+        <button mat-menu-item>
+            {{ language }}
+        </button>
+      </ng-container>
+    </mat-menu>
+
+    <button mat-icon-button [matMenuTriggerFor]="profileMenu">
+      <mat-icon>person</mat-icon>
+    </button>
+
+    <mat-menu #profileMenu="matMenu">
+      <ng-container *ngFor="let role of roles">
+        <button mat-menu-item>{{ role }}</button>
+      </ng-container>
+    </mat-menu>
+  </mat-toolbar>
+

projects/auto-crud/src/app/layouts/components/toolbar/toolbar.component.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { NgFor} from '@angular/common';
+
+@Component({
+  selector: 'ac-toolbar',
+  imports: [MatToolbarModule, MatButtonModule, MatIconModule, MatMenuModule, NgFor],
+  templateUrl: './toolbar.component.html',
+})
+export class ToolbarComponent {
+    themes = [
+        { label: 'Default', icon: 'restore', class: 'default-theme' },
+        { label: 'Light', icon: 'wb_sunny', class: 'light-mode' },
+        { label: 'Dark', icon: 'nights_stay', class: 'dark-mode' },
+        { label: 'magenta', icon: 'palette', class: 'magenta-theme' },
+        { label: 'yellow', icon: 'palette', class: 'yellow-theme' },
+        { label: 'orange', icon: 'palette', class: 'orange-theme' },
+        { label: 'cyan', icon: 'palette', class: 'cyan-theme' }
+      ];
+
+  languages = ['Français (Fr)', 'Arabic (Ar)','English (En)', 'Español (Sp)'];
+
+  roles = ['Admin', 'Customer'];
+
+  changeTheme(themeClass: string) {
+    document.body.classList.remove(...this.themes.map(t => t.class));
+    document.body.classList.add(themeClass);
+  }
+}

projects/auto-crud/src/styles.scss

@@ -1,17 +1,35 @@
-/* You can add global styles to this file, and also import other style files */
 @use '@angular/material' as mat;
-
+@tailwind base;
+@tailwind utilities;
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 
+body.light-mode {
+  background-color: #eeedf3;
+}
+
 
-html {
-  color-scheme: light dark;
-  @include mat.theme((
-    color: mat.$violet-palette,
-    typography: Roboto,
-    density: 0
-  ));
+body.dark-mode {
+  background-color: #2b2a42;
 }
 
+$palettes: (
+    "azure": mat.$azure-palette,
+    "yellow": mat.$yellow-palette,
+    "cyan": mat.$cyan-palette,
+    "magenta": mat.$magenta-palette,
+    "orange": mat.$orange-palette,
+    "spring-green": mat.$spring-green-palette,
+    "rose": mat.$rose-palette
+);
+
 
+@each $fbpalette, $matpalette in $palettes {
+    .#{$fbpalette}-theme {
+        // color-scheme: light dark;
+        @include mat.theme((color: $matpalette,
+                typography: Roboto,
+                density: 0,
+            ));
+    }
+}

tailwind.config.js

@@ -1,6 +1,8 @@
 module.exports = {
   important: true,
-  content: ["./projects/ngs/src/**/*.{html,scss,ts}"],
+  content: ["./projects/ngs/src/**/*.{html,scss,ts}",
+    "./projects/auto-crud/src/**/*.{html,ts,scss}"
+ ],
   theme: {
     extend: {},
   },