diff --git a/concepts/design-tokens/README.md b/concepts/design-tokens/README.md
index 79d6a64ac3..f9302cc7ed 100644
--- a/concepts/design-tokens/README.md
+++ b/concepts/design-tokens/README.md
@@ -28,7 +28,7 @@ constants with a `dt-`/`dt` prefix.
 
 ## Structure
 
-Tokens are usually stored in some sort of structual data (yml, json,
+Tokens are usually stored in some sort of structural data (yml, json,
 database,...). Which format we are ultimately choosing is still up for
 discussion.
 
@@ -206,7 +206,7 @@ $dt-base-button-customizeable-example: var(--dt-base-button-background-color);
 ### Typescript constants
 
 Sometimes it becomes necessary to use certain design tokens within component
-logic. For some of these usecases, exported typescript constants for the design
+logic. For some of these use cases, exported typescript constants for the design
 tokens could help us keep things in sync between typescript and style.
 
 Potential output could look like this:
diff --git a/libs/barista-components/switch/BUILD.bazel b/libs/barista-components/switch/BUILD.bazel
index 299e49bac2..14eb7b2fb9 100644
--- a/libs/barista-components/switch/BUILD.bazel
+++ b/libs/barista-components/switch/BUILD.bazel
@@ -1,6 +1,6 @@
 load("//tools/bazel_rules:index.bzl", "jest", "ng_module_view_engine", "stylelint")
 load("@npm//@bazel/typescript:index.bzl", "ts_config")
-load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -43,15 +43,9 @@ filegroup(
     ]),
 )
 
-sass_library(
-    name = "theme",
-    srcs = ["src/_switch-theme.scss"],
-)
-
 sass_binary(
     name = "styles",
     src = "src/switch.scss",
-    deps = [":theme"],
 )
 
 stylelint(
diff --git a/libs/barista-components/switch/src/_switch-theme.scss b/libs/barista-components/switch/src/_switch-theme.scss
deleted file mode 100644
index a06a20f92f..0000000000
--- a/libs/barista-components/switch/src/_switch-theme.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-@import '../../core/src/style/variables';
-@import '../../core/src/theming/theming';
-@import '../../core/src/style/interactive-common';
-
-@mixin dt-theme-switch($theme) {
-  $is-dark: map-get($theme, 'is-dark');
-
-  @if ($is-dark == true) {
-    :host {
-      .dt-switch-content {
-        color: #ffffff;
-      }
-
-      .dt-switch-bar {
-        &::before {
-          background-image: radial-gradient(
-            circle 5px,
-            transparent 0,
-            transparent 2px,
-            #ffffff 3px,
-            transparent 4px
-          );
-          border-color: #ffffff;
-          background-color: transparent;
-        }
-
-        &::after {
-          background-color: #ffffff;
-        }
-      }
-
-      &:hover .dt-switch-bar::before {
-        background-color: rgba(255, 255, 255, 0.2);
-      }
-
-      &:active .dt-switch-bar::before {
-        border: 1px solid #ffffff;
-        background-color: rgba(255, 255, 255, 0.3);
-      }
-
-      &.dt-switch-checked {
-        .dt-switch-bar::before {
-          background-image: linear-gradient(
-            to right,
-            #ffffff 1px,
-            transparent 0
-          );
-          border-color: #ffffff;
-          background-color: $turquoise-500;
-        }
-
-        &:hover .dt-switch-bar::before {
-          border-color: #ffffff;
-          background-color: $turquoise-400;
-        }
-
-        &:active .dt-switch-bar::before {
-          border-color: #ffffff;
-          background-color: $turquoise-300;
-        }
-      }
-
-      &.dt-switch-focused .dt-switch-bar::before {
-        @include dt-focus-style(true);
-      }
-
-      &.dt-switch-disabled {
-        .dt-switch-bar::before {
-          background-image: radial-gradient(
-            circle 5px,
-            transparent 0,
-            transparent 2px,
-            $gray-500 3px,
-            transparent 4px
-          );
-          border-color: $gray-500;
-          background-color: transparent;
-        }
-
-        .dt-switch-bar::after {
-          background-color: $gray-500;
-        }
-      }
-
-      &.dt-switch-checked.dt-switch-disabled {
-        .dt-switch-bar::before {
-          background-image: linear-gradient(
-            to right,
-            $gray-500 1px,
-            transparent 0
-          );
-          border: 1px solid rgba(255, 255, 255, 0.3);
-          background-color: rgba(255, 255, 255, 0.2);
-        }
-
-        &:hover .dt-switch-bar::before {
-          border: 1px solid rgba(255, 255, 255, 0.3);
-          background-color: rgba(255, 255, 255, 0.2);
-        }
-      }
-    }
-  }
-}
diff --git a/libs/barista-components/switch/src/switch.scss b/libs/barista-components/switch/src/switch.scss
index 508cdc7d64..ae43723b48 100644
--- a/libs/barista-components/switch/src/switch.scss
+++ b/libs/barista-components/switch/src/switch.scss
@@ -1,9 +1,58 @@
 @import '../../core/src/style/variables';
 @import '../../core/src/style/interactive-common';
 @import '../../core/src/style/transition';
-@import '../../core/src/theming/theming';
 @import '../../style/font-mixins';
-@import './switch-theme';
+
+:host {
+  --content-color: #{$default-font-color};
+  --dt-switch-bar-background-radial: #{$gray-700};
+  --dt-switch-bar-border-color: #{$turquoise-600};
+  --dt-switch-bar-background-border-color: transparent;
+  --dt-switch-bar-after-background-color: #{$gray-700};
+  --dt-switch-bar-hover-before-background: #{$gray-100};
+  --dt-switch-bar-hover-before-border: #{$turquoise-700};
+  --dt-switch-bar-before-active-border: #{$turquoise-800};
+  --dt-switch-bar-before-active-background: #{$gray-100};
+  --dt-switch-bar-checked-before-background-color: #{$turquoise-600};
+  --dt-switch-bar-checked-before-border-color: #{$turquoise-600};
+  --dt-switch-bar-checked-hover-before-border-color: #{$turquoise-700};
+  --dt-switch-bar-checked-hover-before-background-color: #{$turquoise-700};
+  --dt-switch-bar-checked-active-before-border: #{$turquoise-800};
+  --dt-switch-bar-checked-active-before-background: #{$turquoise-800};
+  --dt-switch-bar-disabled: #{$disabledcolor};
+  --dt-switch-bar-checked-disabled-before-background: #{$disabledcolor};
+  --dt-switch-bar-checked-disabled-before-border: #{$disabledcolor};
+  --dt-switch-bar-checked-disabled-before-linear: #{$white};
+  --outline-color: #{$gray-400};
+}
+
+:host-context(.dt-theme-dark) {
+  --content-color: #{$white};
+  --dt-switch-bar-background-radial: #{$white};
+  --dt-switch-bar-border-color: #{$white};
+  --dt-switch-bar-background-border-color: transparent;
+  --dt-switch-bar-after-background-color: #{$white};
+  --dt-switch-bar-hover-before-background: rgba(255, 255, 255, 0.2);
+  --dt-switch-bar-hover-before-border: rgba(255, 255, 255, 0.3);
+  --dt-switch-bar-before-active-border: #{$white};
+  --dt-switch-bar-before-active-background: rgba(255, 255, 255, 0.3);
+  --dt-switch-bar-checked-before-background-color: #{$turquoise-500};
+  --dt-switch-bar-checked-before-border-color: #{$white};
+  --dt-switch-bar-checked-hover-before-border-color: #{$white};
+  --dt-switch-bar-checked-hover-before-background-color: rgba(
+    255,
+    255,
+    255,
+    0.2
+  );
+  --dt-switch-bar-checked-active-before-border: #{$white};
+  --dt-switch-bar-checked-active-before-background: #{$turquoise-300};
+  --dt-switch-bar-disabled: #{$gray-500};
+  --dt-switch-bar-checked-disabled-before-background: rgba(255, 255, 255, 0.2);
+  --dt-switch-bar-checked-disabled-before-border: rgba(255, 255, 255, 0.3);
+  --dt-switch-bar-checked-disabled-before-linear: #{$gray-500};
+  --outline-color: #{$gray-100};
+}
 
 .dt-switch-label {
   display: flex;
@@ -18,6 +67,7 @@
 
 .dt-switch-content {
   @include dt-main-font();
+  color: var(--content-color);
   vertical-align: middle;
 }
 
@@ -44,17 +94,17 @@
     left: 0;
     top: -1px;
     box-sizing: border-box;
-    border: solid 1px $turquoise-600;
+    border: solid 1px var(--dt-switch-bar-border-color);
     background-size: 10px 10px;
     background-repeat: no-repeat;
     background-position: 21px 4px;
-    background-color: transparent;
+    background-color: var(--dt-switch-bar-background-border-color);
     @include dt-form-input-color-transition();
     background-image: radial-gradient(
       circle 5px,
       transparent 0,
       transparent 2px,
-      $gray-700 3px,
+      var(--dt-switch-bar-background-radial) 3px,
       transparent 4px
     );
   }
@@ -64,7 +114,7 @@
     height: 12px;
     width: 12px;
     border-radius: 50%;
-    background-color: $gray-700;
+    background-color: var(--dt-switch-bar-after-background-color);
     transition: left 100ms ease-out, right 100ms ease-out;
     margin-top: 3px;
     margin-left: 4px;
@@ -78,13 +128,13 @@
 
 :host {
   &:hover .dt-switch-bar::before {
-    border: 1px solid $turquoise-700;
-    background-color: $gray-100;
+    border: 1px solid var(--dt-switch-bar-checked-hover-before-border-color);
+    background-color: var(--dt-switch-bar-hover-before-background);
   }
 
   &:active .dt-switch-bar::before {
-    border: 1px solid $turquoise-800;
-    background-color: $gray-100;
+    border: 1px solid var(--dt-switch-bar-before-active-border);
+    background-color: var(--dt-switch-bar-before-active-background);
   }
 
   &.dt-switch-checked {
@@ -92,8 +142,8 @@
       background-size: 8px 8px;
       background-repeat: no-repeat;
       background-position: 9px 5px;
-      background-color: $turquoise-600;
-      border-color: $turquoise-600;
+      background-color: var(--dt-switch-bar-checked-before-background-color);
+      border-color: var(--dt-switch-bar-checked-before-border-color);
       background-image: linear-gradient(to right, #ffffff 1px, transparent 0);
     }
 
@@ -103,21 +153,24 @@
 
     &:hover {
       .dt-switch-bar::before {
-        background-color: $turquoise-700;
-        border-color: $turquoise-700;
+        border-color: var(--dt-switch-bar-checked-hover-before-border-color);
+        background-color: var(
+          --dt-switch-bar-checked-hover-before-background-color
+        );
       }
     }
 
     &:active {
       .dt-switch-bar::before {
-        border: 1px solid $turquoise-800;
-        background-color: $turquoise-800;
+        border: 1px solid var(--dt-switch-bar-checked-active-before-border);
+        background-color: var(--dt-switch-bar-checked-active-before-background);
       }
     }
   }
 
   &.dt-switch-focused .dt-switch-bar::before {
     @include dt-focus-style();
+    outline-color: var(--outline-color);
   }
 
   &.dt-switch-disabled {
@@ -126,27 +179,31 @@
     }
 
     .dt-switch-bar::before {
-      border-color: $disabledcolor;
+      border-color: var(--dt-switch-bar-disabled);
       background-image: radial-gradient(
         circle 5px,
         transparent 0,
         transparent 2px,
-        $disabledcolor 3px,
+        var(--dt-switch-bar-disabled) 3px,
         transparent 4px
       );
       background-color: transparent;
     }
 
     .dt-switch-bar::after {
-      background-color: $disabledcolor;
+      background-color: var(--dt-switch-bar-disabled);
     }
   }
 
   &.dt-switch-checked.dt-switch-disabled {
     .dt-switch-bar::before {
-      border-color: $disabledcolor;
-      background-image: linear-gradient(to right, #ffffff 1px, transparent 0);
-      background-color: $disabledcolor;
+      border-color: var(--dt-switch-bar-checked-disabled-before-border);
+      background-image: linear-gradient(
+        to right,
+        var(--dt-switch-bar-checked-disabled-before-linear) 1px,
+        transparent 0
+      );
+      background-color: var(--dt-switch-bar-checked-disabled-before-background);
     }
 
     .dt-switch-bar::after {
@@ -154,8 +211,3 @@
     }
   }
 }
-
-// Apply the switch theme to all theme definitions
-@include dt-apply-theme() {
-  @include dt-theme-switch($dt-current-theme);
-}