diff --git a/package.json b/package.json
index f544fb1..dae619d 100644
--- a/package.json
+++ b/package.json
@@ -13,12 +13,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.0.3",
-    "@angular/cdk": "^17.3.9",
+    "@angular/cdk": "^18.0.3",
     "@angular/common": "^18.0.3",
     "@angular/compiler": "^18.0.3",
     "@angular/core": "^18.0.3",
     "@angular/forms": "^18.0.3",
-    "@angular/material": "^17.3.9",
+    "@angular/material": "^18.0.3",
     "@angular/platform-browser": "^18.0.3",
     "@angular/platform-browser-dynamic": "^18.0.3",
     "@angular/router": "^18.0.3",
diff --git a/projects/docs/src/styles.scss b/projects/docs/src/styles.scss
index 79cfdc9..d1699d6 100644
--- a/projects/docs/src/styles.scss
+++ b/projects/docs/src/styles.scss
@@ -16,16 +16,18 @@
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include mat.core-theme(theme.$ngx-mat-timepicker-theme);
-@include mat.toolbar-theme(theme.$ngx-mat-timepicker-theme);
-@include mat.form-field-theme(theme.$ngx-mat-timepicker-theme);
-@include mat.input-theme(theme.$ngx-mat-timepicker-theme);
-@include mat.button-theme(theme.$ngx-mat-timepicker-theme);
-@include mat.fab-theme(theme.$ngx-mat-timepicker-theme);
-@include mat.icon-button-theme(theme.$ngx-mat-timepicker-theme);
-@include mat.divider-theme(theme.$ngx-mat-timepicker-theme);
-@include mat.card-theme(theme.$ngx-mat-timepicker-theme);
-@include mat-timepicker.timepicker-theme(theme.$ngx-mat-timepicker-theme);
+:root {
+  @include mat.core-theme(theme.$ngx-mat-timepicker-theme);
+  @include mat.toolbar-theme(theme.$ngx-mat-timepicker-theme);
+  @include mat.form-field-theme(theme.$ngx-mat-timepicker-theme);
+  @include mat.input-theme(theme.$ngx-mat-timepicker-theme);
+  @include mat.button-theme(theme.$ngx-mat-timepicker-theme);
+  @include mat.fab-theme(theme.$ngx-mat-timepicker-theme);
+  @include mat.icon-button-theme(theme.$ngx-mat-timepicker-theme);
+  @include mat.divider-theme(theme.$ngx-mat-timepicker-theme);
+  @include mat.card-theme(theme.$ngx-mat-timepicker-theme);
+  @include mat-timepicker.timepicker-theme(theme.$ngx-mat-timepicker-theme);
+}
 
 /* You can add global styles to this file, and also import other style files */
 
diff --git a/projects/docs/src/styles/_theme.scss b/projects/docs/src/styles/_theme.scss
index 5817dd9..d91e940 100644
--- a/projects/docs/src/styles/_theme.scss
+++ b/projects/docs/src/styles/_theme.scss
@@ -4,26 +4,26 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$ngx-mat-timepicker-primary: mat.define-palette(mat.$indigo-palette);
-$ngx-mat-timepicker-accent: mat.define-palette(
-  mat.$pink-palette,
+$ngx-mat-timepicker-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
+$ngx-mat-timepicker-accent: mat.m2-define-palette(
+  mat.$m2-pink-palette,
   A200,
   A100,
   A400
 );
 
 // The warn palette is optional (defaults to red).
-$ngx-mat-timepicker-warn: mat.define-palette(mat.$red-palette);
+$ngx-mat-timepicker-warn: mat.m2-define-palette(mat.$m2-red-palette);
 
 // Create the theme object. A theme consists of configurations for individual
 // theming systems such as "color" or "typography".
-$ngx-mat-timepicker-theme: mat.define-light-theme(
+$ngx-mat-timepicker-theme: mat.m2-define-light-theme(
   (
     color: (
       primary: $ngx-mat-timepicker-primary,
       accent: $ngx-mat-timepicker-accent,
       warn: $ngx-mat-timepicker-warn,
     ),
-    typography: mat.define-typography-config(),
+    typography: mat.m2-define-typography-config(),
   )
 );
diff --git a/projects/mat-timepicker/_timepicker-theme.scss b/projects/mat-timepicker/_timepicker-theme.scss
index 8db8531..cbcfc4c 100644
--- a/projects/mat-timepicker/_timepicker-theme.scss
+++ b/projects/mat-timepicker/_timepicker-theme.scss
@@ -8,33 +8,33 @@ $inputs-separator-font-size: 3rem !default;
 $inputs-separator-line-height: 1.25rem;
 $primary-opacity: 0.15;
 
-@mixin _color($palette) {
+@mixin _m2-color($theme, $palette) {
   .mat-timepicker-toggle.mat-timepicker-toggle-active {
-    color: mat.get-color-from-palette($palette);
+    color: mat.get-theme-color($theme, $palette, default);
   }
 
   .mat-time-period-item-active,
   .mat-clock-dial-value.mat-clock-dial-value-active {
-    color: mat.get-color-from-palette($palette);
-    background-color: mat.get-color-from-palette($palette, $primary-opacity);
+    color: mat.get-theme-color($theme, $palette, default);
+    background-color: rgba(mat.get-theme-color($theme, $palette, default), $primary-opacity);
   }
 
   .mat-clock-dial::before {
-    background-color: mat.get-color-from-palette($palette);
+    background-color: mat.get-theme-color($theme, $palette, default);
   }
 
   .mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled) {
-    background-color: mat.get-color-from-palette($palette);
+    background-color: mat.get-theme-color($theme, $palette, default);
 
     &::before {
-      background-color: mat.get-color-from-palette($palette);
+      background-color: mat.get-theme-color($theme, $palette, default);
     }
   }
 
   .mat-clock-dial-hand.mat-clock-dial-hand-disabled {
     &::before {
       background-color: color.adjust(
-        mat.get-color-from-palette($palette),
+        mat.get-theme-color($theme, $palette, default),
         $alpha: -0.6
       );
     }
@@ -42,59 +42,54 @@ $primary-opacity: 0.15;
 
   [mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled.mat-clock-dial-cell-active {
     background-color: color.adjust(
-      mat.get-color-from-palette($palette),
+      mat.get-theme-color($theme, $palette, default),
       $alpha: -0.6
     );
   }
 }
 
-@mixin color($config-or-theme) {
-  $config: mat.get-color-config($config-or-theme);
-  $is-dark-theme: map.get($config, is-dark);
-  $foreground: map.get($config, foreground);
-  $background: map.get($config, background);
-
-  @include _color(map.get($config, primary));
+@mixin m2-color($theme) {
+  @include _m2-color($theme, primary);
 
   .mat-timepicker-toggle {
-    color: mat.get-color-from-palette($foreground, icon);
+    color: mat.get-theme-color($theme, foreground, icon);
   }
 
   .mat-timepicker-content {
     @include mat.elevation(4);
-    background-color: mat.get-color-from-palette($background, card);
-    color: mat.get-color-from-palette($foreground, text);
+    background-color: mat.get-theme-color($theme, background, card);
+    color: mat.get-theme-color($theme, foreground, text);
 
     &.mat-accent {
-      @include _color(map.get($config, accent));
+      @include _m2-color($theme, accent);
     }
 
     &.mat-warn {
-      @include _color(map.get($config, warn));
+      @include _m2-color($theme, warn);
     }
   }
 
   .mat-timepicker-content-layout-title {
-    color: mat.get-color-from-palette($foreground, secondary-text);
+    color: mat.get-theme-color($theme, foreground, secondary-text);
   }
 
   .mat-time-toggle-mode-button svg {
-    fill: mat.get-color-from-palette($foreground, secondary-text);
+    fill: mat.get-theme-color($theme, foreground, secondary-text);
   }
 
   .mat-time-period {
-    border-color: mat.get-color-from-palette($foreground, divider);
+    border-color: mat.get-theme-color($theme, foreground, divider);
   }
 
   .mat-time-period-item-disabled {
-    color: mat.get-color-from-palette($foreground, disabled-button);
-    background-color: mat.get-color-from-palette($background, disabled-button);
+    color: mat.get-theme-color($theme, foreground, disabled-button);
+    background-color: mat.get-theme-color($theme, background, disabled-button);
   }
 
   .mat-clock-dial-value,
   .mat-clock-dial,
   .mat-time-inputs-field .mat-mdc-text-field-wrapper {
-    background-color: mat.get-color-from-palette($background, background);
+    background-color: mat.get-theme-color($theme, background, background);
   }
 
   .mat-clock-dial-hand.mat-clock-dial-hand-disabled {
@@ -105,7 +100,7 @@ $primary-opacity: 0.15;
     background: transparent;
 
     &:not(.mat-clock-dial-cell-disabled):hover {
-      background-color: mat.get-color-from-palette($background, hover);
+      background-color: mat.get-theme-color($theme, background, hover);
     }
   }
 
@@ -114,7 +109,7 @@ $primary-opacity: 0.15;
   }
 
   .mat-clock-dial-cell.mat-clock-dial-cell.mat-clock-dial-cell-disabled {
-    color: mat.get-color-from-palette($foreground, disabled-button);
+    color: mat.get-theme-color($theme, foreground, disabled-button);
 
     .mat-mdc-button-persistent-ripple::before {
       background-color: transparent;
@@ -122,13 +117,12 @@ $primary-opacity: 0.15;
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: mat.get-typography-config($config-or-theme);
+@mixin m2-typography($theme) {
 
   h6.mat-timepicker-content-layout-title {
     font: {
       size: $timepicker-content-title-font-size;
-      weight: mat.font-weight($config, subtitle-2);
+      weight: mat.get-theme-typography($theme, subtitle-2, font-weight);
     }
   }
 
@@ -149,18 +143,14 @@ $primary-opacity: 0.15;
   }
 }
 
-@mixin theme($theme-or-color-config) {
-  $color: mat.get-color-config($theme-or-color-config);
-  $typography: mat.get-typography-config($theme-or-color-config);
-
-  @if $color != null {
-    @include color($color);
-  }
-
-  @if $typography != null {
-    @include typography($typography);
+@mixin theme($theme) {
+  @if (mat.get-theme-version($theme) == 1) {
+    // Add your new M3 styles here.
   } @else {
-    $typography: mat.define-typography-config();
-    @include typography($typography);
+    // Keep your old M2 styles here.
+  
+      @include m2-color($theme);
+  
+      @include m2-typography($theme);
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 21ce0d3..c1e0d5e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -258,10 +258,10 @@
     vite "5.2.11"
     watchpack "2.4.1"
 
-"@angular/cdk@^17.3.9":
-  version "17.3.9"
-  resolved "https://registry.npmjs.org/@angular/cdk/-/cdk-17.3.9.tgz"
-  integrity sha512-N/7Is+FkIIql5UEL/I+PV6THw+yXNCCGGpwimf/yaNgT9y1fHAmBWhDY0oQqFjCuD+kXl9gQL0ONfsl5Nlnk+w==
+"@angular/cdk@^18.0.3":
+  version "18.0.3"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-18.0.3.tgz#498dfd79bc6e846bc6cfb348d967a3a1b7354fc0"
+  integrity sha512-F6kXAoIWUbvhvbSGnMxrKJZsI7rhGKDXVFFf9m+ZQAbqboSyDbbszux7Em4CEh27LaXYNFltUcKdCQ3hdp7Kig==
   dependencies:
     tslib "^2.3.0"
   optionalDependencies:
@@ -332,10 +332,10 @@
   dependencies:
     tslib "^2.3.0"
 
-"@angular/material@^17.3.9":
-  version "17.3.9"
-  resolved "https://registry.npmjs.org/@angular/material/-/material-17.3.9.tgz"
-  integrity sha512-iNLXGfTsXYQ7lX9UkU4ifb6+lVKjDFQJkWE8HmNWC3C2KXC9k15UefPKy4/sZUVzLE/yOBHPfNDwdhaJGlcu+g==
+"@angular/material@^18.0.3":
+  version "18.0.3"
+  resolved "https://registry.yarnpkg.com/@angular/material/-/material-18.0.3.tgz#9760a332badd9140464278822825f12b396f8a52"
+  integrity sha512-VIlK+0CxreAkDmr05TKelTr11I7yUtGPwRTFaWfQtXNkYEwGE1iuZGz3Iz8otxvHsTLC74Er4vMSYndwJvMyjQ==
   dependencies:
     "@material/animation" "15.0.0-canary.7f224ddd4.0"
     "@material/auto-init" "15.0.0-canary.7f224ddd4.0"
@@ -380,6 +380,7 @@
     "@material/tab-scroller" "15.0.0-canary.7f224ddd4.0"
     "@material/textfield" "15.0.0-canary.7f224ddd4.0"
     "@material/theme" "15.0.0-canary.7f224ddd4.0"
+    "@material/tokens" "15.0.0-canary.7f224ddd4.0"
     "@material/tooltip" "15.0.0-canary.7f224ddd4.0"
     "@material/top-app-bar" "15.0.0-canary.7f224ddd4.0"
     "@material/touch-target" "15.0.0-canary.7f224ddd4.0"