diff --git a/src/ContentSwitcher/ContentSwitcher.Story.svelte b/src/ContentSwitcher/ContentSwitcher.Story.svelte
index fce5687e..81875b9f 100644
--- a/src/ContentSwitcher/ContentSwitcher.Story.svelte
+++ b/src/ContentSwitcher/ContentSwitcher.Story.svelte
@@ -1,5 +1,6 @@
 <script>
   export let story = undefined;
+  export let light = false;
 
   import ContentSwitcher from "./ContentSwitcher.svelte";
   import Switch from "./Switch.svelte";
@@ -11,6 +12,7 @@
 
 {#if story === 'selected'}
   <ContentSwitcher
+    {light}
     on:change={({ detail }) => {
       console.log('on:change', detail);
     }}>
@@ -20,6 +22,7 @@
   </ContentSwitcher>
 {:else}
   <ContentSwitcher
+    {light}
     bind:selectedIndex
     on:change={({ detail }) => {
       console.log('on:change', detail);
diff --git a/src/ContentSwitcher/ContentSwitcher.stories.js b/src/ContentSwitcher/ContentSwitcher.stories.js
index 43de4986..676b4898 100644
--- a/src/ContentSwitcher/ContentSwitcher.stories.js
+++ b/src/ContentSwitcher/ContentSwitcher.stories.js
@@ -5,7 +5,10 @@ export default { title: "ContentSwitcher", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
-  props: { disabled: boolean("Disabled (disabled)", false) },
+  props: {
+    disabled: boolean("Disabled (disabled)", false),
+    light: boolean("Light variant (light)", false),
+  },
 });
 
 export const Selected = () => ({
@@ -13,5 +16,6 @@ export const Selected = () => ({
   props: {
     story: "selected",
     disabled: boolean("Disabled (disabled)", false),
+    light: boolean("Light variant (light)", false),
   },
 });
diff --git a/src/ContentSwitcher/ContentSwitcher.svelte b/src/ContentSwitcher/ContentSwitcher.svelte
index 80a6e302..a3c5502f 100644
--- a/src/ContentSwitcher/ContentSwitcher.svelte
+++ b/src/ContentSwitcher/ContentSwitcher.svelte
@@ -1,5 +1,6 @@
 <script>
   export let selectedIndex = 0;
+  export let light = false;
 
   import { afterUpdate, createEventDispatcher, setContext } from "svelte";
   import { writable } from "svelte/store";
@@ -49,6 +50,7 @@
 <div
   role="tablist"
   class:bx--content-switcher={true}
+  class:bx--content-switcher--light={light}
   {...$$restProps}
   on:click
   on:mouseover