diff --git a/libs/barista-components/toggle-button-group/BUILD.bazel b/libs/barista-components/toggle-button-group/BUILD.bazel
index c9e30d1de5..b8ec11abb4 100644
--- a/libs/barista-components/toggle-button-group/BUILD.bazel
+++ b/libs/barista-components/toggle-button-group/BUILD.bazel
@@ -1,4 +1,4 @@
-load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 load("@npm//@bazel/typescript:index.bzl", "ts_config")
 load("//tools/bazel_rules:index.bzl", "jest", "ng_module_view_engine", "stylelint")
 
@@ -23,9 +23,9 @@ ng_module_view_engine(
     tsconfig = "tsconfig_lib",
     deps = [
         "//libs/barista-components/core:compile",
-        "@npm//@angular/core",
         "@npm//@angular/cdk",
         "@npm//@angular/common",
+        "@npm//@angular/core",
         "@npm//rxjs",
     ],
 )
@@ -47,12 +47,6 @@ filegroup(
 sass_binary(
     name = "styles",
     src = "src/toggle-button-group.scss",
-    deps = [":styles_theme"],
-)
-
-sass_library(
-    name = "styles_theme",
-    srcs = ["src/_toggle-button-item-theme.scss"],
 )
 
 sass_binary(
@@ -73,12 +67,12 @@ jest(
     ts_config = ":tsconfig_test",
     deps = [
         ":compile",
-        "//libs/testing/browser",
-        "@npm//@angular/platform-browser",
         "//libs/barista-components/core:compile",
-        "@npm//@angular/core",
+        "//libs/testing/browser",
         "@npm//@angular/cdk",
         "@npm//@angular/common",
+        "@npm//@angular/core",
+        "@npm//@angular/platform-browser",
         "@npm//rxjs",
     ],
 )
diff --git a/libs/barista-components/toggle-button-group/src/_toggle-button-item-theme.scss b/libs/barista-components/toggle-button-group/src/_toggle-button-item-theme.scss
deleted file mode 100644
index 46cd66990a..0000000000
--- a/libs/barista-components/toggle-button-group/src/_toggle-button-item-theme.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@import '../../core/src/style/variables';
-@import '../../core/src/theming/theming';
-
-@mixin dt-theme-toggle-button-item($theme) {
-  $palette: dt-get-theme-palette($theme, 'main');
-  $default-color: dt-get-theme-color($palette, 'default');
-  $hover-color: dt-get-theme-color($palette, 'hover');
-  $active-color: dt-get-theme-color($palette, 'active');
-
-  $namespace: ':host';
-
-  #{$namespace} ::ng-deep .dt-toggle-button-item-icon {
-    background-color: $default-color;
-  }
-
-  /* Hover state */
-  #{$namespace}:hover ::ng-deep .dt-toggle-button-item-icon,
-  #{$namespace}:hover.dt-toggle-button-item-selected
-    ::ng-deep
-    .dt-toggle-button-item-icon {
-    background-color: $hover-color;
-  }
-  #{$namespace}.dt-toggle-button-item-selected:hover {
-    border-color: $hover-color;
-  }
-
-  /* Active state */
-  #{$namespace}.dt-toggle-button-item-selected {
-    border-color: $default-color;
-  }
-  #{$namespace}.dt-toggle-button-item-selected
-    ::ng-deep
-    .dt-toggle-button-item-icon {
-    background-color: $default-color;
-  }
-
-  /* Disabled state */
-  #{$namespace}.dt-toggle-button-item-disabled {
-    color: $gray-300;
-  }
-
-  #{$namespace}.dt-toggle-button-item-disabled
-    ::ng-deep
-    .dt-toggle-button-item-icon {
-    background-color: $gray-300;
-  }
-}
diff --git a/libs/barista-components/toggle-button-group/src/toggle-button-item.scss b/libs/barista-components/toggle-button-group/src/toggle-button-item.scss
index 658b9fc3ae..0dac9b59bc 100644
--- a/libs/barista-components/toggle-button-group/src/toggle-button-item.scss
+++ b/libs/barista-components/toggle-button-group/src/toggle-button-item.scss
@@ -1,8 +1,6 @@
 @import '../../core/src/style/variables';
 @import '../../style/font-mixins';
 @import '../../core/src/style/interactive-common';
-@import '../../core/src/theming/theming';
-@import './toggle-button-item-theme';
 
 :host {
   @include dt-main-font();
@@ -46,6 +44,35 @@
   align-items: center;
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
+  background-color: var(--dt-theme-main-default-color);
+}
+
+/** Hover state of the toggle button */
+:host:hover ::ng-deep .dt-toggle-button-item-icon,
+:host:hover.dt-toggle-button-item-selected
+  ::ng-deep
+  .dt-toggle-button-item-icon {
+  background-color: var(--dt-theme-main-hover-color);
+}
+:host.dt-toggle-button-item-selected:hover {
+  border-color: var(--dt-theme-main-hover-color);
+}
+
+/** Active state of the button */
+:host.dt-toggle-button-item-selected {
+  border-color: var(--dt-theme-main-default-color);
+}
+:host.dt-toggle-button-item-selected ::ng-deep .dt-toggle-button-item-icon {
+  background-color: var(--dt-theme-main-default-color);
+}
+
+/* Disabled state */
+:host.dt-toggle-button-item-disabled {
+  color: $gray-300;
+}
+
+:host.dt-toggle-button-item-disabled ::ng-deep .dt-toggle-button-item-icon {
+  background-color: $gray-300;
 }
 
 :host ::ng-deep .dt-icon {
@@ -53,7 +80,3 @@
   width: 32px;
   height: 32px;
 }
-
-@include dt-apply-theme() {
-  @include dt-theme-toggle-button-item($dt-current-theme);
-}