diff --git a/libs/barista-components/button/src/_button-theme.scss b/libs/barista-components/button/src/_button-theme.scss
index b2636007e6..8a69c3c660 100644
--- a/libs/barista-components/button/src/_button-theme.scss
+++ b/libs/barista-components/button/src/_button-theme.scss
@@ -1,227 +1,276 @@
-@import '../../core/src/theming/theming';
-@import '../../core/src/style/interactive-common';
-
-@mixin dt-theme-button($theme) {
-  $palette-names: 'main', 'warning', 'cta';
-  $default-palette: 'main';
-
-  @each $name in $palette-names {
-    $is-dark: map-get($theme, 'is-dark');
-    $palette: dt-get-theme-palette($theme, $name);
-    $default-color: dt-get-theme-color($palette, 'default');
-    $hover-color: dt-get-theme-color($palette, 'hover');
-    $active-color: dt-get-theme-color($palette, 'active');
-
-    // Temporary fix to not make button color depend on theme.
-    // We only have to override the main color because the warning and
-    // cta colors are the same across all themes for now.
-    @if ($name == 'main') {
-      @if ($is-dark == true) {
-        $default-color: $turquoise-500;
-        $hover-color: $turquoise-400;
-        $active-color: $turquoise-300;
-      } @else {
-        $default-color: $turquoise-600;
-        $hover-color: $turquoise-700;
-        $active-color: $turquoise-800;
-      }
-    }
+.dt-button {
+  --dt-button-default-color: var(--dt-theme-main-default-color);
+  --dt-button-hover-color: var(--dt-theme-main-hover-color);
+  --dt-button-active-color: var(--dt-theme-main-active-color);
+}
 
-    $namespace: '.dt-button';
-    @if $name != $default-palette {
-      $namespace: '.dt-button.dt-color-#{$name}';
-    }
+.dt-button.dt-color-warning {
+  --dt-button-default-color: var(--dt-warning-default-color);
+  --dt-button-hover-color: var(--dt-warning-hover-color);
+  --dt-button-active-color: var(--dt-warning-active-color);
+}
+
+.dt-button.dt-color-cta {
+  --dt-button-default-color: var(--dt-cta-default-color);
+  --dt-button-hover-color: var(--dt-cta-hover-color);
+  --dt-button-active-color: var(--dt-cta-active-color);
+}
+
+////////////////////////////
+// Primary Button
+////////////////////////////
+.dt-button-primary {
+  background: var(--dt-button-default-color);
+  border-color: var(--dt-button-default-color);
+  color: #ffffff;
+
+  .dt-button-icon .dt-icon svg {
+    fill: #ffffff;
+  }
+}
+
+.dt-button-primary:hover:not([disabled]) {
+  background: var(--dt-button-hover-color);
+  border-color: var(--dt-button-hover-color);
+  color: #ffffff;
+}
+
+.dt-button-primary:active:not([disabled]) {
+  background: var(--dt-button-active-color);
+  border-color: var(--dt-button-active-color);
+  color: #ffffff;
+}
+
+.dt-button-primary[disabled] {
+  background: $disabledcolor;
+  border-color: $disabledcolor;
+  color: #ffffff;
+
+  .dt-button-icon .dt-icon svg {
+    fill: #ffffff;
+  }
+}
+
+.dt-theme-dark {
+  .dt-button-primary,
+  .dt-button-primary:hover:not([disabled]),
+  .dt-button-primary:active:not([disabled]) {
+    border-color: #ffffff;
+  }
 
-    @if ($is-dark == true) {
-      #{$namespace} {
-        // Apply focus to CDK focus monitored elements
-        @include dt-cdkmonitor-focus-style(true);
-      }
+  .dt-button-primary[disabled] {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.6);
+
+    .dt-button-icon .dt-icon svg {
+      fill: rgba(255, 255, 255, 0.6);
     }
+  }
+}
+
+////////////////////////////
+// Secondary Button
+////////////////////////////
+.dt-button-secondary {
+  background: transparent;
+  border-color: var(--dt-button-default-color);
+  color: var(--dt-button-default-color);
+
+  .dt-button-icon .dt-icon svg {
+    fill: var(--dt-button-default-color);
+  }
+}
+.dt-button-secondary:hover:not([disabled]) {
+  background: $gray-100;
+  border-color: var(--dt-button-hover-color);
+  color: var(--dt-button-hover-color);
+
+  .dt-button-icon .dt-icon svg {
+    fill: var(--dt-button-hover-color);
+  }
+}
+.dt-button-secondary:active:not([disabled]) {
+  background: $gray-100;
+  border-color: var(--dt-button-active-color);
+  color: var(--dt-button-active-color);
 
-    ////////////////////////////
-    // PRIMARY
-    ////////////////////////////
-    #{$namespace}.dt-button-primary {
-      background: $default-color;
-      border-color: $default-color;
-      color: #ffffff;
-
-      .dt-button-icon .dt-icon svg {
-        fill: #ffffff;
-      }
+  .dt-button-icon .dt-icon svg {
+    fill: var(--dt-button-active-color);
+  }
+}
+.dt-button-secondary[disabled] {
+  background: #ffffff;
+  border-color: $disabledcolor;
+  color: $disabledcolor;
+
+  .dt-button-icon .dt-icon svg {
+    fill: $disabledcolor;
+  }
+}
+
+.dt-theme-dark {
+  .dt-button-secondary,
+  .dt-button-secondary[disabled] {
+    background: transparent;
+    color: #ffffff;
+
+    .dt-button-icon .dt-icon svg {
+      fill: #ffffff;
     }
-    #{$namespace}.dt-button-primary:hover:not([disabled]) {
-      background: $hover-color;
-      border-color: $hover-color;
-      color: #ffffff;
+  }
+  .dt-button-secondary:hover:not([disabled]) {
+    background: rgba(255, 255, 255, 0.2);
+    color: #ffffff;
+
+    .dt-button-icon .dt-icon svg {
+      fill: #ffffff;
     }
-    #{$namespace}.dt-button-primary:active:not([disabled]) {
-      background: $active-color;
-      border-color: $active-color;
-      color: #ffffff;
+  }
+  .dt-button-secondary:active:not([disabled]) {
+    background: rgba(255, 255, 255, 0.3);
+    color: #ffffff;
+
+    .dt-button-icon .dt-icon svg {
+      fill: #ffffff;
     }
+  }
+  .dt-button-secondary[disabled] {
+    border-color: rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.6);
 
-    @if ($is-dark == true) {
-      #{$namespace}.dt-button-primary,
-      #{$namespace}.dt-button-primary:hover:not([disabled]),
-      #{$namespace}.dt-button-primary:active:not([disabled]) {
-        border-color: #ffffff;
-      }
-      #{$namespace}.dt-button-primary[disabled] {
-        background: rgba(255, 255, 255, 0.2);
-        border-color: rgba(255, 255, 255, 0.2);
-        color: rgba(255, 255, 255, 0.6);
-
-        .dt-button-icon .dt-icon svg {
-          fill: rgba(255, 255, 255, 0.6);
-        }
-      }
-    } @else {
-      #{$namespace}.dt-button-primary[disabled] {
-        background: $disabledcolor;
-        border-color: $disabledcolor;
-        color: #ffffff;
-
-        .dt-button-icon .dt-icon svg {
-          fill: #ffffff;
-        }
-      }
+    .dt-button-icon .dt-icon svg {
+      fill: rgba(255, 255, 255, 0.6);
     }
+  }
+  .dt-button-secondary,
+  .dt-button-secondary:hover:not([disabled]) {
+    border-color: #ffffff;
+    color: $gray-100;
+  }
+  .dt-button-secondary:active:not([disabled]) {
+    border-color: #ffffff;
+    color: #ffffff;
+  }
+}
+
+////////////////////////////
+// Nested Buttons
+////////////////////////////
+.dt-button-nested {
+  .dt-button-icon .dt-icon svg {
+    fill: var(--dt-button-default-color);
+  }
+}
+.dt-button-nested:hover:not([disabled]) {
+  .dt-button-icon .dt-icon svg {
+    fill: var(--dt-button-hover-color);
+  }
+}
+.dt-button-nested:active:not([disabled]) {
+  .dt-button-icon .dt-icon svg {
+    fill: var(--dt-button-active-color);
+  }
+}
+.dt-button-nested[disabled] {
+  .dt-button-icon .dt-icon svg {
+    fill: $disabledcolor;
+  }
+}
 
-    ////////////////////////////
-    // SECONDARY
-    ////////////////////////////
-    #{$namespace}.dt-button-secondary {
-      background: transparent;
-      border-color: $default-color;
-      color: $default-color;
-
-      .dt-button-icon .dt-icon svg {
-        fill: $default-color;
-      }
+.dt-theme-dark {
+  .dt-button-nested,
+  .dt-button-nested:hover:not([disabled]),
+  .dt-button-nested:active:not([disabled]) {
+    .dt-button-icon .dt-icon svg {
+      fill: #ffffff;
     }
-    #{$namespace}.dt-button-secondary:hover:not([disabled]) {
-      background: $gray-100;
-      border-color: $hover-color;
-      color: $hover-color;
-
-      .dt-button-icon .dt-icon svg {
-        fill: $hover-color;
-      }
+  }
+  .dt-button-nested:hover:not([disabled]) {
+    background: rgba(255, 255, 255, 0.2);
+  }
+  .dt-button-nested:active:not([disabled]) {
+    background: rgba(255, 255, 255, 0.3);
+  }
+  .dt-button-nested[disabled] {
+    .dt-button-icon .dt-icon svg {
+      fill: rgba(255, 255, 255, 0.6);
     }
-    #{$namespace}.dt-button-secondary:active:not([disabled]) {
-      background: $gray-100;
-      border-color: $active-color;
-      color: $active-color;
-
-      .dt-button-icon .dt-icon svg {
-        fill: $active-color;
-      }
+  }
+}
+
+////////////////////////////
+// Warning & Cta Buttons
+////////////////////////////
+
+.dt-color-warning.dt-button-secondary,
+.dt-color-cta.dt-button-secondary {
+  background: transparent;
+  border-color: var(--dt-button-default-color);
+  color: var(--dt-button-default-color);
+
+  .dt-button-icon .dt-icon svg {
+    fill: var(--dt-button-default-color);
+  }
+}
+.dt-color-warning.dt-button-secondary:hover:not([disabled]),
+.dt-color-cta.dt-button-secondary:hover:not([disabled]) {
+  background: $gray-100;
+  border-color: var(--dt-button-hover-color);
+  color: var(--dt-button-hover-color);
+
+  .dt-button-icon .dt-icon svg {
+    fill: var(--dt-button-hover-color);
+  }
+}
+.dt-color-warning.dt-button-secondary:active:not([disabled]),
+.dt-color-cta.dt-button-secondary:active:not([disabled]) {
+  background: $gray-100;
+  border-color: var(--dt-button-active-color);
+  color: var(--dt-button-active-color);
+
+  .dt-button-icon .dt-icon svg {
+    fill: var(--dt-button-active-color);
+  }
+}
+
+.dt-theme-dark {
+  .dt-color-cta.dt-button-secondary,
+  .dt-color-cta.dt-button-secondary[disabled],
+  .dt-color-warning.dt-button-secondary,
+  .dt-color-warning.dt-button-secondary[disabled] {
+    background: transparent;
+    color: #ffffff;
+
+    .dt-button-icon .dt-icon svg {
+      fill: #ffffff;
     }
+  }
+  .dt-color-cta.dt-button-secondary:hover:not([disabled]),
+  .dt-color-warning.dt-button-secondary:hover:not([disabled]) {
+    background: rgba(255, 255, 255, 0.2);
+    color: #ffffff;
 
-    @if $is-dark == true {
-      #{$namespace}.dt-button-secondary,
-      #{$namespace}.dt-button-secondary[disabled] {
-        background: transparent;
-        color: #ffffff;
-
-        .dt-button-icon .dt-icon svg {
-          fill: #ffffff;
-        }
-      }
-      #{$namespace}.dt-button-secondary:hover:not([disabled]) {
-        background: rgba(255, 255, 255, 0.2);
-        color: #ffffff;
-
-        .dt-button-icon .dt-icon svg {
-          fill: #ffffff;
-        }
-      }
-      #{$namespace}.dt-button-secondary:active:not([disabled]) {
-        background: rgba(255, 255, 255, 0.3);
-        color: #ffffff;
-
-        .dt-button-icon .dt-icon svg {
-          fill: #ffffff;
-        }
-      }
-      #{$namespace}.dt-button-secondary[disabled] {
-        border-color: rgba(255, 255, 255, 0.2);
-        color: rgba(255, 255, 255, 0.6);
-
-        .dt-button-icon .dt-icon svg {
-          fill: rgba(255, 255, 255, 0.6);
-        }
-      }
-      // Main does not have the main color as a border
-      // so we have to specifiy it differently
-      @if $name == 'main' {
-        #{$namespace}.dt-button-secondary,
-        #{$namespace}.dt-button-secondary:hover:not([disabled]) {
-          border-color: #ffffff;
-          color: $gray-100;
-        }
-        #{$namespace}.dt-button-secondary:active:not([disabled]) {
-          border-color: #ffffff;
-          color: #ffffff;
-        }
-      }
-    } @else {
-      #{$namespace}.dt-button-secondary[disabled] {
-        background: #ffffff;
-        border-color: $disabledcolor;
-        color: $disabledcolor;
-
-        .dt-button-icon .dt-icon svg {
-          fill: $disabledcolor;
-        }
-      }
+    .dt-button-icon .dt-icon svg {
+      fill: #ffffff;
     }
+  }
+  .dt-color-cta.dt-button-secondary:active:not([disabled]),
+  .dt-color-warning.dt-button-secondary:active:not([disabled]) {
+    background: rgba(255, 255, 255, 0.3);
+    color: #ffffff;
+
+    .dt-button-icon .dt-icon svg {
+      fill: #ffffff;
+    }
+  }
+  .dt-color-cta.dt-button-secondary[disabled],
+  .dt-color-warning.dt-button-secondary[disabled] {
+    border-color: rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.6);
 
-    ////////////////////////////
-    // NESTED
-    ////////////////////////////
-    @if $is-dark == true {
-      #{$namespace}.dt-button-nested,
-      #{$namespace}.dt-button-nested:hover:not([disabled]),
-      #{$namespace}.dt-button-nested:active:not([disabled]) {
-        .dt-button-icon .dt-icon svg {
-          fill: #ffffff;
-        }
-      }
-      #{$namespace}.dt-button-nested:hover:not([disabled]) {
-        background: rgba(255, 255, 255, 0.2);
-      }
-      #{$namespace}.dt-button-nested:active:not([disabled]) {
-        background: rgba(255, 255, 255, 0.3);
-      }
-      #{$namespace}.dt-button-nested[disabled] {
-        .dt-button-icon .dt-icon svg {
-          fill: rgba(255, 255, 255, 0.6);
-        }
-      }
-    } @else {
-      #{$namespace}.dt-button-nested {
-        .dt-button-icon .dt-icon svg {
-          fill: $default-color;
-        }
-      }
-      #{$namespace}.dt-button-nested:hover:not([disabled]) {
-        .dt-button-icon .dt-icon svg {
-          fill: $hover-color;
-        }
-      }
-      #{$namespace}.dt-button-nested:active:not([disabled]) {
-        .dt-button-icon .dt-icon svg {
-          fill: $active-color;
-        }
-      }
-      #{$namespace}.dt-button-nested[disabled] {
-        .dt-button-icon .dt-icon svg {
-          fill: $disabledcolor;
-        }
-      }
+    .dt-button-icon .dt-icon svg {
+      fill: rgba(255, 255, 255, 0.6);
     }
   }
 }
diff --git a/libs/barista-components/button/src/button.scss b/libs/barista-components/button/src/button.scss
index 15d5f18666..85a5258e0a 100644
--- a/libs/barista-components/button/src/button.scss
+++ b/libs/barista-components/button/src/button.scss
@@ -1,8 +1,6 @@
 @import '../../style/font-mixins';
 @import '../../core/src/style/variables';
 @import '../../core/src/style/interactive-common';
-@import '../../core/src/theming/theming';
-@import './button-theme';
 
 .dt-button {
   @include dt-main-font(30px);
@@ -110,7 +108,4 @@ a.dt-button[disabled] {
   }
 }
 
-// Apply the button theme to all theme definitions
-@include dt-apply-theme() {
-  @include dt-theme-button($dt-current-theme);
-}
+@import './button-theme';
diff --git a/libs/barista-components/style/main.scss b/libs/barista-components/style/main.scss
index 5f2272b5f6..b7b3974990 100644
--- a/libs/barista-components/style/main.scss
+++ b/libs/barista-components/style/main.scss
@@ -10,6 +10,8 @@
 
 @import '../core/src/style/overlay';
 
+@import './themes';
+
 @import '~@angular/cdk/overlay';
 @import '~@angular/cdk/a11y';
 
@@ -19,3 +21,16 @@
 .dt-no-pointer {
   pointer-events: none;
 }
+
+:root {
+  --dt-theme-main-default-color: #{$turquoise-600};
+  --dt-theme-main-hover-color: #{$turquoise-700};
+  --dt-theme-main-active-color: #{$turquoise-800};
+  --dt-theme-main-background-color: #{$turquoise-100};
+  --dt-warning-default-color: #{$yellow-600};
+  --dt-warning-hover-color: #{$yellow-700};
+  --dt-warning-active-color: #{$yellow-800};
+  --dt-cta-default-color: #{$green-600};
+  --dt-cta-hover-color: #{$green-700};
+  --dt-cta-active-color: #{$green-800};
+}
diff --git a/libs/barista-components/style/themes.scss b/libs/barista-components/style/themes.scss
new file mode 100644
index 0000000000..01d540f3af
--- /dev/null
+++ b/libs/barista-components/style/themes.scss
@@ -0,0 +1,91 @@
+@import '../core/src/style/variables';
+
+/* theme turquoise */
+.dt-theme-turquoise {
+  --dt-theme-main-default-color: #{$turquoise-600};
+  --dt-theme-main-hover-color: #{$turquoise-700};
+  --dt-theme-main-active-color: #{$turquoise-800};
+  --dt-theme-main-background-color: #{$turquoise-100};
+  --dt-warning-default-color: #{$yellow-600};
+  --dt-warning-hover-color: #{$yellow-700};
+  --dt-warning-active-color: #{$yellow-800};
+  --dt-cta-default-color: #{$green-600};
+  --dt-cta-hover-color: #{$green-700};
+  --dt-cta-active-color: #{$green-800};
+}
+
+.dt-theme-turquoise.dt-theme-dark {
+  --dt-theme-main-default-color: #{$turquoise-500};
+  --dt-theme-main-hover-color: #{$turquoise-400};
+  --dt-theme-main-active-color: #{$turquoise-300};
+}
+
+/* theme blue  */
+.dt-theme-blue {
+  --dt-theme-main-default-color: #{$blue-600};
+  --dt-theme-main-hover-color: #{$blue-700};
+  --dt-theme-main-active-color: #{$blue-800};
+  --dt-theme-main-background-color: #{$blue-100};
+  --dt-warning-default-color: #{$yellow-600};
+  --dt-warning-hover-color: #{$yellow-700};
+  --dt-warning-active-color: #{$yellow-800};
+  --dt-cta-default-color: #{$green-600};
+  --dt-cta-hover-color: #{$green-700};
+  --dt-cta-active-color: #{$green-800};
+}
+
+.dt-theme-blue.dt-theme-dark {
+  --dt-theme-main-default-color: #{$blue-500};
+  --dt-theme-main-hover-color: #{$blue-400};
+  --dt-theme-main-active-color: #{$blue-300};
+}
+
+/* theme royalblue  */
+.dt-theme-royalblue {
+  --dt-theme-main-default-color: #{$royalblue-600};
+  --dt-theme-main-hover-color: #{$royalblue-700};
+  --dt-theme-main-active-color: #{$royalblue-800};
+  --dt-theme-main-background-color: #{$royalblue-100};
+  --dt-warning-default-color: #{$yellow-600};
+  --dt-warning-hover-color: #{$yellow-700};
+  --dt-warning-active-color: #{$yellow-800};
+  --dt-cta-default-color: #{$green-600};
+  --dt-cta-hover-color: #{$green-700};
+  --dt-cta-active-color: #{$green-800};
+}
+
+.dt-theme-royalblue.dt-theme-dark {
+  --dt-theme-main-default-color: #{$royalblue-500};
+  --dt-theme-main-hover-color: #{$royalblue-400};
+  --dt-theme-main-active-color: #{$royalblue-300};
+}
+
+/* theme purple */
+.dt-theme-purple {
+  --dt-theme-main-default-color: #{$purple-600};
+  --dt-theme-main-hover-color: #{$purple-700};
+  --dt-theme-main-active-color: #{$purple-800};
+  --dt-theme-main-background-color: #{$purple-100};
+  --dt-warning-default-color: #{$yellow-600};
+  --dt-warning-hover-color: #{$yellow-700};
+  --dt-warning-active-color: #{$yellow-800};
+  --dt-cta-default-color: #{$green-600};
+  --dt-cta-hover-color: #{$green-700};
+  --dt-cta-active-color: #{$green-800};
+}
+
+.dt-theme-purple.dt-theme-dark {
+  --dt-theme-main-default-color: #{$purple-500};
+  --dt-theme-main-hover-color: #{$purple-400};
+  --dt-theme-main-active-color: #{$purple-300};
+}
+
+/* warning and cta colors for dark theme */
+.dt-theme-dark {
+  --dt-warning-default-color: #{$yellow-600};
+  --dt-warning-hover-color: #{$yellow-500};
+  --dt-warning-active-color: #{$yellow-400};
+  --dt-cta-default-color: #{$green-500};
+  --dt-cta-hover-color: #{$green-400};
+  --dt-cta-active-color: #{$green-300};
+}