diff --git a/aio/src/styles/1-layouts/_index.scss b/aio/src/styles/1-layouts/_index.scss
index 0ff377dcff6..da75cacf412 100644
--- a/aio/src/styles/1-layouts/_index.scss
+++ b/aio/src/styles/1-layouts/_index.scss
@@ -2,11 +2,11 @@
    LAYOUT STYLES
    ============================== */
 
-  @forward 'content-layout/content-layout';
-  @forward 'doc-viewer/doc-viewer';
-  @forward 'footer/footer';
-  @forward 'layout-global/layout-global';
-  @forward 'marketing-layout/marketing-layout';
-  @forward 'not-found/not-found';
-  @forward 'sidenav/sidenav';
-  @forward 'top-menu/top-menu';
+@forward 'content-layout/content-layout';
+@forward 'doc-viewer/doc-viewer';
+@forward 'footer/footer';
+@forward 'layout-global/layout-global';
+@forward 'marketing-layout/marketing-layout';
+@forward 'not-found/not-found';
+@forward 'sidenav/sidenav';
+@forward 'top-menu/top-menu';
diff --git a/aio/src/styles/2-modules/_alert.scss b/aio/src/styles/2-modules/_alert.scss
deleted file mode 100644
index 3f5ed1799d1..00000000000
--- a/aio/src/styles/2-modules/_alert.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-@use '../constants' as *;
-@use '../mixins' as *;
-
-.alert {
-    padding: 16px;
-    margin: 24px 0px;
-    @include font-size(14);
-    color: $darkgray;
-    width: 100%;
-    box-sizing: border-box;
-    clear: both;
-
-    h1, h2, h3, h4, h5, h6 {
-      font-weight: 500;
-    }
-
-    &.is-critical {
-        border-left: 8px solid $brightred;
-        background-color: rgba($brightred, 0.05);
-
-        h1, h2, h3, h4, h5, h6 {
-            color: $brightred;
-        }
-    }
-
-    &.is-important {
-        border-left: 8px solid $orange;
-        background-color: rgba($orange, 0.05);
-
-        h1, h2, h3, h4, h5, h6 {
-            color: $orange;
-        }
-    }
-
-    &.is-helpful {
-        border-left: 8px solid $blue;
-        background-color: rgba($blue, 0.05);
-
-        h1, h2, h3, h4, h5, h6 {
-            color: $blue;
-        }
-    }
-
-    &.archive-warning {
-      background-color: $darkred;
-      border-radius: 4px;
-      margin-bottom: 1rem;
-
-      * {
-        color: $white;
-      }
-
-      a {
-        color: $white;
-        font-weight: bold;
-        text-decoration: underline;
-
-        &:hover {
-          opacity: 0.9;
-        }
-      }
-    }
-
-    > * {
-        margin: 8px 16px;
-    }
-}
diff --git a/aio/src/styles/2-modules/_api-symbols.scss b/aio/src/styles/2-modules/_api-symbols.scss
deleted file mode 100644
index 895550f8c68..00000000000
--- a/aio/src/styles/2-modules/_api-symbols.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@use '../constants' as *;
-@use '../mixins' as *;
-
-/* API SYMBOLS */
-
-/* SYMBOL CLASS */
-
-.symbol {
-  border-radius: 2px;
-  box-shadow: 0 1px 2px rgba($black, .24);
-  color: $white;
-  display: inline-block;
-  @include font-size(10);
-  font-weight: 600;
-  @include line-height(16);
-  margin-right: 8px;
-  text-align: center;
-  width: 16px;
-
-  // SYMBOL TYPES
-  // Symbol mapping variables in *constants*
-  @each $name, $symbol in $api-symbols {
-    &.#{$name} {
-      background: map-get($symbol, background);
-
-      &:before {
-        content: map-get($symbol, content);
-      }
-    }
-  }
-}
diff --git a/aio/src/styles/2-modules/_callout.scss b/aio/src/styles/2-modules/_callout.scss
deleted file mode 100644
index a48358a78af..00000000000
--- a/aio/src/styles/2-modules/_callout.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@use '../constants' as *;
-@use '../mixins' as *;
-@use './alert';
-
-.callout {
-  @extend .alert;
-  padding: 0px;
-  border-left: none !important;
-  border-radius: 4px;
-
-  header {
-    color: $white;
-    @include line-height(24);
-    font-weight: 500;
-    padding: 8px 16px;
-    margin: 0;
-    text-transform: uppercase;
-    border-radius: 4px 4px 0 0;
-  }
-
-  p {
-    padding: 16px;
-    margin: 0px;
-    @include font-size(14);
-  }
-
-  > *:not(:first-child) {
-    padding: 16px 24px;
-  }
-
-  &.is-critical {
-    border-color: $brightred;
-    background: rgba($brightred, 0.05);
-
-    header {
-      background: $brightred;
-    }
-  }
-
-  &.is-important {
-    border-color: $orange;
-    background: rgba($orange, 0.05);
-
-    header {
-      background: $amber-700;
-    }
-  }
-
-  &.is-helpful {
-    border-color: $blue;
-    background: rgba($blue, 0.05);
-
-    header {
-      background: $blue;
-    }
-  }
-}
diff --git a/aio/src/styles/2-modules/_hr.scss b/aio/src/styles/2-modules/_hr.scss
deleted file mode 100644
index 610a844da02..00000000000
--- a/aio/src/styles/2-modules/_hr.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use '../constants' as *;
-
-hr {
-    border: none;
-    background: $lightgray;
-    height: 1px;
-}
diff --git a/aio/src/styles/2-modules/_index.scss b/aio/src/styles/2-modules/_index.scss
index 151f05c098c..a1da7c849f0 100644
--- a/aio/src/styles/2-modules/_index.scss
+++ b/aio/src/styles/2-modules/_index.scss
@@ -2,32 +2,32 @@
    MODULE STYLES
    ============================== */
 
-   @forward 'alert';
-   @forward 'api-list';
-   @forward 'api-pages';
-   @forward 'api-symbols';
-   @forward 'buttons';
-   @forward 'callout';
-   @forward 'card';
-   @forward 'cli-pages';
-   @forward 'code';
-   @forward 'contribute';
-   @forward 'contributor';
-   @forward 'deploy-theme';
-   @forward 'details';
-   @forward 'errors';
-   @forward 'features';
-   @forward 'filetree';
-   @forward 'guides';
-   @forward 'heading-anchors';
-   @forward 'hr';
-   @forward 'images';
-   @forward 'label';
-   @forward 'notification';
-   @forward 'progress-bar';
-   @forward 'presskit';
-   @forward 'resources';
-   @forward 'search-results';
-   @forward 'select-menu';
-   @forward 'table';
-   @forward 'toc';
+@forward 'alert/alert';
+@forward 'api-list/api-list';
+@forward 'api-pages/api-pages';
+@forward 'api-symbols/api-symbols';
+@forward 'buttons/buttons';
+@forward 'callout/callout';
+@forward 'card/card';
+@forward 'cli-pages/cli-pages';
+@forward 'code/code';
+@forward 'contribute/contribute';
+@forward 'contributor/contributor';
+@forward 'deploy-theme/deploy-theme';
+@forward 'details/details';
+@forward 'errors/errors';
+@forward 'features/features';
+@forward 'filetree/filetree';
+@forward 'guides/guides';
+@forward 'heading-anchors/heading-anchors';
+@forward 'hr/hr';
+@forward 'images/images';
+@forward 'label/label';
+@forward 'notification/notification';
+@forward 'progress-bar/progress-bar';
+@forward 'presskit/presskit';
+@forward 'resources/resources';
+@forward 'search-results/search-results';
+@forward 'select-menu/select-menu';
+@forward 'table/table';
+@forward 'toc/toc';
diff --git a/aio/src/styles/2-modules/_theme.scss b/aio/src/styles/2-modules/_theme.scss
new file mode 100644
index 00000000000..840ad0cbc7b
--- /dev/null
+++ b/aio/src/styles/2-modules/_theme.scss
@@ -0,0 +1,51 @@
+@use 'alert/alert-theme' as *;
+@use 'api-list/api-list-theme' as *;
+@use 'api-pages/api-pages-theme' as *;
+@use 'api-symbols/api-symbols-theme' as *;
+@use 'buttons/buttons-theme' as *;
+@use 'callout/callout-theme' as *;
+@use 'card/card-theme' as *;
+@use 'code/code-theme' as *;
+@use 'contributor/contributor-theme' as *;
+@use 'details/details-theme' as *;
+@use 'errors/errors-theme' as *;
+@use 'filetree/filetree-theme' as *;
+@use 'guides/guides-theme' as *;
+@use 'heading-anchors/heading-anchors-theme' as *;
+@use 'hr/hr-theme' as *;
+@use 'images/images-theme' as *;
+@use 'label/label-theme' as *;
+@use 'notification/notification-theme' as *;
+@use 'presskit/presskit-theme' as *;
+@use 'resources/resources-theme' as *;
+@use 'search-results/search-results-theme' as *;
+@use 'select-menu/select-menu-theme' as *;
+@use 'table/table-theme' as *;
+@use 'toc/toc-theme' as *;
+
+@mixin module-themes($theme) {
+  @include alert-theme($theme);
+  @include api-list-theme($theme);
+  @include api-symbols-theme($theme);
+  @include buttons-theme($theme);
+  @include callout-theme($theme);
+  @include card-theme($theme);
+  @include code-theme($theme);
+  @include contributor-theme($theme);
+  @include deploy-theme($theme);
+  @include details-theme($theme);
+  @include errors-theme($theme);
+  @include filetree-theme($theme);
+  @include guides-theme($theme);
+  @include heading-anchors-theme($theme);
+  @include hr-theme($theme);
+  @include images-theme($theme);
+  @include label-theme($theme);
+  @include notification-theme($theme);
+  @include presskit-theme($theme);
+  @include resources-theme($theme);
+  @include search-results-theme($theme);
+  @include select-menu-theme($theme);
+  @include table-theme($theme);
+  @include toc-theme($theme);
+}
diff --git a/aio/src/styles/2-modules/alert/_alert-theme.scss b/aio/src/styles/2-modules/alert/_alert-theme.scss
new file mode 100644
index 00000000000..dfc1b39cd57
--- /dev/null
+++ b/aio/src/styles/2-modules/alert/_alert-theme.scss
@@ -0,0 +1,67 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin alert-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  .alert {
+    color: if($is-dark-theme, $offwhite, $darkgray);
+
+    &.is-critical {
+      border-left: 8px solid $brightred;
+      background-color: if($is-dark-theme, $deepgray, rgba($brightred, 0.05));
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: $brightred;
+      }
+    }
+
+    &.is-important {
+      border-left: 8px solid $orange;
+      background-color: if($is-dark-theme, $deepgray, rgba($orange, 0.05));
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: $orange;
+      }
+    }
+
+    &.is-helpful {
+      border-left: 8px solid $blue;
+      background-color: if($is-dark-theme, $deepgray, rgba($blue, 0.05));
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: $blue;
+      }
+    }
+
+    &.archive-warning {
+      background-color: if($is-dark-theme, $deepgray, $darkred);
+
+      * {
+        color: $white;
+      }
+
+      a {
+        color: $white;
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/alert/_alert.scss b/aio/src/styles/2-modules/alert/_alert.scss
new file mode 100644
index 00000000000..5a6dffec734
--- /dev/null
+++ b/aio/src/styles/2-modules/alert/_alert.scss
@@ -0,0 +1,33 @@
+@use '../../constants' as *;
+@use '../../mixins' as *;
+
+.alert {
+    padding: 16px;
+    margin: 24px 0px;
+    @include font-size(14);
+    width: 100%;
+    box-sizing: border-box;
+    clear: both;
+
+    h1, h2, h3, h4, h5, h6 {
+      font-weight: 500;
+    }
+
+    &.archive-warning {
+      border-radius: 4px;
+      margin-bottom: 1rem;
+
+      a {
+        font-weight: bold;
+        text-decoration: underline;
+
+        &:hover {
+          opacity: 0.9;
+        }
+      }
+    }
+
+    > * {
+        margin: 8px 16px;
+    }
+}
diff --git a/aio/src/styles/2-modules/api-list/_api-list-theme.scss b/aio/src/styles/2-modules/api-list/_api-list-theme.scss
new file mode 100644
index 00000000000..8c662c659d5
--- /dev/null
+++ b/aio/src/styles/2-modules/api-list/_api-list-theme.scss
@@ -0,0 +1,51 @@
+@use '../../constants' as *;
+@use '../../mixins' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin api-list-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  aio-api-list {
+    .api-filter {
+      .form-search {
+        input {
+          box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+          border: 1px solid if($is-dark-theme, $darkgray, $white);
+          background-color: if($is-dark-theme, $darkgray, $white);
+          color: if($is-dark-theme, $white, $darkgray);
+
+          @include placeholder {
+            color: if($is-dark-theme, $offwhite, $mediumgray);
+          }
+
+          &:focus {
+            border: 1px solid $blue-400;
+            box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
+          }
+        }
+
+        .material-icons {
+          color: if($is-dark-theme, $lightblue, $blue-grey-600);
+        }
+      }
+    }
+
+    .api-list-container {
+      .api-list {
+        li {
+          a {
+            color: if($is-dark-theme, $cyan, $blue-grey-600);
+
+            &:hover {
+              background: if($is-dark-theme, $darkgray, $blue-grey-50);
+              color: if($is-dark-theme, $offwhite, $blue-500);
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/api-list/_api-list.scss
similarity index 82%
rename from aio/src/styles/2-modules/_api-list.scss
rename to aio/src/styles/2-modules/api-list/_api-list.scss
index e1f572e674b..b2b3fe40f78 100644
--- a/aio/src/styles/2-modules/_api-list.scss
+++ b/aio/src/styles/2-modules/api-list/_api-list.scss
@@ -1,5 +1,5 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 /* API LIST STYLES */
 
@@ -42,11 +42,8 @@ aio-api-list {
       float: left;
 
       input {
-        box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
         box-sizing: border-box;
-        border: 1px solid $white;
         border-radius: 4px;
-        color: $darkgray;
         @include font-size(14);
         @include line-height(32);
         outline: none;
@@ -56,12 +53,6 @@ aio-api-list {
 
         @include placeholder {
           @include font-size(14);
-          color: $mediumgray;
-        }
-
-        &:focus {
-          border: 1px solid $blue-400;
-          box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
         }
 
         @media screen and (max-width: 600px) {
@@ -70,7 +61,6 @@ aio-api-list {
       }
 
       .material-icons {
-        color: $blue-grey-600;
         @include font-size(20);
         left: 8px;
         pointer-events: none;
@@ -130,17 +120,11 @@ aio-api-list {
         white-space: nowrap;
 
         a {
-          color: $blue-grey-600;
           @include line-height(16);
           padding: 0 16px;
           text-decoration: none;
           transition: all .3s;
 
-          &:hover {
-            background: $blue-grey-50;
-            color: $blue-500;
-          }
-
           &.deprecated-api-item {
             text-decoration: line-through;
           }
diff --git a/aio/src/styles/2-modules/api-pages/_api-pages-theme.scss b/aio/src/styles/2-modules/api-pages/_api-pages-theme.scss
new file mode 100644
index 00000000000..ce396ee02a0
--- /dev/null
+++ b/aio/src/styles/2-modules/api-pages/_api-pages-theme.scss
@@ -0,0 +1,59 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin api-pages-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  .api-body {
+    details.overloads {
+      .detail-contents {
+        border: 1px solid $lightgray;
+      }
+
+      summary {
+        .actions {
+          color: $blue;
+        }
+      }
+    }
+
+    table {
+      &.method-table,
+      &.option-table,
+      &.list-table {
+        .with-github-links {
+          .github-links {
+            a {
+              color: $mediumgray;
+
+              .material-icons:hover {
+                color: $blue;
+              }
+            }
+          }
+        }
+      }
+
+      tr {
+        border-bottom: 1px solid $lightgray;
+      }
+    }
+
+    .from-constructor,
+    .read-only-property,
+    .write-only-property {
+      background-color: $lightgray;
+    }
+  }
+
+  .github-links {
+    .material-icons {
+      &:hover {
+        background-color: $mist;
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_api-pages.scss b/aio/src/styles/2-modules/api-pages/_api-pages.scss
similarity index 93%
rename from aio/src/styles/2-modules/_api-pages.scss
rename to aio/src/styles/2-modules/api-pages/_api-pages.scss
index a55c36b348e..f19a064cf0a 100644
--- a/aio/src/styles/2-modules/_api-pages.scss
+++ b/aio/src/styles/2-modules/api-pages/_api-pages.scss
@@ -1,5 +1,5 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 .api-body {
   max-width: 1200px;
@@ -24,7 +24,6 @@
 
     .detail-contents {
       padding: 0;
-      border: 1px solid $lightgray;
       border-radius: 2px;
       box-shadow: none;
 
@@ -43,7 +42,6 @@
       }
       .actions {
         display: flex;
-        color: $blue;
         @include font-size(14);
       }
       .show-all {
@@ -130,11 +128,9 @@
 
         .github-links {
           a {
-            color: $mediumgray;
 
             .material-icons:hover {
               background: none;
-              color: $blue;
             }
           }
         }
@@ -160,8 +156,6 @@
     }
 
     tr {
-      border-bottom: 1px solid $lightgray;
-
       &:last-child {
         border-bottom: none;
       }
@@ -216,7 +210,6 @@
     font-weight: 600;
     @include letter-spacing(0.5);
     font-style: italic;
-    background-color: $lightgray;
     border-radius: 4px;
     padding: 4px 6px;
   }
@@ -250,10 +243,6 @@
     border-radius: 4px;
     padding: 4px;
     @include font-size(20);
-
-    &:hover {
-      background-color: $mist;
-    }
   }
 }
 
diff --git a/aio/src/styles/2-modules/api-symbols/_api-symbols-theme.scss b/aio/src/styles/2-modules/api-symbols/_api-symbols-theme.scss
new file mode 100644
index 00000000000..dfff2295974
--- /dev/null
+++ b/aio/src/styles/2-modules/api-symbols/_api-symbols-theme.scss
@@ -0,0 +1,26 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin api-symbols-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  .symbol {
+    box-shadow: 0 1px 2px rgba($black, 0.24);
+    color: $white;
+
+    // SYMBOL TYPES
+    // Symbol mapping variables in *constants*
+    @each $name, $symbol in $api-symbols {
+      &.#{$name} {
+        background: map-get($symbol, background);
+
+        &:before {
+          content: map-get($symbol, content);
+        }
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/api-symbols/_api-symbols.scss b/aio/src/styles/2-modules/api-symbols/_api-symbols.scss
new file mode 100644
index 00000000000..2319b7a3d20
--- /dev/null
+++ b/aio/src/styles/2-modules/api-symbols/_api-symbols.scss
@@ -0,0 +1,17 @@
+@use '../../constants' as *;
+@use '../../mixins' as *;
+
+/* API SYMBOLS */
+
+/* SYMBOL CLASS */
+
+.symbol {
+  border-radius: 2px;
+  display: inline-block;
+  @include font-size(10);
+  font-weight: 600;
+  @include line-height(16);
+  margin-right: 8px;
+  text-align: center;
+  width: 16px;
+}
diff --git a/aio/src/styles/2-modules/buttons/_buttons-theme.scss b/aio/src/styles/2-modules/buttons/_buttons-theme.scss
new file mode 100644
index 00000000000..75bb60d4167
--- /dev/null
+++ b/aio/src/styles/2-modules/buttons/_buttons-theme.scss
@@ -0,0 +1,70 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin buttons-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  // This rule overrides some Angular Material styles defined for `.mat-button`
+  // (hence we include `.mat-button` in the selector).
+  a.button.mat-button,
+  .button {
+    // COLORS
+
+    &.button-secondary {
+      background: $mediumgray;
+      color: rgba($white, 0.87);
+    }
+
+    &.button-plain {
+      background: $white;
+      color: rgba($darkgray, 0.87);
+    }
+
+    &.button-subtle {
+      background: $mediumgray;
+      color: darken($offwhite, 10%);
+
+      &:hover {
+        color: rgba($white, 0.7);
+      }
+    }
+
+    &.button-blue {
+      background: $blue;
+      color: rgba($white, 0.87);
+
+      &:hover {
+        color: rgba($white, 0.7);
+      }
+    }
+
+    &.button-banner {
+      background: $darkgray;
+      color: rgba($white, 0.87);
+    }
+  }
+
+  .cta-bar {
+    .button {
+      &:hover {
+        color: $offwhite;
+      }
+    }
+  }
+
+  .group-buttons {
+    // This rule overrides some Angular Material styles defined for `.mat-button`
+    // (hence we include `.mat-button` in the selector).
+    a.button.mat-button.filter-button {
+      background-color: rgba($blue, 0.2);
+      &.selected,
+      &:hover {
+        background-color: $blue;
+        color: $white;
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_buttons.scss b/aio/src/styles/2-modules/buttons/_buttons.scss
similarity index 67%
rename from aio/src/styles/2-modules/_buttons.scss
rename to aio/src/styles/2-modules/buttons/_buttons.scss
index cad1b1cbd29..79a656e60a9 100644
--- a/aio/src/styles/2-modules/_buttons.scss
+++ b/aio/src/styles/2-modules/buttons/_buttons.scss
@@ -1,5 +1,5 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 /* Button Styles */
 
@@ -41,42 +41,6 @@ a.button.mat-button,
     @include line-height(56);
     padding: 0px 24px;
   }
-
-
-  // COLORS
-
-  &.button-secondary {
-    background: $mediumgray;
-    color: rgba($white, .87);
-  }
-
-  &.button-plain {
-    background: $white;
-    color: rgba($darkgray, .87);
-  }
-
-  &.button-subtle {
-    background: $mediumgray;
-    color: darken($offwhite, 10%);
-
-    &:hover {
-      color: rgba($white, 0.7);
-    }
-  }
-
-  &.button-blue {
-    background: $blue;
-    color: rgba($white, .87);
-
-    &:hover {
-      color: rgba($white, 0.7);
-    }
-  }
-
-  &.button-banner {
-    background: $darkgray;
-    color: rgba($white, .87);
-  }
 }
 
 .cta-bar {
@@ -88,7 +52,6 @@ a.button.mat-button,
     transition: all .2s ease-in-out;
     &:hover {
         transform: scale(1.1);
-        color: $offwhite;
     }
   }
 }
@@ -100,7 +63,6 @@ a.button.mat-button,
   // This rule overrides some Angular Material styles defined for `.mat-button`
   // (hence we include `.mat-button` in the selector).
   a.button.mat-button.filter-button {
-    background-color: rgba($blue, 0.2);
     border-radius: 4px;
     @include font-size(16);
     @include line-height(48);
@@ -108,12 +70,6 @@ a.button.mat-button,
     padding: 0px 16px;
     width: 168px;
 
-    &.selected,
-    &:hover {
-      background-color: $blue;
-      color: $white;
-    }
-
     @media (max-width: 480px) {
       @include font-size(14);
       width: auto;
diff --git a/aio/src/styles/2-modules/callout/_callout-theme.scss b/aio/src/styles/2-modules/callout/_callout-theme.scss
new file mode 100644
index 00000000000..20014059ad0
--- /dev/null
+++ b/aio/src/styles/2-modules/callout/_callout-theme.scss
@@ -0,0 +1,43 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin callout-theme($theme) {
+    $primary: map-get($theme, primary);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $is-dark-theme: map-get($theme, is-dark);
+
+
+    .callout {      
+        header {
+          color: $white;
+        }
+      
+        &.is-critical {
+          border-color: $brightred;
+          background: rgba($brightred, 0.05);
+      
+          header {
+            background: $brightred;
+          }
+        }
+      
+        &.is-important {
+          border-color: $orange;
+          background: rgba($orange, 0.05);
+      
+          header {
+            background: $amber-700;
+          }
+        }
+      
+        &.is-helpful {
+          border-color: $blue;
+          background: rgba($blue, 0.05);
+      
+          header {
+            background: $blue;
+          }
+        }
+      }
+}
diff --git a/aio/src/styles/2-modules/callout/_callout.scss b/aio/src/styles/2-modules/callout/_callout.scss
new file mode 100644
index 00000000000..fc1986931d6
--- /dev/null
+++ b/aio/src/styles/2-modules/callout/_callout.scss
@@ -0,0 +1,29 @@
+@use '../../constants' as *;
+@use '../../mixins' as *;
+@use '../alert/alert';
+
+.callout {
+  @extend .alert;
+  padding: 0px;
+  border-left: none !important;
+  border-radius: 4px;
+
+  header {
+    @include line-height(24);
+    font-weight: 500;
+    padding: 8px 16px;
+    margin: 0;
+    text-transform: uppercase;
+    border-radius: 4px 4px 0 0;
+  }
+
+  p {
+    padding: 16px;
+    margin: 0px;
+    @include font-size(14);
+  }
+
+  > *:not(:first-child) {
+    padding: 16px 24px;
+  }
+}
diff --git a/aio/src/styles/2-modules/card/_card-theme.scss b/aio/src/styles/2-modules/card/_card-theme.scss
new file mode 100644
index 00000000000..7836c31647f
--- /dev/null
+++ b/aio/src/styles/2-modules/card/_card-theme.scss
@@ -0,0 +1,37 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin card-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  .card-container {
+    .docs-card {
+      background-color: if($is-dark-theme, $darkgray, $white);
+
+      section {
+        color: if($is-dark-theme, $powderblue, $blue);
+      }
+
+      p {
+        color: if($is-dark-theme, $offwhite, $darkgray);
+      }
+
+      .card-footer {
+        color: if($is-dark-theme, $cyan, $darkblue);
+        background-color: if($is-dark-theme, $deepgray, rgba($blue, 0.1));
+        border-top: 0.5px solid if($is-dark-theme, $darkgray, $lightgray);
+
+        a {
+          color: $mediumgray;
+        }
+      }
+    }
+  }
+
+  .card-section {
+    @include card(auto, 90%, if($is-dark-theme, $darkgray, $white));
+  }
+}
diff --git a/aio/src/styles/2-modules/_card.scss b/aio/src/styles/2-modules/card/_card.scss
similarity index 85%
rename from aio/src/styles/2-modules/_card.scss
rename to aio/src/styles/2-modules/card/_card.scss
index fc6db9a64ba..e5c42366e84 100644
--- a/aio/src/styles/2-modules/_card.scss
+++ b/aio/src/styles/2-modules/card/_card.scss
@@ -1,5 +1,5 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 .card-container {
   display: flex;
@@ -23,7 +23,6 @@
     }
 
     section {
-      color: $blue;
       @include font-size(20);
       @include line-height(24);
       margin: 0;
@@ -33,7 +32,6 @@
     }
 
     p {
-      color: $darkgray;
       @include font-size(13);
       @include line-height(24);
       padding: 0 16px;
@@ -42,10 +40,7 @@
     }
 
     .card-footer {
-      color: $darkblue;
-      background-color: rgba($blue, 0.1);
       bottom: 0;
-      border-top: 0.5px solid $lightgray;
       box-sizing: border-box;
       @include line-height(48);
       left: 0;
@@ -54,7 +49,6 @@
       text-align: right;
 
       a {
-        color: $mediumgray;
         @include font-size(13);
       }
     }
diff --git a/aio/src/styles/2-modules/_cli-pages.scss b/aio/src/styles/2-modules/cli-pages/_cli-pages.scss
similarity index 100%
rename from aio/src/styles/2-modules/_cli-pages.scss
rename to aio/src/styles/2-modules/cli-pages/_cli-pages.scss
diff --git a/aio/src/styles/2-modules/code/_code-theme.scss b/aio/src/styles/2-modules/code/_code-theme.scss
new file mode 100644
index 00000000000..a81f7cf5dff
--- /dev/null
+++ b/aio/src/styles/2-modules/code/_code-theme.scss
@@ -0,0 +1,226 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin code-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  code-example {
+    &:not(.no-box) {
+      background-color: if($is-dark-theme, $deepgray, rgb($backgroundgray, 0.2));
+      border: 0.5px solid if($is-dark-theme, $darkgray, $lightgray);
+      color: $darkgray;
+    }
+
+    // TERMINAL / SHELL TEXT STYLES
+    &.code-shell,
+    &[language="sh"],
+    &[language="bash"] {
+      background-color: $darkgray;
+    }
+
+    header {
+      background-color: if($is-dark-theme, $blue-900, $accentblue);
+      color: $offwhite;
+    }
+  }
+
+  code-tabs {
+    .code-tab-group {
+      .mat-tab-label {
+        &:hover {
+          background: rgba(black, 0.04);
+        }
+      }
+    }
+  }
+
+  code-example.avoid header,
+  code-example.avoidFile header {
+    border: 2px solid $anti-pattern;
+    background: $anti-pattern;
+  }
+
+  code-example.avoid,
+  code-example.avoidFile,
+  code-tabs.avoid mat-tab-body,
+  code-tabs.avoidFile mat-tab-body {
+    border: 0.5px solid $anti-pattern;
+  }
+
+  aio-code {
+    pre.prettyprint {
+      code {
+        ol.linenums {
+          color: lighten($mediumgray, 25%);
+
+          li {
+            &::marker {
+              color: lighten($mediumgray, 25%);
+            }
+          }
+        }
+
+        .code-missing {
+          color: $darkred;
+        }
+      }
+
+      .copy-button {
+        color: $blue-grey-200;
+
+        &:hover {
+          color: $mediumgray;
+        }
+      }
+
+      &.lang-sh,
+      &.lang-bash {
+        .copy-button {
+          color: if($is-dark-theme, $blue-grey-200, $lightgray);
+
+          &:hover {
+            color: if($is-dark-theme, $blue-grey-300, $superlightgray);
+          }
+        }
+      }
+    }
+  }
+
+  .sidenav-content {
+    code {
+      a {
+        color: if($is-dark-theme, $cyan, $darkblue);
+      }
+    }
+
+    :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) {
+      > code {
+        background-color: if($is-dark-theme, $darkgray, rgba($lightgray, 0.5));
+        color: if($is-dark-theme, $white, $darkgray);
+      }
+    }
+  }
+
+  // Dark Mode Code Palette
+  $code-lightteal: #17d3ff;
+  $code-lightred: #ffb0b0;
+  $code-lightgreen: #a9ef5f;
+  $code-lightpurple: #d1b4ff;
+  $code-lightorange: #ffd779;
+  $code-lightblue: #98caff;
+  $code-grey: rgba(255, 255, 255, 0.7);
+
+  /* PRETTY PRINTING STYLES for prettify.js. */
+
+  /* The following class|color styles are derived from https://github.com/google/code-prettify/blob/master/src/prettify.css*/
+
+  /* SPAN elements with the classes below are added by prettyprint. */
+  .pln {
+    color: if($is-dark-theme, $white, #000);
+  } /* plain text */
+
+  @media screen {
+    .str {
+      color: if($is-dark-theme, $code-lightgreen, #800);
+    } /* string content */
+    .kwd {
+      color: if($is-dark-theme, $code-lightteal, #00f);
+    } /* a keyword */
+    .com {
+      color: if($is-dark-theme, $code-grey, #060);
+    } /* a comment */
+    .typ {
+      color: if($is-dark-theme, $code-lightred, red);
+    } /* a type name */
+    .lit {
+      color: if($is-dark-theme, $code-lightpurple, #08c);
+    } /* a literal value */
+    /* punctuation, lisp open bracket, lisp close bracket */
+    .pun,
+    .opn,
+    .clo {
+      color: if($is-dark-theme, $code-lightorange, #660);
+    }
+    .tag {
+      color: if($is-dark-theme, $code-lightblue, #008);
+    } /* a markup tag name */
+    .atn {
+      color: if($is-dark-theme, $code-lightpurple, #606);
+    } /* a markup attribute name */
+    .atv {
+      color: if($is-dark-theme, $code-lightorange, #800);
+    } /* a markup attribute value */
+    .dec,
+    .var {
+      color: if($is-dark-theme, $code-lightpurple, #606);
+    } /* a declaration; a variable name */
+    .fun {
+      color: if($is-dark-theme, $code-lightred, red);
+    } /* a function name */
+  }
+
+  /* Use higher contrast and text-weight for printable form. */
+  @media print, projection {
+    .str {
+      color: #060;
+    }
+    .kwd {
+      color: #006;
+      font-weight: bold;
+    }
+    .com {
+      color: #600;
+      font-style: italic;
+    }
+    .typ {
+      color: #404;
+      font-weight: bold;
+    }
+    .lit {
+      color: #044;
+    }
+    .pun,
+    .opn,
+    .clo {
+      color: #440;
+    }
+    .tag {
+      color: #006;
+      font-weight: bold;
+    }
+    .atn {
+      color: #404;
+    }
+    .atv {
+      color: #060;
+    }
+  }
+
+  /* SHELL / TERMINAL CODE BLOCKS */
+
+  code-example {
+    &.code-shell,
+    &[language="sh"],
+    &[language="bash"] {
+      .pnk,
+      .blk,
+      .pln,
+      .otl,
+      .kwd,
+      .typ,
+      .tag,
+      .str,
+      .atv,
+      .atn,
+      .com,
+      .lit,
+      .pun,
+      .dec {
+        color: $codegreen;
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/code/_code.scss b/aio/src/styles/2-modules/code/_code.scss
new file mode 100644
index 00000000000..fe87ab89cb0
--- /dev/null
+++ b/aio/src/styles/2-modules/code/_code.scss
@@ -0,0 +1,152 @@
+@use '../../constants' as *;
+@use '../../mixins' as *;
+
+code-example,
+code-tabs {
+  clear: both;
+  display: block;
+
+  code {
+    overflow: auto;
+  }
+
+  ol {
+    list-style: decimal;
+  }
+
+  .mat-card {
+    padding: 0;
+    border-radius: 5px;
+  }
+}
+
+code-example {
+  &:not(.no-box) {
+    border-radius: 5px;
+    margin: 16px auto;
+  }
+
+  &.no-box {
+    pre.prettyprint {
+      margin: 0;
+    }
+
+    code {
+      background-color: transparent;
+    }
+  }
+
+  code {
+    overflow: auto;
+  }
+
+  header {
+    border-radius: 5px 5px 0 0;
+    @include font-size(16);
+    padding: 8px 16px;
+  }
+}
+
+code-tabs {
+  margin: 16px 0;
+
+  .code-tab-group {
+    .mat-tab-body {
+      overflow-y: hidden;
+
+      .mat-tab-body-content {
+        height: auto;
+        transform: none;
+
+        .fadeIn {
+          animation: opacity 2s ease-in;
+        }
+      }
+    }
+  }
+}
+
+aio-code {
+  pre.prettyprint {
+    position: relative;
+    display: flex;
+    min-height: 32px;
+    margin: 16px 24px;
+    white-space: pre-wrap;
+    align-items: center;
+
+    code {
+      a {
+        color: inherit;
+      }
+
+      span {
+        @include line-height(24);
+      }
+
+      ol.linenums {
+        margin: 0;
+
+        li {
+          margin: 0;
+          font-family: $code-font;
+          font-size: 90%;
+          @include line-height(24);
+        }
+      }
+    }
+
+    .copy-button {
+      position: absolute;
+      top: -7px;
+      right: -19px;
+      padding: 0;
+      overflow: visible; // This is required for the button to be displayed correctly in IE11.
+
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+    }
+  }
+}
+
+.sidenav-content {
+  code {
+    a {
+      font-size: inherit;
+      font-weight: inherit;
+    }
+  }
+
+  :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) {
+    > code {
+      border-radius: 4px;
+      padding: 0 4px;
+    }
+
+    &:not(a) > code {
+      padding: 4px;
+    }
+  }
+
+  .page-guide-cheatsheet & {
+    td:first-of-type,
+    th {
+      code {
+        background-color: inherit;
+        padding: 0;
+        white-space: pre-wrap;
+      }
+    }
+  }
+
+  .code-anchor {
+    cursor: pointer;
+    text-decoration: none;
+    font-size: inherit;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_contribute.scss b/aio/src/styles/2-modules/contribute/_contribute.scss
similarity index 100%
rename from aio/src/styles/2-modules/_contribute.scss
rename to aio/src/styles/2-modules/contribute/_contribute.scss
diff --git a/aio/src/styles/2-modules/contributor/_contributor-theme.scss b/aio/src/styles/2-modules/contributor/_contributor-theme.scss
new file mode 100644
index 00000000000..3caa56739da
--- /dev/null
+++ b/aio/src/styles/2-modules/contributor/_contributor-theme.scss
@@ -0,0 +1,29 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin contributor-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  aio-contributor {
+    background: mat-color($background, background);
+
+    .contributor-info {
+      background: rgba($darkgray, 0.5);
+
+      .info-item {
+        color: $white;
+
+        &:hover {
+          color: $lightgray;
+        }
+      }
+    }
+
+    .contributor-image {
+      border: 2px solid $lightgray;
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_contributor.scss b/aio/src/styles/2-modules/contributor/_contributor.scss
similarity index 94%
rename from aio/src/styles/2-modules/_contributor.scss
rename to aio/src/styles/2-modules/contributor/_contributor.scss
index 3ee617f6893..1a7627fb9bf 100644
--- a/aio/src/styles/2-modules/_contributor.scss
+++ b/aio/src/styles/2-modules/contributor/_contributor.scss
@@ -1,5 +1,5 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 aio-contributor-list {
   .contributor-group {
@@ -21,7 +21,6 @@ aio-contributor-list {
 }
 
 aio-contributor {
-  background: $white;
   margin: 8px;
   position: relative;
   cursor: pointer;
@@ -46,7 +45,6 @@ aio-contributor {
   }
 
   .contributor-info {
-    background: rgba($darkgray, 0.5);
     height: 168px;
     width: 168px;
     display: flex;
@@ -59,7 +57,6 @@ aio-contributor {
     border-radius: 50%;
 
     .info-item {
-      color: $white;
       display: flex;
       @include font-size(14);
       font-weight: 500;
@@ -67,7 +64,6 @@ aio-contributor {
       padding: 0;
 
       &:hover {
-        color: $lightgray;
         text-decoration: none;
       }
 
@@ -157,7 +153,6 @@ aio-contributor {
     background-size: cover;
     background-position: center;
     margin: 8px auto;
-    border: 2px solid $lightgray;
     transition: all .2s ease-in-out;
   }
 
diff --git a/aio/src/styles/2-modules/_deploy-theme.scss b/aio/src/styles/2-modules/deploy-theme/_deploy-theme.scss
similarity index 80%
rename from aio/src/styles/2-modules/_deploy-theme.scss
rename to aio/src/styles/2-modules/deploy-theme/_deploy-theme.scss
index ba4a85c2b24..40b785ab06b 100644
--- a/aio/src/styles/2-modules/_deploy-theme.scss
+++ b/aio/src/styles/2-modules/deploy-theme/_deploy-theme.scss
@@ -1,5 +1,5 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 aio-shell.mode-archive {
   @include deploy-theme($blue-grey-900, $blue-grey-400);
diff --git a/aio/src/styles/2-modules/details/_details-theme.scss b/aio/src/styles/2-modules/details/_details-theme.scss
new file mode 100644
index 00000000000..c52300971b2
--- /dev/null
+++ b/aio/src/styles/2-modules/details/_details-theme.scss
@@ -0,0 +1,17 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin details-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  details {
+    box-shadow: 0 1px 4px 0 rgba($black, 0.37);
+
+    > summary {
+      color: $black;
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_details.scss b/aio/src/styles/2-modules/details/_details.scss
similarity index 89%
rename from aio/src/styles/2-modules/_details.scss
rename to aio/src/styles/2-modules/details/_details.scss
index 6d182a1a7d0..44774fbe892 100644
--- a/aio/src/styles/2-modules/_details.scss
+++ b/aio/src/styles/2-modules/details/_details.scss
@@ -1,5 +1,5 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 /*
  * General styling to make detail/summary tags look a bit more material
@@ -16,14 +16,11 @@
  */
 
 details {
-  box-shadow: 0 1px 4px 0 rgba($black, 0.37);
-
   > summary {
     cursor: pointer;
     @include font-size(16);
     position: relative;
     padding: 16px 24px;
-    color: $black;
     height: 16px;
     display: block; // Remove the built in details marker in FF
     overflow: hidden;
diff --git a/aio/src/styles/2-modules/errors/_errors-theme.scss b/aio/src/styles/2-modules/errors/_errors-theme.scss
new file mode 100644
index 00000000000..b95a693f7d0
--- /dev/null
+++ b/aio/src/styles/2-modules/errors/_errors-theme.scss
@@ -0,0 +1,32 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin errors-theme($theme) {
+    $primary: map-get($theme, primary);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $is-dark-theme: map-get($theme, is-dark);
+
+    .error-list {
+        li {
+            .symbol {
+                &.runtime {
+                    background: $green-500;
+                }
+
+                &.compiler {
+                    background: $blue-500;
+                }
+            }
+
+            a {
+                color: $blue-grey-600;
+
+                &:hover {
+                    background: $blue-grey-50;
+                    color: $blue-500;
+                }
+            }
+        }
+    }
+}
diff --git a/aio/src/styles/2-modules/_errors.scss b/aio/src/styles/2-modules/errors/_errors.scss
similarity index 69%
rename from aio/src/styles/2-modules/_errors.scss
rename to aio/src/styles/2-modules/errors/_errors.scss
index dd937d4f6ae..b42519b2399 100644
--- a/aio/src/styles/2-modules/_errors.scss
+++ b/aio/src/styles/2-modules/errors/_errors.scss
@@ -1,5 +1,5 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 .error-list {
   display: grid;
@@ -22,16 +22,6 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 
-    .symbol {
-      &.runtime {
-        background: $green-500;
-      }
-
-      &.compiler {
-        background: $blue-500;
-      }
-    }
-
     .symbol.runtime:before {
       content: "R";
     }
@@ -41,7 +31,6 @@
     }
 
     a {
-      color: $blue-grey-600;
       display: inline-block;
       @include line-height(16);
       padding: 0 16px 0;
@@ -49,11 +38,6 @@
       transition: all .3s;
       overflow: hidden;
       text-overflow: ellipsis;
-
-      &:hover {
-        background: $blue-grey-50;
-        color: $blue-500;
-      }
     }
   }
 }
diff --git a/aio/src/styles/2-modules/_features.scss b/aio/src/styles/2-modules/features/_features.scss
similarity index 94%
rename from aio/src/styles/2-modules/_features.scss
rename to aio/src/styles/2-modules/features/_features.scss
index aa13fb2b832..30630bce534 100644
--- a/aio/src/styles/2-modules/_features.scss
+++ b/aio/src/styles/2-modules/features/_features.scss
@@ -1,5 +1,5 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 // FEATURES MARKETING PAGE SPECIFIC STYLES
 
diff --git a/aio/src/styles/2-modules/filetree/_filetree-theme.scss b/aio/src/styles/2-modules/filetree/_filetree-theme.scss
new file mode 100644
index 00000000000..a825bf91ed0
--- /dev/null
+++ b/aio/src/styles/2-modules/filetree/_filetree-theme.scss
@@ -0,0 +1,26 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin filetree-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  .filetree {
+    background: $white;
+    border: 4px solid $lightgray;
+
+    .file {
+      color: $darkgray;
+    }
+
+    .children {
+      .file {
+        &:before {
+          border-color: $lightgray;
+        }
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_filetree.scss b/aio/src/styles/2-modules/filetree/_filetree.scss
similarity index 78%
rename from aio/src/styles/2-modules/_filetree.scss
rename to aio/src/styles/2-modules/filetree/_filetree.scss
index 32e1fcde9c5..664926fec3b 100644
--- a/aio/src/styles/2-modules/_filetree.scss
+++ b/aio/src/styles/2-modules/filetree/_filetree.scss
@@ -1,9 +1,7 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 .filetree {
-  background: $white;
-  border: 4px solid $lightgray;
   border-radius: 4px;
   margin: 0 0 24px 0;
   padding: 16px 32px;
@@ -12,7 +10,6 @@
     display: block;
     @include letter-spacing(0.3);
     @include line-height(32);
-    color: $darkgray;
   }
 
   .children {
@@ -32,7 +29,6 @@
         position: absolute;
         border-width: 0 0 1px 1px;
         border-style: solid;
-        border-color: $lightgray;
         border-radius: 0 0 0 3px;
       }
     }
diff --git a/aio/src/styles/2-modules/guides/_guides-theme.scss b/aio/src/styles/2-modules/guides/_guides-theme.scss
new file mode 100644
index 00000000000..38d31653b56
--- /dev/null
+++ b/aio/src/styles/2-modules/guides/_guides-theme.scss
@@ -0,0 +1,13 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin guides-theme($theme) {
+    $primary: map-get($theme, primary);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $is-dark-theme: map-get($theme, is-dark);
+
+    .reviewed {
+        color: lighten($darkgray, 10);
+      }
+}
diff --git a/aio/src/styles/2-modules/_guides.scss b/aio/src/styles/2-modules/guides/_guides.scss
similarity index 50%
rename from aio/src/styles/2-modules/_guides.scss
rename to aio/src/styles/2-modules/guides/_guides.scss
index e4ff04ade62..a2a587c558f 100644
--- a/aio/src/styles/2-modules/_guides.scss
+++ b/aio/src/styles/2-modules/guides/_guides.scss
@@ -1,8 +1,7 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 .reviewed {
-  color: lighten($darkgray, 10);
   @include font-size(13);
   font-style: italic;
   text-align: right;
diff --git a/aio/src/styles/2-modules/heading-anchors/_heading-anchors-theme.scss b/aio/src/styles/2-modules/heading-anchors/_heading-anchors-theme.scss
new file mode 100644
index 00000000000..31efd5ecd2a
--- /dev/null
+++ b/aio/src/styles/2-modules/heading-anchors/_heading-anchors-theme.scss
@@ -0,0 +1,22 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin heading-anchors-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  .sidenav-content {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      .header-link {
+        color: $mediumgray;
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_heading-anchors.scss b/aio/src/styles/2-modules/heading-anchors/_heading-anchors.scss
similarity index 85%
rename from aio/src/styles/2-modules/_heading-anchors.scss
rename to aio/src/styles/2-modules/heading-anchors/_heading-anchors.scss
index 5b1027760ed..b075c62af7b 100644
--- a/aio/src/styles/2-modules/_heading-anchors.scss
+++ b/aio/src/styles/2-modules/heading-anchors/_heading-anchors.scss
@@ -1,10 +1,9 @@
-@use '../constants' as *;
+@use '../../constants' as *;
 
 .sidenav-content {
   h1, h2, h3, h4, h5, h6 {
 
     .header-link {
-      color: $mediumgray;
       margin: 0 6px;
       text-decoration: none;
       user-select: none;
diff --git a/aio/src/styles/2-modules/hr/_hr-theme.scss b/aio/src/styles/2-modules/hr/_hr-theme.scss
new file mode 100644
index 00000000000..ab6e7e2b874
--- /dev/null
+++ b/aio/src/styles/2-modules/hr/_hr-theme.scss
@@ -0,0 +1,13 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin hr-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  hr {
+    background: if($is-dark-theme, $mediumgray, $lightgray);
+  }
+}
diff --git a/aio/src/styles/2-modules/hr/_hr.scss b/aio/src/styles/2-modules/hr/_hr.scss
new file mode 100644
index 00000000000..4f34fc4f598
--- /dev/null
+++ b/aio/src/styles/2-modules/hr/_hr.scss
@@ -0,0 +1,6 @@
+@use '../../constants' as *;
+
+hr {
+  border: none;
+  height: 1px;
+}
diff --git a/aio/src/styles/2-modules/images/_images-theme.scss b/aio/src/styles/2-modules/images/_images-theme.scss
new file mode 100644
index 00000000000..c49dc7b20f2
--- /dev/null
+++ b/aio/src/styles/2-modules/images/_images-theme.scss
@@ -0,0 +1,20 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin images-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  .content {
+    .lightbox {
+      border: 1px solid if($is-dark-theme, $darkgray, $lightgray);
+      background-color: if($is-dark-theme, $deepgray, $lightboxgray);
+
+      img {
+        background-color: $white;
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_images.scss b/aio/src/styles/2-modules/images/_images.scss
similarity index 87%
rename from aio/src/styles/2-modules/_images.scss
rename to aio/src/styles/2-modules/images/_images.scss
index 7f945214fbf..e528a2c6a88 100644
--- a/aio/src/styles/2-modules/_images.scss
+++ b/aio/src/styles/2-modules/images/_images.scss
@@ -1,4 +1,4 @@
-@use '../constants' as *;
+@use '../../constants' as *;
 
 .content {
   img {
@@ -39,15 +39,12 @@
     margin-top: 14px;
     margin-bottom: 14px;
     border-radius: 1px;
-    background: $white;
-    border: 1px solid $lightgray;
     padding: 32px;
     box-sizing: border-box;
     display: flex;
     justify-content: center;
     box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);
     margin: 16px 0;
-    background-color: $lightboxgray;
     width: 100%;
     display: flex;
     justify-content: center;
@@ -59,7 +56,6 @@
       margin: auto;
       box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);
       border-radius: 4px;
-      background-color: $white;
     }
   }
 }
diff --git a/aio/src/styles/2-modules/label/_label-theme.scss b/aio/src/styles/2-modules/label/_label-theme.scss
new file mode 100644
index 00000000000..b2071e93f62
--- /dev/null
+++ b/aio/src/styles/2-modules/label/_label-theme.scss
@@ -0,0 +1,41 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin label-theme($theme) {
+    $primary: map-get($theme, primary);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $is-dark-theme: map-get($theme, is-dark);
+
+    .api-header label {
+        color: $white;
+
+        &.api-status-label {
+          background-color: $mediumgray;
+      
+          &.deprecated, &.security, &.impure-pipe {
+            background-color: $brightred;
+          }
+        }
+      
+        &.api-type-label {
+          background-color: $accentblue;
+      
+          @each $name, $symbol in $api-symbols {
+            &.#{$name} {
+              background: map-get($symbol, background);
+            }
+          }
+        }
+      
+        &.page-label {
+          background-color: $mist;
+          color: $mediumgray;
+        }
+      
+        &.property-type-label {
+          background-color: $darkgray;
+          color: $white;
+        }
+      }
+}
diff --git a/aio/src/styles/2-modules/_label.scss b/aio/src/styles/2-modules/label/_label.scss
similarity index 52%
rename from aio/src/styles/2-modules/_label.scss
rename to aio/src/styles/2-modules/label/_label.scss
index ce3195172f8..4ac6edc8583 100644
--- a/aio/src/styles/2-modules/_label.scss
+++ b/aio/src/styles/2-modules/label/_label.scss
@@ -1,12 +1,11 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 .api-header label {
   border-radius: 4px;
   padding: 2px 10px;
   display: inline;
   @include font-size(12);
-  color: $white;
   margin-right: 8px;
   font-weight: 500;
   text-transform: uppercase;
@@ -16,31 +15,11 @@
     margin: 4px 0;
   }
 
-  &.api-status-label {
-    background-color: $mediumgray;
-
-    &.deprecated, &.security, &.impure-pipe {
-      background-color: $brightred;
-    }
-  }
-
-  &.api-type-label {
-    background-color: $accentblue;
-
-    @each $name, $symbol in $api-symbols {
-      &.#{$name} {
-        background: map-get($symbol, background);
-      }
-    }
-  }
-
   &.page-label {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    background-color: $mist;
-    color: $mediumgray;
     margin-bottom: 8px;
     width: 140px;
 
@@ -51,8 +30,6 @@
 
   &.property-type-label {
     @include font-size(12);
-    background-color: $darkgray;
-    color: $white;
     text-transform: none;
   }
 }
diff --git a/aio/src/styles/2-modules/notification/_notification-theme.scss b/aio/src/styles/2-modules/notification/_notification-theme.scss
new file mode 100644
index 00000000000..273a54d5bcd
--- /dev/null
+++ b/aio/src/styles/2-modules/notification/_notification-theme.scss
@@ -0,0 +1,25 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin notification-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  aio-notification {
+    background: $darkgray;
+
+    .close-button {
+      background: $darkgray;
+    }
+
+    .content {
+      background: $darkgray;
+
+      .action-button {
+        background: $brightred;
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_notification.scss b/aio/src/styles/2-modules/notification/_notification.scss
similarity index 93%
rename from aio/src/styles/2-modules/_notification.scss
rename to aio/src/styles/2-modules/notification/_notification.scss
index 46c7296c27c..d36d7aacb29 100644
--- a/aio/src/styles/2-modules/_notification.scss
+++ b/aio/src/styles/2-modules/notification/_notification.scss
@@ -1,5 +1,5 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 $notificationHeight: 56px;
 
@@ -11,7 +11,6 @@ $notificationHeight: 56px;
 }
 
 aio-notification {
-  background: $darkgray;
   display: flex;
   position: relative;
   align-items: center;
@@ -30,12 +29,10 @@ aio-notification {
     right: 0;
     width: $notificationHeight;
     height: $notificationHeight;
-    background: $darkgray;
   }
 
   .content {
     max-width: calc(100% - #{$notificationHeight});
-    background: $darkgray;
     text-transform: none;
     padding: 0;
 
@@ -57,7 +54,6 @@ aio-notification {
     }
 
     .action-button {
-      background: $brightred;
       border-radius: 15px;
       text-transform: uppercase;
       padding: 0 10px;
diff --git a/aio/src/styles/2-modules/presskit/_presskit-theme.scss b/aio/src/styles/2-modules/presskit/_presskit-theme.scss
new file mode 100644
index 00000000000..37e92be5b4d
--- /dev/null
+++ b/aio/src/styles/2-modules/presskit/_presskit-theme.scss
@@ -0,0 +1,31 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin presskit-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  .presskit-container {
+    .presskit-section {
+      &:not(:first-child) {
+        border-top: 1px solid $lightgray;
+      }
+
+      .presskit-icon-group {
+        .presskit-icon-item {
+          .presskit-image-container {
+            .transparent-img {
+              background-color: $white;
+
+              &-inverse {
+                background-color: if($is-dark-theme, mat-color($background, background), $deepgray);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_presskit.scss b/aio/src/styles/2-modules/presskit/_presskit.scss
similarity index 90%
rename from aio/src/styles/2-modules/_presskit.scss
rename to aio/src/styles/2-modules/presskit/_presskit.scss
index 8aa79605c58..f862bbdfe24 100644
--- a/aio/src/styles/2-modules/_presskit.scss
+++ b/aio/src/styles/2-modules/presskit/_presskit.scss
@@ -1,5 +1,5 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 .presskit-container {
   padding: 0 32px 32px 32px;
@@ -11,7 +11,6 @@
 
   .presskit-section {
     &:not(:first-child) {
-      border-top: 1px solid $lightgray;
       margin-top: 4rem;
       padding-top: 2rem;
     }
@@ -42,7 +41,6 @@
           }
 
           .transparent-img {
-            background-color: $deepgray;
             border-radius: 50%;
           }
         }
diff --git a/aio/src/styles/2-modules/_progress-bar.scss b/aio/src/styles/2-modules/progress-bar/_progress-bar.scss
similarity index 100%
rename from aio/src/styles/2-modules/_progress-bar.scss
rename to aio/src/styles/2-modules/progress-bar/_progress-bar.scss
diff --git a/aio/src/styles/2-modules/resources/_resources-theme.scss b/aio/src/styles/2-modules/resources/_resources-theme.scss
new file mode 100644
index 00000000000..a7f9bbd01e6
--- /dev/null
+++ b/aio/src/styles/2-modules/resources/_resources-theme.scss
@@ -0,0 +1,24 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin resources-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  aio-resource-list {
+    .subcategory-title {
+      background-color: if($is-dark-theme, $deepgray, $mist);
+    }
+
+    .resource-row-link {
+      background-color: if($is-dark-theme, $darkgray, $white);
+
+      &:hover {
+        border-color: if($is-dark-theme, rgba($lightblue, 0.5), rgba($blue, 0.5));
+        box-shadow: 0 8px 8px rgb(1 131 163 / 24%), 0 0 8px rgb(1 67 163 / 12%), 0 6px 18px rgb(43 133 231 / 12%);
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_resources.scss b/aio/src/styles/2-modules/resources/_resources.scss
similarity index 74%
rename from aio/src/styles/2-modules/_resources.scss
rename to aio/src/styles/2-modules/resources/_resources.scss
index cde185ea512..35cdd881d14 100644
--- a/aio/src/styles/2-modules/_resources.scss
+++ b/aio/src/styles/2-modules/resources/_resources.scss
@@ -1,5 +1,5 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 aio-resource-list {
   .showcase {
@@ -23,7 +23,6 @@ aio-resource-list {
   .subcategory-title {
     padding: 16px 23px;
     margin: 0;
-    background-color: $mist;
   }
 
   .resource-row-link {
@@ -35,9 +34,7 @@ aio-resource-list {
 
     &:hover {
       text-decoration: none;
-      border-color: rgba($blue, 0.5);
       border-radius: 4px;
-      box-shadow: 0 8px 8px rgba(1, 67, 163, .24), 0 0 8px rgba(1, 67, 163, .12), 0 6px 18px rgba(43, 133, 231, .12);
       transform: translateY(-2px);
     }
   }
diff --git a/aio/src/styles/2-modules/search-results/_search-results-theme.scss b/aio/src/styles/2-modules/search-results/_search-results-theme.scss
new file mode 100644
index 00000000000..07421eed8df
--- /dev/null
+++ b/aio/src/styles/2-modules/search-results/_search-results-theme.scss
@@ -0,0 +1,66 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin search-results-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  aio-search-results {
+    .search-results {
+      background-color: $darkgray;
+      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
+
+      .search-area {
+        .search-section-header {
+          color: $white;
+        }
+
+        ul {
+          .search-result-item {
+            color: $lightgray;
+
+            &:hover {
+              color: $white;
+            }
+          }
+        }
+      }
+
+      .no-results {
+        color: $white;
+      }
+
+      a {
+        color: $white;
+      }
+    }
+
+    &.embedded {
+      .search-results {
+        .search-area {
+          .search-section-header {
+            color: $darkgray;
+          }
+
+          .search-result-item {
+            color: lighten($darkgray, 10);
+
+            &:hover {
+              color: $accentblue;
+            }
+          }
+        }
+
+        .no-results {
+          color: $darkgray;
+        }
+
+        a {
+          color: $blue;
+        }
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_search-results.scss b/aio/src/styles/2-modules/search-results/_search-results.scss
similarity index 69%
rename from aio/src/styles/2-modules/_search-results.scss
rename to aio/src/styles/2-modules/search-results/_search-results.scss
index 957425bac8d..522b9e187b9 100644
--- a/aio/src/styles/2-modules/_search-results.scss
+++ b/aio/src/styles/2-modules/search-results/_search-results.scss
@@ -1,5 +1,5 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 aio-search-results {
   z-index: 10;
@@ -17,8 +17,6 @@ aio-search-results {
     left: 0;
     right: 0;
     z-index: 5;
-    background-color: $darkgray;
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
     box-sizing: border-box;
 
     .search-area {
@@ -30,7 +28,6 @@ aio-search-results {
         font-weight: 400;
         margin: 10px 0px 5px;
         text-transform: uppercase;
-        color: $white;
       }
 
       ul {
@@ -44,7 +41,6 @@ aio-search-results {
         .search-result-item {
           @include font-size(14);
           @include line-height(24);
-          color: $lightgray;
           display: inline-block;
           font-weight: normal;
           padding: 0.6rem 0;
@@ -52,10 +48,6 @@ aio-search-results {
           &a {
             text-decoration: none;
           }
-
-          &:hover {
-            color: $white;
-          }
         }
 
         &.priority-pages {
@@ -69,13 +61,11 @@ aio-search-results {
     }
 
     .no-results {
-      color: $white;
       text-align: center;
       margin: 16px;
     }
 
     a {
-      color: $white;
       font-weight: 500;
     }
 
@@ -92,28 +82,6 @@ aio-search-results {
       position: relative;
       background-color: inherit;
       box-shadow: none;
-
-      .search-area {
-        .search-section-header {
-          color: $darkgray;
-        }
-
-        .search-result-item {
-          color: lighten($darkgray, 10);
-
-          &:hover {
-            color: $accentblue;
-          }
-        }
-      }
-
-      .no-results {
-        color: $darkgray;
-      }
-
-      a {
-        color: $blue;
-      }
     }
   }
 }
diff --git a/aio/src/styles/2-modules/select-menu/_select-menu-theme.scss b/aio/src/styles/2-modules/select-menu/_select-menu-theme.scss
new file mode 100644
index 00000000000..6e6d6e38888
--- /dev/null
+++ b/aio/src/styles/2-modules/select-menu/_select-menu-theme.scss
@@ -0,0 +1,43 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin select-menu-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  aio-select {
+    .form-select-button {
+      background: if($is-dark-theme, $darkgray, $white);
+      box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+      border: 1px solid if($is-dark-theme, $darkgray, $white);
+      color: if($is-dark-theme, $blue-grey-200, $blue-grey-600);
+
+      &:focus {
+        border: 1px solid $blue-400;
+        box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
+      }
+
+      &[disabled] {
+        color: lightgrey;
+      }
+    }
+
+    .form-select-dropdown {
+      background: mat-color($background, background);
+      box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
+
+      li {
+        &:hover {
+          background-color: if($is-dark-theme, $darkgray, $blue-grey-50);
+          color: f($is-dark-theme, $blue-grey-400, $blue-grey-500);
+        }
+
+        &.selected {
+          background-color: if($is-dark-theme, $darkgray, $blue-grey-100);
+        }
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_select-menu.scss b/aio/src/styles/2-modules/select-menu/_select-menu.scss
similarity index 65%
rename from aio/src/styles/2-modules/_select-menu.scss
rename to aio/src/styles/2-modules/select-menu/_select-menu.scss
index ab9b8e1030c..bbdd86285e7 100644
--- a/aio/src/styles/2-modules/_select-menu.scss
+++ b/aio/src/styles/2-modules/select-menu/_select-menu.scss
@@ -1,5 +1,5 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 /* SELECT MENU */
 
@@ -9,12 +9,8 @@ aio-select {
   }
 
   .form-select-button {
-    background: $white;
-    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
     box-sizing: border-box;
-    border: 1px solid $white;
     border-radius: 4px;
-    color: $blue-grey-600;
     @include font-size(14);
     font-weight: 400;
     @include line-height(32);
@@ -33,20 +29,12 @@ aio-select {
       text-transform: capitalize;
     }
 
-    &:focus {
-      border: 1px solid $blue-400;
-      box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
-    }
-
     &[disabled] {
-      color: lightgrey;
       cursor: not-allowed;
     }
   }
 
   .form-select-dropdown {
-    background: $white;
-    box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
     border-radius: 4px;
     list-style-type: none;
     margin: 0;
@@ -63,7 +51,7 @@ aio-select {
       margin: 0;
       padding: 4px 16px 4px 40px;
       position: relative;
-      transition: all .2s;
+      transition: all 0.2s;
       border: 1px solid transparent;
 
       &:first-child {
@@ -74,15 +62,6 @@ aio-select {
         border-radius: 0 0 4px 4px;
       }
 
-      &:hover {
-        background: $blue-grey-50;
-        color: $blue-500;
-      }
-
-      &.selected {
-        background-color: $blue-grey-100;
-      }
-
       .symbol {
         left: 16px;
         position: absolute;
diff --git a/aio/src/styles/2-modules/table/_table-theme.scss b/aio/src/styles/2-modules/table/_table-theme.scss
new file mode 100644
index 00000000000..450449fbb68
--- /dev/null
+++ b/aio/src/styles/2-modules/table/_table-theme.scss
@@ -0,0 +1,52 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin table-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  table {
+    box-shadow: 0 2px 2px rgba($mediumgray, 0.24), 0 0 2px rgba(if($is-dark-theme, $white, $black), 0.12);
+    background-color: if($is-dark-theme, mat-color($background, background), $white);
+
+    thead > {
+      tr > th {
+        background: if($is-dark-theme, $deepgray, rgba($lightgray, 0.2));
+        border-bottom: 1px solid if($is-dark-theme, $darkgray, $lightgray);
+        color: if($is-dark-theme, $white, $darkgray);
+      }
+    }
+
+    tbody > tr > {
+      th,
+      td {
+        border-bottom: 1px solid if($is-dark-theme, $darkgray, $lightgray);
+      }
+
+      td {
+        tr td:first-child {
+          @media (max-width: 480px) {
+            background-color: $lightgray;
+          }
+        }
+      }
+
+      th {
+        background: if($is-dark-theme, $deepgray, rgba($lightgray, 0.2));
+        &:not(:last-child) {
+          border-right: 1px solid if($is-dark-theme, $darkgray, $lightgray);
+        }
+      }
+    }
+
+    tbody > tr {
+      &:last-child td {
+        @media (max-width: 480px) {
+          border-bottom: 1px solid if($is-dark-theme, $deepgray, $lightgray);
+        }
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_table.scss b/aio/src/styles/2-modules/table/_table.scss
similarity index 71%
rename from aio/src/styles/2-modules/_table.scss
rename to aio/src/styles/2-modules/table/_table.scss
index 8d3041514da..4dd73496004 100644
--- a/aio/src/styles/2-modules/_table.scss
+++ b/aio/src/styles/2-modules/table/_table.scss
@@ -1,11 +1,9 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 table {
   margin: 24px 0px;
-  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
   border-radius: 2px;
-  background: $white;
 
   &.is-full-width {
     width: 100%;
@@ -25,9 +23,6 @@ table {
     }
 
     tr > th {
-      background: rgba($lightgray, 0.2);
-      border-bottom: 1px solid $lightgray;
-      color: $darkgray;
       @include font-size(12);
       font-weight: 500;
       padding: 8px 24px;
@@ -40,7 +35,6 @@ table {
   tbody > tr > {
     th,
     td {
-      border-bottom: 1px solid $lightgray;
       padding: 16px;
       text-align: left;
       @include line-height(24);
@@ -57,17 +51,9 @@ table {
 
     td {
       @include letter-spacing(0.3);
-
-      tr td:first-child {
-        @media (max-width: 480px) {
-          background-color: $lightgray;
-        }
-      }
     }
 
     th {
-      background: rgba($lightgray, 0.2);
-      border-right: 1px solid $lightgray;
       font-weight: 600;
       max-width: 100px;
     }
@@ -76,10 +62,6 @@ table {
   tbody > tr {
     &:last-child td {
       border: none;
-
-      @media (max-width: 480px) {
-        border-bottom: 1px solid $lightgray;
-      }
     }
   }
 }
diff --git a/aio/src/styles/2-modules/toc/_toc-theme.scss b/aio/src/styles/2-modules/toc/_toc-theme.scss
new file mode 100644
index 00000000000..d26d22204a1
--- /dev/null
+++ b/aio/src/styles/2-modules/toc/_toc-theme.scss
@@ -0,0 +1,95 @@
+@use '../../constants' as *;
+@use '~@angular/material/theming' as *;
+
+@mixin toc-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  aio-toc {
+    .toc-inner {
+      .toc-heading {
+        &.secondary {
+          &:hover {
+            color: $accentblue;
+          }
+        }
+      }
+
+      button {
+        &.toc-heading,
+        &.toc-more-items {
+          &.embedded:focus {
+            background: if($is-dark-theme, $darkgray, $lightgray);
+            color: if($is-dark-theme, $white, $mediumgray);
+          }
+        }
+
+        &.toc-heading {
+          &:hover:not(.embedded) {
+            color: $accentblue;
+          }
+        }
+
+        &.toc-more-items {
+          color: $mediumgray;
+
+          &:hover {
+            color: $accentblue;
+          }
+        }
+      }
+
+      ul.toc-list {
+        li {
+          &.h1:after {
+            background: if($is-dark-theme, $mediumgray, $lightgray);
+          }
+
+          a {
+            color: if($is-dark-theme, $white, lighten($darkgray, 10));
+          }
+
+          &:hover {
+            * {
+              color: if($is-dark-theme, $lightblue, $accentblue);
+            }
+          }
+
+          &.active {
+            * {
+              color: if($is-dark-theme, $cyan, $blue);
+            }
+
+            a:before {
+              background: if($is-dark-theme, $cyan, $blue);
+            }
+          }
+        }
+
+        &:not(.embedded) li {
+          &:before {
+            border-left-color: if($is-dark-theme, $darkgray, $lightgray);
+          }
+
+          &:not(.active):hover {
+            a:before {
+              background: $lightgray;
+            }
+          }
+        }
+      }
+    }
+
+    &.embedded {
+      .toc-inner {
+        .toc-heading {
+          &.secondary {
+            color: mat-color($foreground, text);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/aio/src/styles/2-modules/_toc.scss b/aio/src/styles/2-modules/toc/_toc.scss
similarity index 82%
rename from aio/src/styles/2-modules/_toc.scss
rename to aio/src/styles/2-modules/toc/_toc.scss
index cd4d38026c0..efd581f80b6 100644
--- a/aio/src/styles/2-modules/_toc.scss
+++ b/aio/src/styles/2-modules/toc/_toc.scss
@@ -1,15 +1,14 @@
-@use '../constants' as *;
-@use '../mixins' as *;
+@use '../../constants' as *;
+@use '../../mixins' as *;
 
 $tocItemLineHeight: 24;
 $tocItemTopPadding: 9;
-$tocMarkerRailSize: 1;
 $tocMarkerSize: 6;
+$tocMarkerRailSize: 1;
 
-@mixin tocMarker($color) {
-  background: $color;
+@mixin tocMarker() {
   border-radius: 50%;
-  content: '';
+  content: "";
   height: #{$tocMarkerSize}px;
   left: -#{($tocMarkerSize - $tocMarkerRailSize) / 2}px;
   position: absolute;
@@ -47,10 +46,6 @@ aio-toc {
       &.secondary {
         position: relative;
         top: -8px;
-
-        &:hover {
-          color: $accentblue;
-        }
       }
     }
 
@@ -68,7 +63,6 @@ aio-toc {
 
         &.embedded:focus {
           outline: none;
-          background: $lightgray;
         }
       }
 
@@ -80,27 +74,18 @@ aio-toc {
           left: -4px;
           top: 5px;
         }
-
-        &:hover:not(.embedded) {
-          color: $accentblue;
-        }
       }
 
       &.toc-more-items {
-        color: $mediumgray;
         top: 10px;
         position: relative;
 
-        &:hover {
-          color: $accentblue;
-        }
-
         &::after {
-          content: 'expand_less';
+          content: "expand_less";
         }
 
         &.collapsed::after {
-          content: 'more_horiz';
+          content: "more_horiz";
         }
       }
     }
@@ -132,12 +117,11 @@ aio-toc {
         transition: all 0.3s ease-in-out;
 
         &.h1:after {
-          content: '';
+          content: "";
           display: block;
           height: 1px;
           width: 40%;
           margin: 7px 0 4px 0;
-          background: $lightgray;
           clear: both;
         }
 
@@ -146,39 +130,32 @@ aio-toc {
         }
 
         a {
-          color: lighten($darkgray, 10);
           overflow: visible;
           @include font-size(14);
           line-height: inherit;
           display: table-cell;
         }
 
-        &:hover {
-          * {
-            color: $accentblue;
-          }
-        }
-
         &.active {
           * {
-            color: $blue;
             font-weight: 500;
           }
 
           a:before {
-            @include tocMarker($blue);
+            @include tocMarker();
           }
         }
       }
 
       &:not(.embedded) li {
         &:before {
-          border-left: #{$tocMarkerRailSize}px solid $lightgray;
           bottom: 0;
-          content: '';
+          content: "";
           left: 0;
           position: absolute;
           top: 0;
+          border-left-width: #{$tocMarkerRailSize}px;
+          border-left-style: solid;
         }
 
         &:first-child:before {
@@ -193,7 +170,7 @@ aio-toc {
 
         &:not(.active):hover {
           a:before {
-            @include tocMarker($lightgray);
+            @include tocMarker();
           }
         }
       }
diff --git a/aio/src/styles/_app-theme.scss b/aio/src/styles/_app-theme.scss
index 0792bccd9fe..1aa512d7ff4 100644
--- a/aio/src/styles/_app-theme.scss
+++ b/aio/src/styles/_app-theme.scss
@@ -1,7 +1,9 @@
 @use '0-base/typography-theme' as *;
-@use '1-layouts' as *;
+@use '1-layouts/theme' as *;
+@use '2-modules/theme' as *;
 
 @mixin app-theme($theme) {
-    @include typography-theme($theme);
-    @include layout-theme($theme);
+  @include typography-theme($theme);
+  @include layout-themes($theme);
+  @include module-themes($theme);
 }
diff --git a/aio/src/styles/_print.scss b/aio/src/styles/_print.scss
index dbdbf35b2a6..6d1d72f6627 100644
--- a/aio/src/styles/_print.scss
+++ b/aio/src/styles/_print.scss
@@ -1,117 +1,145 @@
 @use './constants' as *;
 
 @media print {
+  // General Adjustments
+  * {
+    box-shadow: none !important;
+  }
 
-    // General Adjustments
-    * {
-        box-shadow: none !important;
+  body,
+  mat-sidenav-container {
+    background: none !important;
+  }
+
+  h1 {
+    height: 40px !important;
+    color: $darkgray !important;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    page-break-after: avoid;
+  }
+
+  ul,
+  ol,
+  img,
+  code-example,
+  table,
+  tr,
+  .alert,
+  .feature,
+  .lightbox {
+    page-break-inside: avoid;
+  }
+
+  table tbody tr:last-child td {
+    border-bottom: 1px solid $lightgray !important;
+  }
+
+  img {
+    max-width: 100% !important;
+  }
+
+  p {
+    widows: 4;
+  }
+
+  p > code,
+  li > code,
+  table code {
+    color: $blue !important;
+  }
+
+  // No Print Class
+  .no-print {
+    display: none !important;
+  }
+
+  // Custom No Print for Sidenav Menu
+  mat-sidenav.sidenav.mat-sidenav {
+    display: none !important;
+  }
+
+  // Custom No Print Element Adjustments
+  .mat-sidenav-content {
+    margin: 0 !important;
+  }
+
+  mat-sidenav-container.sidenav-container {
+    min-width: 100vw;
+  }
+
+  .sidenav-content {
+    overflow: visible;
+  }
+
+  .filetree {
+    max-width: 100%;
+  }
+
+  aio-code code {
+    border: none !important;
+  }
+
+  code-example {
+    &[language=sh], &[language=bash] {
+      background: none;
+
+      .pnk,
+      .blk,
+      .pln,
+      .otl,
+      .kwd,
+      .typ,
+      .tag,
+      .str,
+      .atv,
+      .atn,
+      .com,
+      .lit,
+      .pun,
+      .dec {
+        color: $darkgray;
+      }
     }
 
-    body, mat-sidenav-container {
-        background: none !important;
+    header {
+      background: none;
+      border: 0.5px solid $lightgray;
+      color: $darkgray;
     }
+  }
 
-    h1 {
-        height: 40px !important;
-        color: $darkgray !important;
+  .content code {
+    border: 0.5px solid $lightgray;
+  }
+
+  .mat-tab-labels {
+    div.mat-tab-label {
+      &:not(.mat-tab-label-active) span {
+        font-style: italic;
+      }
+
+      &.mat-tab-label-active span {
+        font-weight: bold;
+      }
     }
+  }
 
-    h1, h2, h3, h4, h5, h6 {
-        page-break-after: avoid;
-    }
+  .api-header label {
+    color: $darkgray !important;
+    font-weight: bold !important;
+    margin: 2px !important;
+    padding: 0 !important;
+    display: block !important;
+  }
 
-    ul, ol, img, code-example, table, tr, .alert, .feature, .lightbox {
-        page-break-inside: avoid;
-    }
-
-    table tbody tr:last-child td {
-        border-bottom: 1px solid $lightgray !important;
-    }
-
-    img {
-        max-width: 100% !important;
-    }
-
-    p {
-        widows: 4;
-    }
-
-    p > code, li > code, table code {
-        color: $blue !important;
-    }
-
-    // No Print Class
-    .no-print {
-        display: none !important;
-    }
-
-    // Custom No Print for Sidenav Menu
-    mat-sidenav.sidenav.mat-sidenav {
-        display: none !important;
-    }
-
-    // Custom No Print Element Adjustments
-    .mat-sidenav-content {
-        margin: 0 !important;
-    }
-
-    mat-sidenav-container.sidenav-container {
-        min-width: 100vw;
-    }
-
-    .sidenav-content {
-        overflow: visible;
-    }
-
-    .filetree {
-        max-width: 100%;
-    }
-
-    aio-code code {
-        border: none !important;
-    }
-
-    code-example {
-        &[language=sh], &[language=bash] {
-            background: none;
-
-            .pnk, .blk, .pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {
-                color: $darkgray;
-            }
-        }
-
-        header {
-            background: none;
-            border: 0.5px solid $lightgray;
-            color: $darkgray;
-        }
-    }
-
-    .content code {
-        border: 0.5px solid $lightgray;
-    }
-
-    .mat-tab-labels {
-        div.mat-tab-label {
-            &:not(.mat-tab-label-active) span {
-                font-style: italic;
-            }
-
-            &.mat-tab-label-active span {
-                font-weight: bold;
-            }
-        }
-    }
-
-    .api-header label {
-        color: $darkgray !important;
-        font-weight: bold !important;
-        margin: 2px !important;
-        padding: 0 !important;
-        display: block !important;
-    }
-
-    .feature-section img {
-        max-width: 70px !important;
-    }
+  .feature-section img {
+    max-width: 70px !important;
+  }
 }
diff --git a/aio/src/styles/custom-themes/dark.scss b/aio/src/styles/custom-themes/dark.scss
index d7c54be7719..66533377525 100644
--- a/aio/src/styles/custom-themes/dark.scss
+++ b/aio/src/styles/custom-themes/dark.scss
@@ -2,9 +2,9 @@
 @use '~@angular/material/theming' as *;
 
 $ng-io-primary: mat-palette($mat-blue, 700, 600, 800);
-$ng-io-accent:  mat-palette($mat-red, 700, 600, 800);
-$ng-io-warn:    mat-palette($mat-red);
+$ng-io-accent: mat-palette($mat-red, 700, 600, 800);
+$ng-io-warn: mat-palette($mat-red);
 $ng-io-theme: mat-dark-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
 
 @include angular-material-theme($ng-io-theme);
-@include app-theme($ng-io-theme);
\ No newline at end of file
+@include app-theme($ng-io-theme);
diff --git a/aio/src/styles/custom-themes/light.scss b/aio/src/styles/custom-themes/light.scss
index 0c8a4b467f2..0e87bf0bc5f 100644
--- a/aio/src/styles/custom-themes/light.scss
+++ b/aio/src/styles/custom-themes/light.scss
@@ -1,11 +1,9 @@
 @use '../app-theme' as *;
 @use '~@angular/material/theming' as *;
 
-
 $ng-io-primary: mat-palette($mat-blue, 700, 600, 800);
-$ng-io-accent:  mat-palette($mat-red, 700, 600, 800);
-$ng-io-warn:    mat-palette($mat-red);
+$ng-io-accent: mat-palette($mat-red, 700, 600, 800);
+$ng-io-warn: mat-palette($mat-red);
 $ng-io-theme: mat-light-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
 
-@include angular-material-theme($ng-io-theme);
-@include app-theme($ng-io-theme);
\ No newline at end of file
+// We don't have to call theme mixins here because light.scss is used by default in ng-io-theme.scss
diff --git a/aio/src/styles/ng-io-theme.scss b/aio/src/styles/ng-io-theme.scss
index 1e6531aab23..5a5e7458372 100644
--- a/aio/src/styles/ng-io-theme.scss
+++ b/aio/src/styles/ng-io-theme.scss
@@ -6,20 +6,5 @@
 // have to load a single css file for Angular Material in your app.
 @include mat-core();
 
-// 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.
-$ng-io-primary: mat-palette($mat-blue, 700, 600, 800);
-$ng-io-accent:  mat-palette($mat-red, 700, 600, 800);
-
-// The warn palette is optional (defaults to red).
-$ng-io-warn:    mat-palette($mat-red);
-
-// Create the theme object (a Sass map containing all of the palettes).
-$ng-io-theme: mat-light-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
-
-// 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 angular-material-theme($ng-io-theme);
-@include app-theme($ng-io-theme);
\ No newline at end of file
+@include angular-material-theme(light.$ng-io-theme);
+@include app-theme(light.$ng-io-theme);