victorbruce · victorbruce · Jan 6, 2026 · Jan 1, 2026 · Jan 2, 2026 · Jan 5, 2026
diff --git a/angular.json b/angular.json
@@ -27,7 +27,10 @@
                 "input": "public"
               }
             ],
-            "styles": ["src/styles.scss"]
+            "styles": ["src/styles.scss"],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/styles"]
+            }
           },
           "configurations": {
             "production": {
@@ -80,7 +83,10 @@
                 "input": "public"
               }
             ],
-            "styles": ["src/styles.scss"]
+            "styles": ["src/styles.scss"],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/styles"]
+            }
           }
         }
       }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,10 +35,12 @@
   },
   "private": true,
   "dependencies": {
+    "@angular/cdk": "^20.2.14",
     "@angular/common": "^20.3.0",
     "@angular/compiler": "^20.3.0",
     "@angular/core": "^20.3.0",
     "@angular/forms": "^20.3.0",
+    "@angular/material": "^20.2.14",
     "@angular/platform-browser": "^20.3.0",
     "@angular/router": "^20.3.0",
     "@ngrx/effects": "^20.1.0",

diff --git a/src/app/app.html b/src/app/app.html
diff --git a/src/app/app.scss b/src/app/app.scss
@@ -0,0 +1,7 @@
+.app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}
diff --git a/src/app/app.spec.ts b/src/app/app.spec.ts
@@ -20,6 +20,6 @@ describe('App', () => {
     const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-starter-project');
+    expect(compiled.querySelector('h1')?.textContent).toContain('Angular Starter Project');
   });
 });
diff --git a/src/app/app.ts b/src/app/app.ts
@@ -4,19 +4,56 @@ import { Store } from '@ngrx/store';
 import { addItem } from './state/item.actions';
 import { ItemState } from './state/item.reducer';
 
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTableModule } from '@angular/material/table';
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
+  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
+  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
+];
+
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [
+    RouterOutlet,
+    MatButtonModule,
+    MatCardModule,
+    MatIconModule,
+    MatSnackBarModule,
+    MatTableModule,
+  ],
   templateUrl: './app.html',
   styleUrl: './app.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class App {
   protected readonly title = signal('angular-starter-project');
+  public displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  public dataSource = ELEMENT_DATA;
 
-  constructor(private store: Store<ItemState>) {}
+  constructor(
+    private store: Store<ItemState>,
+    private snackBar: MatSnackBar,
+  ) {}
 
   public addItem() {
     this.store.dispatch(addItem({ item: 'Your new item' }));
   }
+
+  public openSnackbar(): void {
+    this.snackBar.open('This is a snackbar with custom theme!', 'Close', {
+      duration: 3000,
+    });
+  }
 }
diff --git a/src/app/styles/.gitkeep b/src/app/styles/.gitkeep
diff --git a/src/index.html b/src/index.html
@@ -6,6 +6,11 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
   </head>
   <body>
     <app-root></app-root>

diff --git a/src/styles.scss b/src/styles.scss
@@ -1 +1,11 @@
-/* You can add global styles to this file, and also import other style files */
+@use '@angular/material' as mat;
+@use './styles//material/_custom-theme.scss';
+
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 16px;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+}
diff --git a/src/styles/material/_custom-theme.scss b/src/styles/material/_custom-theme.scss
@@ -0,0 +1,23 @@
+@use '@angular/material' as mat;
+@use './material_theme-colors' as my-colors;
+
+@include mat.core();
+
+$my-theme: mat.define-theme(
+  (
+    color: (
+      theme-type: dark,
+      primary: my-colors.$primary-palette,
+      tertiary: my-colors.$tertiary-palette,
+    ),
+    typography: (
+      brand-family: 'Roboto, sans-serif',
+      plain-family: 'Roboto, sans-serif',
+    ),
+    density: (
+      scale: 0,
+    ),
+  )
+);
+
+@include mat.all-component-themes($my-theme);
diff --git a/src/styles/material/_variables.scss b/src/styles/material/_variables.scss
@@ -0,0 +1,19 @@
+:root {
+  /* --- PRIMARY (Your Main Brand Color) --- */
+  --mat-sys-primary: #f0b90b; /* Your EXACT Primary Hex */
+  --mat-sys-on-primary: #000; /* Text color on top of Primary */
+
+  /* --- SECONDARY (Formerly 'Accent') --- */
+  /* Used for Floating Action Buttons (FABs), selection controls, chips */
+  --mat-sys-secondary: #00cc99; /* Your EXACT Secondary Hex */
+  --mat-sys-on-secondary: #000000;
+
+  /* --- TERTIARY (New in M3) --- */
+  /* Used for contrasting accents or distinctive visual elements */
+  --mat-sys-tertiary: #ffcc00; /* Your EXACT Tertiary Hex */
+  --mat-sys-on-tertiary: #000000;
+
+  /* --- ERROR (Formerly 'Warn') --- */
+  --mat-sys-error: #ff0000; /* Your EXACT Error/Warn Hex */
+  --mat-sys-on-error: #ffffff;
+}