diff --git a/scenes/src/styles.scss b/scenes/src/styles.scss
index f9148e8e..480ec660 100644
--- a/scenes/src/styles.scss
+++ b/scenes/src/styles.scss
@@ -1,20 +1,14 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@include mat.core();
-
-$theme: mat.define-theme((
-  color: (
-    theme-type: light,
-    primary: mat.$red-palette,
-  ),
-  typography: (
-    brand-family: 'Roboto',
-  ),
-));
-
 html {
   font-family: 'Roboto';
-  @include mat.all-component-themes($theme);
-  @include mat.icon-color($theme, $color-variant: primary);
+  @include mat.theme((
+    color: (
+      theme-type: light,
+      primary: mat.$red-palette,
+    ),
+    typography: Roboto,
+    density: 0,
+  ));
 }
diff --git a/src/_app-theme.scss b/src/_app-theme.scss
deleted file mode 100644
index 28c7f9bc..00000000
--- a/src/_app-theme.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-@use '@angular/material' as mat;
-
-@use './app/pages/component-category-list/component-category-list-theme';
-@use './app/pages/component-sidenav/component-sidenav-theme';
-@use './app/pages/component-viewer/component-viewer-theme';
-@use './app/pages/guide-list/guide-list-theme';
-@use './app/pages/homepage/homepage-theme';
-@use './app/pages/not-found/not-found-theme';
-@use './app/pages/component-page-header/component-page-header-theme';
-@use './app/shared/example-viewer/example-viewer-theme';
-@use './app/shared/footer/footer-theme';
-@use './app/shared/navbar/navbar-theme';
-@use './app/shared/table-of-contents/table-of-contents-theme';
-@use './app/shared/cookie-popup/cookie-popup-theme';
-@use './app/shared/theme-picker/theme-picker-theme';
-@use './styles/api-theme';
-@use './styles/markdown-theme';
-@use './styles/svg-theme';
-@use './styles/tables-theme';
-
-// Styles for the docs app that are based on the current theme.
-@mixin theme($theme) {
-  .docs-app-background {
-    background: mat.get-theme-color($theme, surface);
-  }
-
-  .docs-help-support {
-    color: mat.get-theme-color($theme, on-surface);
-
-    a {
-      color: mat.get-theme-color($theme, on-surface-variant);
-    }
-  }
-
-  @include component-category-list-theme.theme($theme);
-  @include component-sidenav-theme.theme($theme);
-  @include component-viewer-theme.theme($theme);
-  @include api-theme.theme($theme);
-  @include markdown-theme.theme($theme);
-  @include svg-theme.theme($theme);
-  @include tables-theme.theme($theme);
-  @include example-viewer-theme.theme($theme);
-  @include footer-theme.theme($theme);
-  @include guide-list-theme.theme($theme);
-  @include homepage-theme.theme($theme);
-  @include not-found-theme.theme($theme);
-  @include navbar-theme.theme($theme);
-  @include table-of-contents-theme.theme($theme);
-  @include cookie-popup-theme.theme($theme);
-  @include theme-picker-theme.theme($theme);
-  @include component-page-header-theme.theme($theme);
-}
diff --git a/src/app/pages/component-category-list/_component-category-list-theme.scss b/src/app/pages/component-category-list/_component-category-list-theme.scss
deleted file mode 100644
index ce68dd3e..00000000
--- a/src/app/pages/component-category-list/_component-category-list-theme.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  .docs-component-category-list-summary a {
-    color: mat.get-theme-color($theme, primary);
-  }
-
-  .docs-component-category-list-card-title,
-  .docs-component-category-list-card-summary  {
-    color: mat.get-theme-color($theme, on-surface-variant);
-  }
-
-  .docs-component-category-list-card {
-    border: 1px solid mat.get-theme-color($theme, outline-variant);
-    border-radius: 12px;
-  }
-
-  .docs-component-category-list-card:hover {
-    background: mat.get-theme-color($theme, surface-dim);
-  }
-
-  .docs-component-category-list-card-image-wrapper {
-    border-bottom: 1px solid mat.get-theme-color($theme, outline-variant);
-  }
-}
diff --git a/src/app/pages/component-category-list/component-category-list.scss b/src/app/pages/component-category-list/component-category-list.scss
index e893b868..a627389f 100644
--- a/src/app/pages/component-category-list/component-category-list.scss
+++ b/src/app/pages/component-category-list/component-category-list.scss
@@ -24,6 +24,15 @@
   }
 }
 
+.docs-component-category-list-summary a {
+  color: var(--mat-sys-primary);
+}
+
+.docs-component-category-list-card-title,
+.docs-component-category-list-card-summary  {
+  color: var(--mat-sys-on-surface-variant);
+}
+
 .docs-component-category-list {
   display: flex;
   flex-wrap: wrap;
@@ -53,10 +62,17 @@
 .docs-component-category-list-card {
   overflow: hidden;
   transition: background 0.3s ease;
+  border: 1px solid var(--mat-sys-outline-variant);
+  border-radius: 12px;
+
+  &:hover {
+    background: var(--mat-sys-surface-dim);
+  }
 }
 
 .docs-component-category-list-card-image-wrapper {
   height: 156px;
+  border-bottom: 1px solid var(--mat-sys-outline-variant);
 }
 
 .docs-component-category-list-card-summary {
diff --git a/src/app/pages/component-page-header/_component-page-header-theme.scss b/src/app/pages/component-page-header/_component-page-header-theme.scss
deleted file mode 100644
index a6e61ffd..00000000
--- a/src/app/pages/component-page-header/_component-page-header-theme.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  .docs-component-page-header {
-    background: mat.get-theme-color($theme, primary-container);
-  }
-}
diff --git a/src/app/pages/component-page-header/component-page-header.scss b/src/app/pages/component-page-header/component-page-header.scss
index e89715d5..c99ba2da 100644
--- a/src/app/pages/component-page-header/component-page-header.scss
+++ b/src/app/pages/component-page-header/component-page-header.scss
@@ -5,6 +5,7 @@
   justify-content: center;
   align-items: center;
   min-height: 60px;
+  background: var(--mat-sys-primary-container);
 
   @media (max-width: constants.$small-breakpoint-width) {
     display: flex;
diff --git a/src/app/pages/component-sidenav/_component-sidenav-theme.scss b/src/app/pages/component-sidenav/_component-sidenav-theme.scss
deleted file mode 100644
index abdf84b7..00000000
--- a/src/app/pages/component-sidenav/_component-sidenav-theme.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@use '@angular/material' as mat;
-@use 'sass:color';
-@use '../../../styles/constants';
-
-@mixin theme($theme) {
-  .docs-component-viewer-nav-content {
-    border-right: 1px solid mat.get-theme-color($theme, outline-variant);
-
-    &::-webkit-scrollbar-thumb {
-      background: rgba(0, 0, 0, .26);
-    }
-
-    a.docs-component-viewer-sidenav-item-selected {
-      background: rgba(mat.get-theme-color($theme, primary), 0.15);
-
-      .mdc-list-item__primary-text {
-        color: color.adjust(
-          mat.get-theme-color($theme, primary),
-          $lightness: if(mat.get-theme-type($theme) == dark, 25%, 0%)
-        );
-      }
-
-      &:hover {
-        background: rgba(mat.get-theme-color($theme, primary), 0.25);
-      }
-    }
-  }
-}
diff --git a/src/app/pages/component-sidenav/component-nav.html b/src/app/pages/component-sidenav/component-nav.html
index 4de58c65..0ad82b32 100644
--- a/src/app/pages/component-sidenav/component-nav.html
+++ b/src/app/pages/component-sidenav/component-nav.html
@@ -3,8 +3,9 @@
     <div class="docs-component-viewer-nav-content">
         <mat-nav-list>
           @for (component of docItems.getItems(section); track component) {
-            <a mat-list-item
+            <a mat-list-item #link="routerLinkActive"
                [routerLink]="'/' + section+ '/' + component.id"
+               [activated]="link.isActive"
                routerLinkActive="docs-component-viewer-sidenav-item-selected"
                [attr.aria-current]="currentItemId === component.id ? 'page': 'false'">
               {{component.name}}
diff --git a/src/app/pages/component-sidenav/component-sidenav.scss b/src/app/pages/component-sidenav/component-sidenav.scss
index af452804..4ac99781 100644
--- a/src/app/pages/component-sidenav/component-sidenav.scss
+++ b/src/app/pages/component-sidenav/component-sidenav.scss
@@ -36,6 +36,7 @@ app-component-sidenav {
   top: 0;
 
   .docs-component-viewer-nav-content {
+    border-right: 1px solid var(--mat-sys-outline-variant);
     width: constants.$sidenav-width;
     padding: 16px 8px;
     height: calc(100vh - 75px);
@@ -47,6 +48,10 @@ app-component-sidenav {
       width: 4px;
     }
 
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, .26);
+    }
+
     ul {
       list-style-type: none;
       margin: 0 0 5px 0;
diff --git a/src/app/pages/component-viewer/_component-viewer-theme.scss b/src/app/pages/component-viewer/_component-viewer-theme.scss
deleted file mode 100644
index 644c4b25..00000000
--- a/src/app/pages/component-viewer/_component-viewer-theme.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  guide-viewer,
-  app-component-viewer {
-    color: mat.get-theme-color($theme, on-surface);
-  }
-
-  .docs-api-h3 {
-    border-bottom: 1px solid mat.get-theme-color($theme, outline-variant)
-  }
-}
diff --git a/src/app/pages/component-viewer/component-viewer.scss b/src/app/pages/component-viewer/component-viewer.scss
index cd0b7c52..7deb8185 100644
--- a/src/app/pages/component-viewer/component-viewer.scss
+++ b/src/app/pages/component-viewer/component-viewer.scss
@@ -1,5 +1,10 @@
 @use '../../../styles/constants';
 
+guide-viewer,
+app-component-viewer {
+  color: var(--mat-sys-on-surface);
+}
+
 app-component-viewer {
   font-weight: 400;
   width: calc(100% - #{constants.$sidenav-width + 1} - #{constants.$content-padding-sidenav * 2});
diff --git a/src/app/pages/guide-list/_guide-list-theme.scss b/src/app/pages/guide-list/_guide-list-theme.scss
deleted file mode 100644
index 56481f75..00000000
--- a/src/app/pages/guide-list/_guide-list-theme.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  .docs-guide-list .docs-guide-item {
-    color: mat.get-theme-color($theme, on-surface-variant);
-  }
-
-  .docs-guide-item {
-    &:focus,
-    &:hover {
-      outline: none;
-
-      .docs-guide-card {
-        background: mat.get-theme-color($theme, surface-dim);
-      }
-    }
-  }
-}
diff --git a/src/app/pages/guide-list/guide-list.scss b/src/app/pages/guide-list/guide-list.scss
index a20a65cf..e1e6a896 100644
--- a/src/app/pages/guide-list/guide-list.scss
+++ b/src/app/pages/guide-list/guide-list.scss
@@ -15,9 +15,19 @@
 }
 
 .docs-guide-item {
+  color: var(--mat-sys-on-surface-variant);
   text-decoration: none;
   display: flex;
   margin: 16px;
+
+  &:focus,
+  &:hover {
+    outline: none;
+
+    .docs-guide-card {
+      background: var(--mat-sys-surface-dim);
+    }
+  }
 }
 
 .docs-guide-card.mat-mdc-card {
diff --git a/src/app/pages/homepage/_homepage-theme.scss b/src/app/pages/homepage/_homepage-theme.scss
deleted file mode 100644
index 31954dfe..00000000
--- a/src/app/pages/homepage/_homepage-theme.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  app-homepage {
-    .docs-header-background {
-      background: mat.get-theme-color($theme, primary-container);
-    }
-
-    .docs-header-headline {
-      color: mat.get-theme-color($theme, on-primary-container);
-    }
-
-    .docs-homepage-row,
-    .docs-homepage-carousel-row h2,
-    a.docs-featured-components-carousel-item,
-    .docs-homepage-guides-card,
-    a.docs-link:hover {
-      color: mat.get-theme-color($theme, on-surface-variant);
-    }
-
-    [carousel-item]:hover,
-    [carousel-item]:focus {
-      outline: none;
-
-      .docs-homepage-guides-card {
-        background: mat.get-theme-color($theme, surface-dim);
-      }
-    }
-  }
-}
diff --git a/src/app/pages/homepage/homepage.scss b/src/app/pages/homepage/homepage.scss
index e29e282f..109e9e67 100644
--- a/src/app/pages/homepage/homepage.scss
+++ b/src/app/pages/homepage/homepage.scss
@@ -6,6 +6,7 @@ $margin-promotion-sections-small: 15px;
   overflow: hidden;
   position: relative;
   height: 420px;
+  background: var(--mat-sys-primary-container);
 }
 
 .docs-homepage-logo {
@@ -30,7 +31,17 @@ $margin-promotion-sections-small: 15px;
   transform: translate(-50%, -50%);
 }
 
+.docs-homepage-row,
+.docs-homepage-carousel-row h2,
+a.docs-featured-components-carousel-item,
+.docs-homepage-guides-card,
+a.docs-link:hover {
+  color: var(--mat-sys-on-surface-variant);
+}
+
 .docs-header-headline {
+  color: var(--mat-sys-on-primary-container);
+
   h1 {
     font-size: 56px;
     font-weight: 500;
@@ -241,3 +252,12 @@ $margin-promotion-sections-small: 15px;
     margin: $margin-promotion-sections-small 0;
   }
 }
+
+[carousel-item]:hover,
+[carousel-item]:focus {
+  outline: none;
+
+  .docs-homepage-guides-card {
+    background: var(--mat-sys-surface-dim);
+  }
+}
diff --git a/src/app/pages/not-found/_not-found-theme.scss b/src/app/pages/not-found/_not-found-theme.scss
deleted file mode 100644
index f947e755..00000000
--- a/src/app/pages/not-found/_not-found-theme.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  app-not-found {
-    color: mat.get-theme-color($theme, on-primary-container);
-  }
-}
diff --git a/src/app/pages/not-found/not-found.scss b/src/app/pages/not-found/not-found.scss
index 98fabb63..81005c71 100644
--- a/src/app/pages/not-found/not-found.scss
+++ b/src/app/pages/not-found/not-found.scss
@@ -1,6 +1,10 @@
 $vertical-spacing: 64px;
 $horizontal-spacing: 32px;
 
+:host {
+  color: var(--mat-sys-on-primary-container);
+}
+
 main {
   min-height: 100vh;
   font-size: 1.25rem;
diff --git a/src/app/shared/cookie-popup/_cookie-popup-theme.scss b/src/app/shared/cookie-popup/_cookie-popup-theme.scss
deleted file mode 100644
index ef3431b0..00000000
--- a/src/app/shared/cookie-popup/_cookie-popup-theme.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  app-cookie-popup {
-    .popup {
-      color: mat.get-theme-color($theme, on-surface);
-      background: mat.get-theme-color($theme, surface);
-    }
-  }
-}
diff --git a/src/app/shared/cookie-popup/cookie-popup.scss b/src/app/shared/cookie-popup/cookie-popup.scss
index 3be7c3f8..7458fcda 100644
--- a/src/app/shared/cookie-popup/cookie-popup.scss
+++ b/src/app/shared/cookie-popup/cookie-popup.scss
@@ -1,11 +1,12 @@
 @use 'sass:math';
 @use '@angular/cdk' as cdk;
-@use '@angular/material' as mat;
 
 $_inner-spacing: 16px;
 
 .popup {
-  @include mat.elevation(2);
+  box-shadow: var(--mat-app-elevation-shadow-level-2);
+  color: var(--mat-sys-on-surface);
+  background: var(--mat-sys-surface);
   position: fixed;
   bottom: 0;
   left: 0;
diff --git a/src/app/shared/example-viewer/_example-viewer-theme.scss b/src/app/shared/example-viewer/_example-viewer-theme.scss
deleted file mode 100644
index ad6a1385..00000000
--- a/src/app/shared/example-viewer/_example-viewer-theme.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  example-viewer {
-    .docs-example-viewer-wrapper {
-      border: 1px solid mat.get-theme-color($theme, outline-variant);
-    }
-
-    .docs-example-viewer-title {
-      color: mat.get-theme-color($theme, on-surface-variant);
-    }
-
-    .docs-example-viewer-source code-snippet {
-      border-bottom: 1px solid mat.get-theme-color($theme, outline-variant);
-    }
-  }
-}
-
diff --git a/src/app/shared/example-viewer/example-viewer.scss b/src/app/shared/example-viewer/example-viewer.scss
index 83f3ed32..e6210b0c 100644
--- a/src/app/shared/example-viewer/example-viewer.scss
+++ b/src/app/shared/example-viewer/example-viewer.scss
@@ -5,6 +5,7 @@
 
 .docs-example-viewer-wrapper {
   border-radius: 12px;
+  border: 1px solid var(--mat-sys-outline-variant);
 
   h3 {
     margin-top: 10px;
@@ -17,6 +18,11 @@
   display: flex;
   justify-content: center;
   padding: 16px 16px 0 24px;
+  color: var(--mat-sys-on-surface-variant);
+}
+
+.docs-example-viewer-source code-snippet {
+  border-bottom: 1px solid var(--mat-sys-outline-variant);
 }
 
 .docs-example-viewer-title-spacer {
diff --git a/src/app/shared/footer/_footer-theme.scss b/src/app/shared/footer/_footer-theme.scss
deleted file mode 100644
index 9a45762c..00000000
--- a/src/app/shared/footer/_footer-theme.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  app-footer {
-    footer {
-      border-top: solid 1px mat.get-theme-color($theme, outline-variant);
-    }
-
-    &, a {
-      color: mat.get-theme-color($theme, on-surface-variant);
-    }
-  }
-}
diff --git a/src/app/shared/footer/footer.scss b/src/app/shared/footer/footer.scss
index 109f9ce4..8c0c32c5 100644
--- a/src/app/shared/footer/footer.scss
+++ b/src/app/shared/footer/footer.scss
@@ -3,6 +3,10 @@
   margin-top: 100px;
 }
 
+footer {
+  border-top: solid 1px var(--mat-sys-outline-variant);
+}
+
 .docs-footer {
   padding: 12px;
   font-size: 12px;
@@ -58,8 +62,8 @@ app-logo {
 }
 
 a {
+  color: var(--mat-sys-on-surface-variant);
   text-decoration: none;
-  color: inherit;
 
   &:hover,
   &:focus {
diff --git a/src/app/shared/navbar/_navbar-theme.scss b/src/app/shared/navbar/_navbar-theme.scss
deleted file mode 100644
index b71523a3..00000000
--- a/src/app/shared/navbar/_navbar-theme.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  app-navbar {
-    color: mat.get-theme-color($theme, primary);
-
-    .docs-navbar, .docs-navbar-header {
-      background: mat.get-theme-color($theme, primary-container);
-
-      .docs-navbar-header-item-selected {
-        background: rgba(mat.get-theme-color($theme, primary), 0.1);
-      }
-    }
-  }
-}
diff --git a/src/app/shared/navbar/navbar.scss b/src/app/shared/navbar/navbar.scss
index 64c964a1..4b4c041c 100644
--- a/src/app/shared/navbar/navbar.scss
+++ b/src/app/shared/navbar/navbar.scss
@@ -1,4 +1,9 @@
+:host {
+  color: var(--mat-sys-primary);
+}
+
 .docs-navbar-header {
+  background: var(--mat-sys-primary-container);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -9,6 +14,10 @@
       margin-left: auto;
     }
   }
+
+  .docs-navbar-header-item-selected {
+    background: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);
+  }
 }
 
 .mat-mdc-icon-button {
diff --git a/src/app/shared/support/support.scss b/src/app/shared/support/support.scss
index 6eeb6dc9..20430b2c 100644
--- a/src/app/shared/support/support.scss
+++ b/src/app/shared/support/support.scss
@@ -1,9 +1,14 @@
 .docs-help-support {
+  color: var(--mat-sys-on-surface);
   width: 75%;
   margin: auto;
   padding: 20px 0;
 }
 
+.docs-help-support a {
+  color: var(--mat-sys-on-surface-variant);
+}
+
 .docs-help-support ul {
   display: flex;
   justify-content: space-around;
diff --git a/src/app/shared/table-of-contents/_table-of-contents-theme.scss b/src/app/shared/table-of-contents/_table-of-contents-theme.scss
deleted file mode 100644
index ab1fdc01..00000000
--- a/src/app/shared/table-of-contents/_table-of-contents-theme.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  .docs-toc-container {
-    border-left: solid 4px mat.get-theme-color($theme, primary-container);
-
-    .docs-link {
-      color: mat.get-theme-color($theme, on-surface);
-
-      &:hover,
-      &.docs-active {
-        color: mat.get-theme-color($theme, primary);
-      }
-    }
-  }
-}
diff --git a/src/app/shared/table-of-contents/table-of-contents.scss b/src/app/shared/table-of-contents/table-of-contents.scss
index e7e9abd3..1eff9de4 100644
--- a/src/app/shared/table-of-contents/table-of-contents.scss
+++ b/src/app/shared/table-of-contents/table-of-contents.scss
@@ -13,6 +13,16 @@
 }
 
 .docs-toc-container {
+  border-left: solid 4px var(--mat-sys-primary-container);
+
+  .docs-link {
+    color: var(--mat-sys-on-surface);
+
+    &:hover,
+    &.docs-active {
+      color: var(--mat-sys-primary);
+    }
+  }
   width: 100%;
   padding: 8px 0 8px 16px;
   box-sizing: border-box;
diff --git a/src/app/shared/theme-picker/_theme-picker-theme.scss b/src/app/shared/theme-picker/_theme-picker-theme.scss
deleted file mode 100644
index 539c4cc0..00000000
--- a/src/app/shared/theme-picker/_theme-picker-theme.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  .docs-theme-picker-menu {
-    .theme-example-icon {
-      border: solid 1px rgba(mat.get-theme-color($theme, outline-variant), 0.5);
-    }
-  }
-}
diff --git a/src/app/shared/theme-picker/theme-picker.scss b/src/app/shared/theme-picker/theme-picker.scss
index 6a267747..5f015ebf 100644
--- a/src/app/shared/theme-picker/theme-picker.scss
+++ b/src/app/shared/theme-picker/theme-picker.scss
@@ -11,6 +11,7 @@ button.docs-theme-picker-trigger {
       width: 24px;
       height: 24px;
       border-radius: 4px;
+      border: solid 1px color-mix(in srgb, var(--mat-sys-outline-variant) 50%, transparent);
 
       svg {
         vertical-align: middle;
diff --git a/src/assets/stack-blitz/src/styles.scss b/src/assets/stack-blitz/src/styles.scss
index c25b2117..91944654 100644
--- a/src/assets/stack-blitz/src/styles.scss
+++ b/src/assets/stack-blitz/src/styles.scss
@@ -1,25 +1,22 @@
 @use '@angular/material' as mat;
 
-$theme: mat.define-theme((
-  color: (
-    theme-type: light,
-    primary: mat.$azure-palette,
-    tertiary: mat.$blue-palette,
-  )
-));
-
 body {
   font-family: Roboto, "Helvetica Neue", sans-serif;
   margin: 0;
   padding: 30px;
   height: 100%;
 
-  @include mat.all-component-themes($theme);
+  @include mat.theme((
+    color: (
+      theme-type: light,
+      primary: mat.$azure-palette,
+      tertiary: mat.$blue-palette,
+    ),
+    typography: Roboto,
+    density: 0,
+  ));
 }
 
 html {
   height: 100%;
 }
-
-@include mat.core();
-@include mat.color-variants-backwards-compatibility($theme);
diff --git a/src/index.html b/src/index.html
index a16708fa..52d600a0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -73,6 +73,12 @@
       }
     }
   </script>
+
+  <style>
+    .docs-app-background {
+      background: var(--mat-sys-surface);
+    }
+  </style>
 </head>
 
 <body class="docs-app-background">
diff --git a/src/styles.scss b/src/styles.scss
index 91bbd564..e4c7791e 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,23 +1,20 @@
 @use '@angular/material' as mat;
-@use './app-theme';
+@use '@angular/cdk';
 @use './styles/api';
 @use './styles/markdown';
 @use './styles/tables';
 @use './styles/general';
 
-$theme: mat.define-theme((
-  color: (
-    theme-type: light,
-    primary: mat.$azure-palette,
-    tertiary: mat.$blue-palette,
-  )
-));
+html {
+  @include mat.theme((
+    color: (
+      theme-type: light,
+      primary: mat.$azure-palette,
+      tertiary: mat.$blue-palette,
+    ),
+    typography: Roboto,
+    density: 0,
+  ));
 
-// Include material core styles.
-@include mat.core();
-@include mat.color-variants-backwards-compatibility($theme);
-@include app-theme.theme($theme);
-
-:root {
-  @include mat.all-component-themes($theme);
+  @include cdk.a11y-visually-hidden();
 }
diff --git a/src/styles/_api-theme.scss b/src/styles/_api-theme.scss
deleted file mode 100644
index e3d182a0..00000000
--- a/src/styles/_api-theme.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@use '@angular/material' as mat;
-
-// Mixin to apply theme colors for generated API docs.
-@mixin theme($theme) {
-  .docs-api-method-name-cell,
-  .docs-api-method-returns-type,
-  .docs-api-method-parameter-type,
-  .docs-api a {
-    color: mat.get-theme-color($theme, primary);
-  }
-
-  .docs-api-modifier-method-marker {
-    background-color: mat.get-theme-color($theme, primary-container);
-    color: mat.get-theme-color($theme, on-primary-container);
-  }
-
-  // Force the top-level API docs header to be hidden, since this is already
-  // captured in the top nav-bar.
-  .docs-api-h1 {
-    display: none !important;
-  }
-
-  // Prevent p tags from not breaking, causing x axis overflows.
-  .docs-api > p {
-    word-break: break-word;
-  }
-
-  .docs-api-class-name,
-  .docs-api-module-import,
-  .docs-api-class-selector-name,
-  .docs-api-class-export-name {
-    background: rgba(mat.get-theme-color($theme, primary-container), 0.25);
-  }
-}
diff --git a/src/styles/_api.scss b/src/styles/_api.scss
index 0fa8b7e7..6d59e384 100644
--- a/src/styles/_api.scss
+++ b/src/styles/_api.scss
@@ -4,6 +4,36 @@
   max-width: 100%;
 }
 
+.docs-api-method-name-cell,
+.docs-api-method-returns-type,
+.docs-api-method-parameter-type,
+.docs-api a {
+  color: var(--mat-sys-primary);
+}
+
+.docs-api-modifier-method-marker {
+  background-color: var(--mat-sys-primary-container);
+  color: var(--mat-sys-on-primary-container);
+}
+
+// Force the top-level API docs header to be hidden, since this is already
+// captured in the top nav-bar.
+.docs-api-h1 {
+  display: none !important;
+}
+
+// Prevent p tags from not breaking, causing x axis overflows.
+.docs-api > p {
+  word-break: break-word;
+}
+
+.docs-api-class-name,
+.docs-api-module-import,
+.docs-api-class-selector-name,
+.docs-api-class-export-name {
+  background: color-mix(in srgb, var(--mat-sys-primary-container) 25%, transparent);
+}
+
 // Top header, e.g., "API documentation for dialog".
 .docs-api-h2 {
   font-size: 30px;
@@ -14,6 +44,7 @@
   font-size: 24px;
   font-weight: 400;
   margin-top: 45px;
+  border-bottom: 1px solid var(--mat-sys-outline-variant)
 }
 
 .docs-api-h4 {
diff --git a/src/styles/_markdown-theme.scss b/src/styles/_markdown-theme.scss
deleted file mode 100644
index f043ef6c..00000000
--- a/src/styles/_markdown-theme.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@use '@angular/material' as mat;
-
-// Mixin to apply theme colors for docs generated from markdown files in the material2 repo.
-@mixin theme($theme) {
-  .docs-markdown {
-    a:not(.mat-mdc-button-base) {
-      color: mat.get-theme-color($theme, primary);
-    }
-
-    pre {
-      border: solid 1px mat.get-theme-color($theme, outline-variant);
-      border-radius: 12px;
-
-      code {
-        background: transparent;
-      }
-    }
-
-    h3 .material-icons,
-    h4 .material-icons {
-      color: mat.get-theme-color($theme, on-surface);
-    }
-
-    code {
-      background: rgba(mat.get-theme-color($theme, primary-container), 0.25);
-    }
-  }
-}
diff --git a/src/styles/_markdown.scss b/src/styles/_markdown.scss
index 5b199047..b7a564f6 100644
--- a/src/styles/_markdown.scss
+++ b/src/styles/_markdown.scss
@@ -3,6 +3,10 @@
 .docs-markdown {
   max-width: 100%;
 
+  a:not(.mat-mdc-button-base) {
+    color: var(--mat-sys-primary);
+  }
+
   h1 {
     display: inline-block;
     font-size: 32px;
@@ -18,7 +22,6 @@
 
   h3 {
     font-size: 24px;
-    font-weight: 500;
     margin: 32px 0 16px;
     font-weight: 400;
   }
@@ -29,6 +32,11 @@
     font-weight: 400;
   }
 
+  h3 .material-icons,
+  h4 .material-icons {
+    color: var(--mat-sys-on-surface);
+  }
+
   h5 {
     font-size: 18px;
     margin: 20px 0 10px;
@@ -58,20 +66,24 @@
   }
 
   pre {
-    border-radius: 5px;
     display: block;
     margin: 24px auto;
     overflow-x: auto;
     padding: 20px;
     white-space: pre-wrap;
 
+    border: solid 1px var(--mat-sys-outline-variant);
+    border-radius: 12px;
+
     code {
+      background: transparent;
       padding: 0;
       font-size: 100%;
     }
   }
 
   code {
+    background: color-mix(in srgb, var(--mat-sys-primary-container) 25%, transparent);
     padding: 3px;
   }
 }
diff --git a/src/styles/_svg-theme.scss b/src/styles/_svg-theme.scss
deleted file mode 100644
index 36c80e63..00000000
--- a/src/styles/_svg-theme.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@use 'sass:color';
-@use '@angular/material' as mat;
-
-// Mixin to create a css class for each fill, stroke, and stop-color for a given color.
-@mixin _svgColorProperties($className, $color) {
-  .docs-svg-#{$className}-fill {
-    fill: $color;
-  }
-
-  .docs-svg-#{$className}-stroke {
-    stroke: $color;
-  }
-
-  .docs-svg-#{$className}-stop-color {
-    stop-color: $color;
-  }
-}
-
-// Mixin to apply theme colors for generated API docs.
-@mixin theme($theme) {
-  @include _svgColorProperties(primary, mat.get-theme-color($theme, primary));
-  @include _svgColorProperties(accent, mat.get-theme-color($theme, secondary));
-
-  // Use sass's `lighten` and `darken` to create gradient colors for the docs SVGs.
-  // This is specifically tailored to the SVGs in this app and is not a general approach.
-  $base: mat.get-theme-color($theme, primary);
-  @include _svgColorProperties(primary-dark-30,  color.scale($base, $lightness: -30%));
-  @include _svgColorProperties(primary-dark-40,  color.scale($base, $lightness: -40%));
-  @include _svgColorProperties(primary-light-20, color.scale($base, $lightness: +20%));
-  @include _svgColorProperties(primary-light-30, color.scale($base, $lightness: +30%));
-  @include _svgColorProperties(primary-light-40, color.scale($base, $lightness: +40%));
-  @include _svgColorProperties(primary-light-60, color.scale($base, $lightness: +60%));
-  @include _svgColorProperties(primary-light-80, color.scale($base, $lightness: +80%));
-  @include _svgColorProperties(primary-light-85, color.scale($base, $lightness: +85%));
-}
diff --git a/src/styles/_tables-theme.scss b/src/styles/_tables-theme.scss
deleted file mode 100644
index 3d87e7d8..00000000
--- a/src/styles/_tables-theme.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@use '@angular/material' as mat;
-
-// Mixin to apply theme colors for both generated API docs and markdown docs (guides/overviews).
-@mixin theme($theme) {
-  .docs-api table,
-  .docs-markdown > table {
-    color: mat.get-theme-color($theme, on-surface);
-  }
-
-  .docs-api th,
-  .docs-markdown > table th {
-    font-weight: 500;
-  }
-
-  .docs-api tr,
-  .docs-markdown > table tr {
-    border-bottom: 1px solid mat.get-theme-color($theme, outline-variant);
-    height: 56px;
-  }
-}
diff --git a/src/styles/_tables.scss b/src/styles/_tables.scss
index 860edb84..e6765047 100644
--- a/src/styles/_tables.scss
+++ b/src/styles/_tables.scss
@@ -2,6 +2,7 @@
 
 .docs-api table,
 .docs-markdown > table {
+  color: var(--mat-sys-on-surface);
   border-collapse: collapse;
   border-spacing: 0;
   margin: 0 0 32px;
@@ -22,10 +23,10 @@
 
 .docs-api th,
 .docs-markdown > table th {
-  font-weight: 400;
   max-width: 100px;
   padding: 14px 16px;
   text-align: left;
+  font-weight: 500;
 }
 
 .docs-api td,
@@ -44,6 +45,11 @@
   }
 }
 
+.docs-api tr,
+.docs-markdown > table tr {
+  border-bottom: 1px solid var(--mat-sys-outline-variant);
+  height: 56px;
+}
 
 @media (max-width: constants.$small-breakpoint-width) {
   .docs-api table,
diff --git a/src/styles/custom-themes/azure-blue.scss b/src/styles/custom-themes/azure-blue.scss
index 03149a01..9bc91568 100644
--- a/src/styles/custom-themes/azure-blue.scss
+++ b/src/styles/custom-themes/azure-blue.scss
@@ -1,17 +1,14 @@
 @use '@angular/material' as mat;
-@use '../../app-theme';
 
-$theme: mat.define-theme((
-  color: (
-    theme-type: light,
-    primary: mat.$azure-palette,
-    tertiary: mat.$blue-palette,
-  )
-));
-
-@include mat.color-variants-backwards-compatibility($theme);
-@include app-theme.theme($theme);
-
-:root {
-  @include mat.all-component-themes($theme);
+html {
+  @include mat.theme((
+    color: (
+      theme-type: light,
+      primary: mat.$azure-palette,
+      tertiary: mat.$blue-palette,
+    ),
+    typography: Roboto,
+    density: 0,
+  ));
 }
+
diff --git a/src/styles/custom-themes/cyan-orange.scss b/src/styles/custom-themes/cyan-orange.scss
index 253bffd8..dadaaa38 100644
--- a/src/styles/custom-themes/cyan-orange.scss
+++ b/src/styles/custom-themes/cyan-orange.scss
@@ -1,18 +1,14 @@
 @use '@angular/material' as mat;
-@use '../../app-theme';
 @use '../../highlightjs/material-dark';
 
-$theme: mat.define-theme((
-  color: (
-    theme-type: dark,
-    primary: mat.$cyan-palette,
-    tertiary: mat.$orange-palette
-  )
-));
-
-@include mat.color-variants-backwards-compatibility($theme);
-@include app-theme.theme($theme);
-
-:root {
-  @include mat.all-component-themes($theme);
+html {
+  @include mat.theme((
+    color: (
+      theme-type: dark,
+      primary: mat.$cyan-palette,
+      tertiary: mat.$orange-palette
+    ),
+    typography: Roboto,
+    density: 0,
+  ));
 }
diff --git a/src/styles/custom-themes/magenta-violet.scss b/src/styles/custom-themes/magenta-violet.scss
index 06e18d95..dd76bb4e 100644
--- a/src/styles/custom-themes/magenta-violet.scss
+++ b/src/styles/custom-themes/magenta-violet.scss
@@ -1,18 +1,14 @@
 @use '@angular/material' as mat;
-@use '../../app-theme';
 @use '../../highlightjs/material-dark';
 
-$theme: mat.define-theme((
-  color: (
-    theme-type: dark,
-    primary: mat.$magenta-palette,
-    tertiary: mat.$violet-palette,
-  )
-));
-
-@include mat.color-variants-backwards-compatibility($theme);
-@include app-theme.theme($theme);
-
-:root {
-  @include mat.all-component-themes($theme);
+html {
+  @include mat.theme((
+    color: (
+      theme-type: dark,
+      primary: mat.$magenta-palette,
+      tertiary: mat.$violet-palette,
+    ),
+    typography: Roboto,
+    density: 0,
+  ));
 }
diff --git a/src/styles/custom-themes/rose-red.scss b/src/styles/custom-themes/rose-red.scss
index f3075b35..ab53f73b 100644
--- a/src/styles/custom-themes/rose-red.scss
+++ b/src/styles/custom-themes/rose-red.scss
@@ -1,17 +1,13 @@
 @use '@angular/material' as mat;
-@use '../../app-theme';
 
-$theme: mat.define-theme((
-  color: (
-    theme-type: light,
-    primary: mat.$rose-palette,
-    tertiary: mat.$red-palette,
-  )
-));
-
-@include mat.color-variants-backwards-compatibility($theme);
-@include app-theme.theme($theme);
-
-:root {
-  @include mat.all-component-themes($theme);
+html {
+  @include mat.theme((
+    color: (
+      theme-type: light,
+      primary: mat.$rose-palette,
+      tertiary: mat.$red-palette,
+    ),
+    typography: Roboto,
+    density: 0,
+  ));
 }