diff --git a/.storybook/resources.ts b/.storybook/resources.ts
index d2d4b68b632..a6422c55a77 100644
--- a/.storybook/resources.ts
+++ b/.storybook/resources.ts
@@ -1,4 +1,4 @@
-import { Appearance, Position, Scale, Theme } from "../src/components/interfaces";
+import { Appearance, Position, Scale, ThemeClass } from "../src/components/interfaces";
 
 type Direction = "ltr" | "rtl";
 
@@ -9,14 +9,14 @@ interface AttributeMetadata<T> {
 
 interface CommonAttributes {
   dir: AttributeMetadata<Direction>;
-  theme: AttributeMetadata<Theme>;
+  theme: AttributeMetadata<ThemeClass>;
   scale: AttributeMetadata<Scale>;
   position: AttributeMetadata<Position>;
   appearance: AttributeMetadata<Appearance>;
 }
 
 const dirOptions: Direction[] = ["ltr", "rtl"];
-const themeOptions: Theme[] = ["light", "dark"];
+const themeOptions: ThemeClass[] = ["calcite-theme-light", "calcite-theme-dark", "calcite-theme-auto"];
 const positionOptions: Position[] = ["start", "end"];
 const scaleOptions: Scale[] = ["s", "m", "l"];
 const appearanceOptions: Appearance[] = ["solid", "clear", "outline"];
diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
index 0b56731cee7..40eda848454 100644
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -49,13 +49,11 @@
   @apply font-sans;
 }
 
-.calcite-theme-dark,
-[theme="dark"] {
+.calcite-theme-dark {
   @include calcite-theme-dark-extended();
 }
 
-.calcite-theme-light,
-[theme="light"] {
+.calcite-theme-light {
   @include calcite-theme-light-extended();
 }
 
diff --git a/src/components/calcite-accordion/calcite-accordion.stories.ts b/src/components/calcite-accordion/calcite-accordion.stories.ts
index ed1c173d21e..56cdf54d5b0 100644
--- a/src/components/calcite-accordion/calcite-accordion.stories.ts
+++ b/src/components/calcite-accordion/calcite-accordion.stories.ts
@@ -38,9 +38,9 @@ const createAccordionAttributes: (options?: { exceptions: string[] }) => Attribu
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue, group);
+          this.value = select("class", theme.values, theme.defaultValue, group);
           delete this.build;
           return this;
         }
@@ -189,9 +189,9 @@ export const icon = (): string =>
 export const darkThemeIcon = (): string =>
   create(
     "calcite-accordion",
-    createAccordionAttributes({ exceptions: ["theme"] }).concat({
-      name: "theme",
-      value: "dark"
+    createAccordionAttributes({ exceptions: ["class"] }).concat({
+      name: "class",
+      value: "calcite-theme-dark"
     }),
     html`
       ${create(
diff --git a/src/components/calcite-accordion/readme.md b/src/components/calcite-accordion/readme.md
index ee0ca7a84e7..3f790158229 100644
--- a/src/components/calcite-accordion/readme.md
+++ b/src/components/calcite-accordion/readme.md
@@ -1,6 +1,6 @@
 # calcite-accordion
 
-`calcite-accordion` can be used to present content in collapsible sections. Configuration options exist for visual style (theme, icon-position, scale, appearance), and selection functionality. Selection modes include "multi", "single", and "single-persist".
+`calcite-accordion` can be used to present content in collapsible sections. Configuration options exist for visual style (icon-position, scale, appearance), and selection functionality. Selection modes include "multi", "single", and "single-persist".
 
 <!-- Auto Generated Below -->
 
diff --git a/src/components/calcite-action-bar/calcite-action-bar.stories.ts b/src/components/calcite-action-bar/calcite-action-bar.stories.ts
index d5780dde090..65c60a88ee6 100644
--- a/src/components/calcite-action-bar/calcite-action-bar.stories.ts
+++ b/src/components/calcite-action-bar/calcite-action-bar.stories.ts
@@ -73,9 +73,9 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue);
+          this.value = select("class", theme.values, theme.defaultValue);
           delete this.build;
           return this;
         }
@@ -103,14 +103,14 @@ export const basic = (): string =>
 export const darkThemeRTL = (): string =>
   create(
     "calcite-action-bar",
-    createAttributes({ exceptions: ["dir", "theme"] }).concat([
+    createAttributes({ exceptions: ["dir", "class"] }).concat([
       {
         name: "dir",
         value: "rtl"
       },
       {
-        name: "theme",
-        value: "dark"
+        name: "class",
+        value: "calcite-theme-dark"
       }
     ]),
     html`
diff --git a/src/components/calcite-action-pad/calcite-action-pad.stories.ts b/src/components/calcite-action-pad/calcite-action-pad.stories.ts
index 2aed399ef0c..d6c05494489 100644
--- a/src/components/calcite-action-pad/calcite-action-pad.stories.ts
+++ b/src/components/calcite-action-pad/calcite-action-pad.stories.ts
@@ -73,9 +73,9 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue);
+          this.value = select("class", theme.values, theme.defaultValue);
           delete this.build;
           return this;
         }
@@ -103,14 +103,14 @@ export const basic = (): string =>
 export const darkThemeRTL = (): string =>
   create(
     "calcite-action-pad",
-    createAttributes({ exceptions: ["dir", "theme"] }).concat([
+    createAttributes({ exceptions: ["dir", "class"] }).concat([
       {
         name: "dir",
         value: "rtl"
       },
       {
-        name: "theme",
-        value: "dark"
+        name: "class",
+        value: "calcite-theme-dark"
       }
     ]),
     html`
diff --git a/src/components/calcite-action/calcite-action.stories.ts b/src/components/calcite-action/calcite-action.stories.ts
index 67179d7eed0..af08a4793a9 100644
--- a/src/components/calcite-action/calcite-action.stories.ts
+++ b/src/components/calcite-action/calcite-action.stories.ts
@@ -111,9 +111,9 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue);
+          this.value = select("class", theme.values, theme.defaultValue);
           delete this.build;
           return this;
         }
@@ -127,14 +127,14 @@ export const basic = (): string => create("calcite-action", createAttributes());
 export const darkThemeRTL = (): string =>
   create(
     "calcite-action",
-    createAttributes({ exceptions: ["dir", "theme"] }).concat([
+    createAttributes({ exceptions: ["dir", "class"] }).concat([
       {
         name: "dir",
         value: "rtl"
       },
       {
-        name: "theme",
-        value: "dark"
+        name: "class",
+        value: "calcite-theme-dark"
       }
     ])
   );
diff --git a/src/components/calcite-alert/calcite-alert.e2e.ts b/src/components/calcite-alert/calcite-alert.e2e.ts
index e6b32ff0ee3..3c398f4774c 100644
--- a/src/components/calcite-alert/calcite-alert.e2e.ts
+++ b/src/components/calcite-alert/calcite-alert.e2e.ts
@@ -190,7 +190,7 @@ describe("calcite-alert", () => {
     describe("when theme attribute is dark", () => {
       it("should render alert dismiss progress bar with value tied to dark theme", async () => {
         page = await newE2EPage({
-          html: `<div theme="dark">${alertSnippet}</div>`
+          html: `<div class="calcite-theme-dark">${alertSnippet}</div>`
         });
         await page.waitForTimeout(animationDurationInMs);
         alertDismissProgressBar = await page.find("calcite-alert[active] >>> .alert-dismiss-progress");
diff --git a/src/components/calcite-alert/calcite-alert.stories.ts b/src/components/calcite-alert/calcite-alert.stories.ts
index 5a7762c5c12..a0b6312f1e5 100644
--- a/src/components/calcite-alert/calcite-alert.stories.ts
+++ b/src/components/calcite-alert/calcite-alert.stories.ts
@@ -14,7 +14,7 @@ export default {
 
 export const TitleMessageLink = (): string => html`
 <calcite-alert
-theme="light"
+class="calcite-theme-light"
 ${boolean("icon", true)}
 ${boolean("auto-dismiss", false)}
 auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
@@ -35,7 +35,7 @@ TitleMessageLink.story = {
 
 export const TitleMessage = (): string => html`
   <calcite-alert
-    theme="light"
+    class="calcite-theme-light"
     ${boolean("icon", true)}
     ${boolean("auto-dismiss", false)}
     auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
@@ -54,7 +54,7 @@ TitleMessage.story = {
 
 export const MessageLink = (): string => html`
   <calcite-alert
-    theme="light"
+    class="calcite-theme-light"
     ${boolean("icon", true)}
     ${boolean("auto-dismiss", false)}
     auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
@@ -73,7 +73,7 @@ MessageLink.story = {
 
 export const Message = (): string => html`
   <calcite-alert
-    theme="light"
+    class="calcite-theme-light"
     ${boolean("icon", true)}
     ${boolean("auto-dismiss", false)}
     auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
@@ -87,7 +87,7 @@ export const Message = (): string => html`
 
 export const CustomIcon = (): string => html`
   <calcite-alert
-    theme="light"
+    class="calcite-theme-light"
     icon="${select("icon", iconNames, iconNames[0])}"
     ${boolean("auto-dismiss", false)}
     auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
@@ -124,19 +124,29 @@ export const Queue = (): string => html`
     <calcite-button color="red" onclick='document.querySelector("[data-custom-id=my-id]").removeAttribute("active")'
       >Close Alert 3</calcite-button
     >
-    <calcite-alert id="one" theme="light" icon color="${select("color", ["green", "red", "yellow", "blue"], "green")}">
+    <calcite-alert
+      id="one"
+      class="calcite-theme-light"
+      icon
+      color="${select("color", ["green", "red", "yellow", "blue"], "green")}"
+    >
       <div slot="title">Your great thing happened</div>
       <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
       <calcite-link slot="link" title="my action">View layer</calcite-link>
     </calcite-alert>
-    <calcite-alert id="two" theme="light" icon color="${select("color-2", ["green", "red", "yellow", "blue"], "blue")}">
+    <calcite-alert
+      id="two"
+      class="calcite-theme-light"
+      icon
+      color="${select("color-2", ["green", "red", "yellow", "blue"], "blue")}"
+    >
       <div slot="title">Your great thing happened</div>
       <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
       <calcite-link slot="link" title="my action">View layer</calcite-link>
     </calcite-alert>
     <calcite-alert
       data-custom-id="my-id"
-      theme="light"
+      class="calcite-theme-light"
       icon
       color="${select("color-3", ["green", "red", "yellow", "blue"], "red")}"
     >
@@ -149,7 +159,7 @@ export const Queue = (): string => html`
 
 export const DarkTheme = (): string => html`
   <calcite-alert
-    theme="dark"
+    class="calcite-theme-dark"
     ${boolean("icon", true)}
     ${boolean("auto-dismiss", false)}
     auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
@@ -159,7 +169,7 @@ export const DarkTheme = (): string => html`
   >
     <div slot="title">Something failed</div>
     <div slot="message">That thing you wanted to do didn't work as expected</div>
-    <calcite-link theme="dark" slot="link" title="my action">My action</calcite-link>
+    <calcite-link slot="link" title="my action">My action</calcite-link>
   </calcite-alert>
 `;
 
@@ -170,43 +180,61 @@ DarkTheme.story = {
 export const DarkThemeQueue = (): string => html`
   <div>
     <h5 style="color:white">Open or add to queue</h5>
-    <calcite-button theme="dark" onclick='document.querySelector("#one").setAttribute("active", "")'
+    <calcite-button class="calcite-theme-dark" onclick='document.querySelector("#one").setAttribute("active", "")'
       >Open Alert 1</calcite-button
     >
-    <calcite-button theme="dark" onclick='document.querySelector("#two").setAttribute("active", "")'
+    <calcite-button class="calcite-theme-dark" onclick='document.querySelector("#two").setAttribute("active", "")'
       >Open Alert 2</calcite-button
     >
-    <calcite-button theme="dark" onclick='document.querySelector("[data-custom-id=my-id]").setAttribute("active", "")'
+    <calcite-button
+      class="calcite-theme-dark"
+      onclick='document.querySelector("[data-custom-id=my-id]").setAttribute("active", "")'
       >Open Alert 3</calcite-button
     >
     <br />
     <br />
     <h5 style="color:white">Close or remove from queue</h5>
-    <calcite-button theme="dark" color="red" onclick='document.querySelector("#one").removeAttribute("active")'
+    <calcite-button
+      class="calcite-theme-dark"
+      color="red"
+      onclick='document.querySelector("#one").removeAttribute("active")'
       >Close Alert 1</calcite-button
     >
-    <calcite-button theme="dark" color="red" onclick='document.querySelector("#two").removeAttribute("active")'
+    <calcite-button
+      class="calcite-theme-dark"
+      color="red"
+      onclick='document.querySelector("#two").removeAttribute("active")'
       >Close Alert 2</calcite-button
     >
     <calcite-button
-      theme="dark"
+      class="calcite-theme-dark"
       color="red"
       onclick='document.querySelector("[data-custom-id=my-id]").removeAttribute("active")'
       >Close Alert 3</calcite-button
     >
-    <calcite-alert id="one" theme="dark" icon color="${select("color", ["green", "red", "yellow", "blue"], "green")}">
+    <calcite-alert
+      id="one"
+      class="calcite-theme-dark"
+      icon
+      color="${select("color", ["green", "red", "yellow", "blue"], "green")}"
+    >
       <div slot="title">Your great thing happened</div>
       <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
-      <calcite-link theme="dark" slot="link" title="my action">My action</calcite-link>
+      <calcite-link class="calcite-theme-dark" slot="link" title="my action">My action</calcite-link>
     </calcite-alert>
-    <calcite-alert id="two" theme="dark" icon color="${select("color-2", ["green", "red", "yellow", "blue"], "blue")}">
+    <calcite-alert
+      id="two"
+      class="calcite-theme-dark"
+      icon
+      color="${select("color-2", ["green", "red", "yellow", "blue"], "blue")}"
+    >
       <div slot="title">Your great thing happened</div>
       <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
-      <calcite-link theme="dark" slot="link" title="my action">My action</calcite-link>
+      <calcite-link class="calcite-theme-dark" slot="link" title="my action">My action</calcite-link>
     </calcite-alert>
     <calcite-alert
       data-custom-id="my-id"
-      theme="dark"
+      class="calcite-theme-dark"
       icon
       color="${select("color-3", ["green", "red", "yellow", "blue"], "red")}"
     >
@@ -222,7 +250,7 @@ DarkThemeQueue.story = {
 export const Rtl = (): string => html`
 <div dir="rtl">
 <calcite-alert
-theme="light"
+class="calcite-theme-dark"
 ${boolean("icon", true)}
 ${boolean("auto-dismiss", false)}
 auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
diff --git a/src/components/calcite-avatar/calcite-avatar.stories.ts b/src/components/calcite-avatar/calcite-avatar.stories.ts
index 08f00d4eb45..7467858a806 100644
--- a/src/components/calcite-avatar/calcite-avatar.stories.ts
+++ b/src/components/calcite-avatar/calcite-avatar.stories.ts
@@ -40,7 +40,7 @@ MissingThumbnail.story = {
 
 export const Dark = (): string => html`
   <calcite-avatar
-    theme="dark"
+    class="calcite-theme-dark"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     full-name="${text("full-name", "John Doe")}"
     username="${text("username", "jdoe")}"
diff --git a/src/components/calcite-block/calcite-block.stories.ts b/src/components/calcite-block/calcite-block.stories.ts
index 15037dc7f72..0191ea49c32 100644
--- a/src/components/calcite-block/calcite-block.stories.ts
+++ b/src/components/calcite-block/calcite-block.stories.ts
@@ -87,9 +87,9 @@ const createBlockAttributes: (options?: { exceptions: string[] }) => Attributes
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue, group);
+          this.value = select("class", theme.values, theme.defaultValue, group);
           delete this.build;
           return this;
         }
diff --git a/src/components/calcite-button/calcite-button.e2e.ts b/src/components/calcite-button/calcite-button.e2e.ts
index dedcf717786..6e376152f12 100644
--- a/src/components/calcite-button/calcite-button.e2e.ts
+++ b/src/components/calcite-button/calcite-button.e2e.ts
@@ -333,7 +333,7 @@ describe("calcite-button", () => {
     describe("when theme attribute is dark", () => {
       it("should render button pseudo classes with value tied to dark theme", async () => {
         page = await newE2EPage({
-          html: `<div theme="dark">${buttonSnippet}</div>`
+          html: `<div class="calcite-theme-dark">${buttonSnippet}</div>`
         });
         buttonEl = await page.find("calcite-button >>> button");
         await buttonEl.focus();
diff --git a/src/components/calcite-button/calcite-button.stories.ts b/src/components/calcite-button/calcite-button.stories.ts
index f9eed943374..509afa7cd59 100644
--- a/src/components/calcite-button/calcite-button.stories.ts
+++ b/src/components/calcite-button/calcite-button.stories.ts
@@ -142,7 +142,7 @@ SideBySide.story = {
 
 export const DarkMode = (): string => html`
   <calcite-button
-    theme="dark"
+    class="calcite-theme-dark"
     appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
     color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
@@ -165,7 +165,7 @@ DarkMode.story = {
 export const RTL = (): string => html`
   <calcite-button
     dir="rtl"
-    theme="dark"
+    class="calcite-theme-dark"
     appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
     color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
diff --git a/src/components/calcite-card/calcite-card.stories.ts b/src/components/calcite-card/calcite-card.stories.ts
index 61352905616..30933a2723d 100644
--- a/src/components/calcite-card/calcite-card.stories.ts
+++ b/src/components/calcite-card/calcite-card.stories.ts
@@ -29,8 +29,8 @@ export const SimpleWithLinks = (): string => html`
       <span slot="subtitle"
         >A great example of a study description that might wrap to a line or two, but isn't overly verbose.</span
       >
-      <calcite-link theme="dark" slot="footer-leading">Lead footer</calcite-link>
-      <calcite-link theme="dark" slot="footer-trailing">Trail footer</calcite-link>
+      <calcite-link class="calcite-theme-dark" slot="footer-leading">Lead footer</calcite-link>
+      <calcite-link class="calcite-theme-dark" slot="footer-trailing">Trail footer</calcite-link>
     </calcite-card>
   </div>
 `;
@@ -148,7 +148,7 @@ FooterButtonsTooltipsDropdown.story = {
 
 export const DarkThemeSimple = (): string => html`
   <div style="width:260px">
-    <calcite-card theme="dark" ${boolean("loading", false)} ${boolean("selectable", false)}>
+    <calcite-card class="calcite-theme-dark" ${boolean("loading", false)} ${boolean("selectable", false)}>
       <h3 slot="title">ArcGIS Online: Gallery and Organization pages</h3>
       <span slot="subtitle"
         >A great example of a study description that might wrap to a line or two, but isn't overly verbose.</span
@@ -164,13 +164,13 @@ DarkThemeSimple.story = {
 
 export const DarkThemeSimpleWithLinks = (): string => html`
   <div style="width:260px">
-    <calcite-card theme="dark" ${boolean("loading", false)} ${boolean("selectable", false)}>
+    <calcite-card class="calcite-theme-dark" ${boolean("loading", false)} ${boolean("selectable", false)}>
       <h3 slot="title">ArcGIS Online: Gallery and Organization pages</h3>
       <span slot="subtitle"
         >A great example of a study description that might wrap to a line or two, but isn't overly verbose.</span
       >
-      <calcite-link theme="dark" theme="dark" slot="footer-leading">Lead footer</calcite-link>
-      <calcite-link theme="dark" theme="dark" slot="footer-trailing">Trail footer</calcite-link>
+      <calcite-link slot="footer-leading">Lead footer</calcite-link>
+      <calcite-link slot="footer-trailing">Trail footer</calcite-link>
     </calcite-card>
   </div>
 `;
@@ -182,11 +182,11 @@ DarkThemeSimpleWithLinks.story = {
 
 export const DarkThemeFooterButton = (): string => html`
   <div style="width:260px">
-    <calcite-card theme="dark" ${boolean("loading", false)} ${boolean("selectable", false)}>
+    <calcite-card class="calcite-theme-dark" ${boolean("loading", false)} ${boolean("selectable", false)}>
       ${footerThumbnail}
       <h3 slot="title">Untitled experience</h3>
       <span slot="subtitle">Subtext</span>
-      <calcite-button theme="dark" slot="footer-leading" width="full">Go</calcite-button>
+      <calcite-button slot="footer-leading" width="full">Go</calcite-button>
     </calcite-card>
   </div>
 `;
@@ -198,14 +198,14 @@ DarkThemeFooterButton.story = {
 
 export const DarkThemeFooterLinks = (): string => html`
   <div style="width:260px">
-    <calcite-card theme="dark" ${boolean("loading", false)} ${boolean("selectable", false)}>
+    <calcite-card class="calcite-theme-dark" ${boolean("loading", false)} ${boolean("selectable", false)}>
       ${footerThumbnail}
       <h3 slot="title">My perhaps multiline card title</h3>
       <span slot="subtitle"
         >A great example of a study description that might wrap to a line or two, but isn't overly verbose.</span
       >
-      <calcite-link theme="dark" slot="footer-leading">Lead footer</calcite-link>
-      <calcite-link theme="dark" slot="footer-trailing">Trail footer</calcite-link>
+      <calcite-link slot="footer-leading">Lead footer</calcite-link>
+      <calcite-link slot="footer-trailing">Trail footer</calcite-link>
     </calcite-card>
   </div>
 `;
@@ -218,7 +218,7 @@ DarkThemeFooterLinks.story = {
 export const DarkThemeFooterTextButtonsTooltips = (): string => html`
   <div style="width:260px">
     <calcite-tooltip-manager>
-      <calcite-card theme="dark" ${boolean("loading", false)} ${boolean("selectable", false)}>
+      <calcite-card class="calcite-theme-dark" ${boolean("loading", false)} ${boolean("selectable", false)}>
         ${footerThumbnail}
         <h3 slot="title">My great project that might wrap two lines</h3>
         <span slot="subtitle">Johnathan Smith</span>
@@ -232,8 +232,12 @@ export const DarkThemeFooterTextButtonsTooltips = (): string => html`
       </calcite-card>
     </calcite-tooltip-manager>
   </div>
-  <calcite-tooltip placement="bottom" theme="dark" reference-element="card-icon-test-6">Configure </calcite-tooltip>
-  <calcite-tooltip placement="bottom" theme="dark" reference-element="card-icon-test-7">Delete </calcite-tooltip>
+  <calcite-tooltip placement="bottom" class="calcite-theme-dark" reference-element="card-icon-test-6"
+    >Configure
+  </calcite-tooltip>
+  <calcite-tooltip placement="bottom" class="calcite-theme-dark" reference-element="card-icon-test-7"
+    >Delete
+  </calcite-tooltip>
 `;
 
 DarkThemeFooterTextButtonsTooltips.story = {
@@ -244,7 +248,7 @@ DarkThemeFooterTextButtonsTooltips.story = {
 export const DarkThemeFooterButtonsTooltipsDropdown = (): string => html`
   <div style="width:260px">
     <calcite-tooltip-manager>
-      <calcite-card theme="dark" ${boolean("loading", false)} ${boolean("selectable", false)}>
+      <calcite-card class="calcite-theme-dark" ${boolean("loading", false)} ${boolean("selectable", false)}>
         <img
           alt=""
           slot="thumbnail"
@@ -254,7 +258,7 @@ export const DarkThemeFooterButtonsTooltipsDropdown = (): string => html`
         <h3 slot="title">Portland Businesses</h3>
         <span slot="subtitle"
           >by
-          <calcite-link theme="dark" href="">example_user</calcite-link>
+          <calcite-link href="">example_user</calcite-link>
         </span>
         <div>
           Created: Apr 22, 2019
@@ -272,14 +276,14 @@ export const DarkThemeFooterButtonsTooltipsDropdown = (): string => html`
         ></calcite-button>
         <div slot="footer-trailing">
           <calcite-button
-            theme="dark"
+            class="calcite-theme-dark"
             color="neutral"
             scale="s"
             id="card-icon-test-2"
             icon-start="circle"
           ></calcite-button>
           <calcite-button
-            theme="dark"
+            class="calcite-theme-dark"
             color="neutral"
             scale="s"
             id="card-icon-test-3"
@@ -287,7 +291,7 @@ export const DarkThemeFooterButtonsTooltipsDropdown = (): string => html`
           ></calcite-button>
           <calcite-dropdown type="hover">
             <calcite-button
-              theme="dark"
+              class="calcite-theme-dark"
               color="neutral"
               id="card-icon-test-5"
               slot="dropdown-trigger"
@@ -305,23 +309,27 @@ export const DarkThemeFooterButtonsTooltipsDropdown = (): string => html`
     </calcite-tooltip-manager>
   </div>
   <calcite-tooltip
-    theme="dark"
+    class="calcite-theme-dark"
     label="bottom placed tooltip"
     placement="bottom-start"
     reference-element="card-icon-test-1"
     >My great tooltip example
   </calcite-tooltip>
   <calcite-tooltip
-    theme="dark"
+    class="calcite-theme-dark"
     label="bottom placed tooltip"
     placement="bottom-start"
     reference-element="card-icon-test-2"
     >Sharing level: 2
   </calcite-tooltip>
-  <calcite-tooltip theme="dark" label="top end placed tooltip" placement="top-end" reference-element="card-icon-test-3"
+  <calcite-tooltip
+    class="calcite-theme-dark"
+    label="top end placed tooltip"
+    placement="top-end"
+    reference-element="card-icon-test-3"
     >More...
   </calcite-tooltip>
-  <calcite-tooltip theme="dark" placement="top-start" reference-element="card-icon-test-5"
+  <calcite-tooltip class="calcite-theme-dark" placement="top-start" reference-element="card-icon-test-5"
     >More options
   </calcite-tooltip>
 `;
diff --git a/src/components/calcite-checkbox/calcite-checkbox.stories.ts b/src/components/calcite-checkbox/calcite-checkbox.stories.ts
index aa049867091..d6f66e1fa1f 100644
--- a/src/components/calcite-checkbox/calcite-checkbox.stories.ts
+++ b/src/components/calcite-checkbox/calcite-checkbox.stories.ts
@@ -24,9 +24,8 @@ export const Simple = (): string => html`
   </calcite-label>
 `;
 export const DarkMode = (): string => html`
-  <calcite-label layout="inline" theme="dark">
+  <calcite-label layout="inline" class="calcite-theme-dark">
     <calcite-checkbox
-      theme="dark"
       ${boolean("checked", true)}
       ${boolean("disabled", false)}
       ${boolean("indeterminate", false)}
diff --git a/src/components/calcite-chip/calcite-chip.e2e.ts b/src/components/calcite-chip/calcite-chip.e2e.ts
index b9beafdfa87..8b25c59c664 100644
--- a/src/components/calcite-chip/calcite-chip.e2e.ts
+++ b/src/components/calcite-chip/calcite-chip.e2e.ts
@@ -108,7 +108,7 @@ describe("calcite-chip", () => {
     describe("when theme attribute is dark", () => {
       it("should render button pseudo classes with value tied to dark theme", async () => {
         page = await newE2EPage({
-          html: `<div theme="dark">${chipSnippet}</div>`
+          html: `<div class="calcite-theme-dark">${chipSnippet}</div>`
         });
         chipCloseButton = await page.find("calcite-chip >>> button");
         await chipCloseButton.focus();
diff --git a/src/components/calcite-chip/calcite-chip.stories.ts b/src/components/calcite-chip/calcite-chip.stories.ts
index 83a517e5192..ae25ffebe51 100644
--- a/src/components/calcite-chip/calcite-chip.stories.ts
+++ b/src/components/calcite-chip/calcite-chip.stories.ts
@@ -78,7 +78,7 @@ export const WithAvatar = (): string => {
 export const DarkTheme = (): string => html`
   <div style="background-color:#2b2b2b;padding:100px">
     <calcite-chip
-      theme="dark"
+      class="calcite-theme-dark"
       scale="${select("scale", ["s", "m", "l"], "m")}"
       appearance="${select("appearance", ["solid", "clear"], "solid")}"
       color="${select("color", ["blue", "red", "yellow", "green", "grey"], "grey")}"
diff --git a/src/components/calcite-color-picker/calcite-color-picker.stories.ts b/src/components/calcite-color-picker/calcite-color-picker.stories.ts
index a5809609751..bf5b02a9e4d 100644
--- a/src/components/calcite-color-picker/calcite-color-picker.stories.ts
+++ b/src/components/calcite-color-picker/calcite-color-picker.stories.ts
@@ -90,7 +90,7 @@ export const RTL = (): string =>
 export const DarkMode = (): string =>
   create("calcite-color-picker", [
     ...createColorAttributes(),
-    { name: "theme", value: "dark" },
+    { name: "class", value: "calcite-theme-dark" },
     {
       name: "value",
       value: text("value", "#b33f33")
diff --git a/src/components/calcite-combobox/calcite-combobox.stories.ts b/src/components/calcite-combobox/calcite-combobox.stories.ts
index 932e77af116..64324e80540 100644
--- a/src/components/calcite-combobox/calcite-combobox.stories.ts
+++ b/src/components/calcite-combobox/calcite-combobox.stories.ts
@@ -81,7 +81,7 @@ export const DarkTheme = (): string => html`
     <calcite-combobox
       label="demo combobox"
       selection-mode="${select("selection-mode", ["multi", "single", "ancestors"], "multi")}"
-      theme="dark"
+      class="calcite-theme-dark"
       placeholder="${text("placeholder", "placeholder")}"
       label="${text("label (for screen readers)", "demo")}"
       scale="${select("scale", ["s", "m", "l"], "m")}"
diff --git a/src/components/calcite-date-picker/calcite-date-picker.stories.ts b/src/components/calcite-date-picker/calcite-date-picker.stories.ts
index c60e43e722b..9be625437cb 100644
--- a/src/components/calcite-date-picker/calcite-date-picker.stories.ts
+++ b/src/components/calcite-date-picker/calcite-date-picker.stories.ts
@@ -33,10 +33,9 @@ Simple.story = {
 
 export const DarkMode = (): string => html`
   <div style="width: 400px">
-    <calcite-label layout="inline" theme="dark">
+    <calcite-label layout="inline" class="calcite-theme-dark">
       Date
       <calcite-date-picker
-        theme="dark"
         scale="${select("scale", ["s", "m", "l"], "m")}"
         value="${text("value", "2020-12-12")}"
         min="${text("min", "2016-08-09")}"
diff --git a/src/components/calcite-dropdown/calcite-dropdown.stories.ts b/src/components/calcite-dropdown/calcite-dropdown.stories.ts
index a3144b5a909..52df6c75cf3 100644
--- a/src/components/calcite-dropdown/calcite-dropdown.stories.ts
+++ b/src/components/calcite-dropdown/calcite-dropdown.stories.ts
@@ -202,7 +202,7 @@ AMixOfLinksAndNonLinks.story = {
 
 export const DarkTheme = (): string => html`
   <calcite-dropdown
-    theme="dark"
+    class="calcite-theme-dark"
     placement="${select("placement", calcite_placements, "bottom-leading")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     width="${select("width", ["s", "m", "l"], "m")}"
@@ -210,7 +210,7 @@ export const DarkTheme = (): string => html`
     ${boolean("disable-close-on-select", false)}
     ${boolean("disabled", false)}
   >
-    <calcite-button slot="dropdown-trigger" theme="dark">Open Dropdown</calcite-button>
+    <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
     <calcite-dropdown-group
       selection-mode="${select("group selection mode", ["single", "multi", "none"], "single")}"
       group-title="Sort by"
@@ -229,7 +229,7 @@ DarkTheme.story = {
 
 export const WithIconsDarkTheme = (): string => html`
   <calcite-dropdown
-    theme="dark"
+    class="calcite-theme-dark"
     placement="${select("placement", calcite_placements, "bottom-leading")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     width="${select("width", ["s", "m", "l"], "m")}"
@@ -237,7 +237,7 @@ export const WithIconsDarkTheme = (): string => html`
     ${boolean("disable-close-on-select", false)}
     ${boolean("disabled", false)}
   >
-    <calcite-button theme="dark" slot="dropdown-trigger">Open Dropdown</calcite-button>
+    <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
     <calcite-dropdown-group
       selection-mode="${select("group selection mode", ["single", "multi", "none"], "single")}"
       group-title="Icon Start"
@@ -272,14 +272,14 @@ WithIconsDarkTheme.story = {
 
 export const GroupsAndSelectionModesDarkTheme = (): string => html`
   <calcite-dropdown
-    theme="dark"
+    class="calcite-theme-dark"
     placement="${select("placement", calcite_placements, "bottom-leading")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     type="${select("type", ["click", "hover"], "click")}"
     ${boolean("disable-close-on-select", false)}
     ${boolean("disabled", false)}
   >
-    <calcite-button theme="dark" slot="dropdown-trigger">Open Dropdown</calcite-button>
+    <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
     <calcite-dropdown-group group-title="Select one">
       <calcite-dropdown-item>Apple</calcite-dropdown-item>
       <calcite-dropdown-item active>Orange</calcite-dropdown-item>
@@ -304,7 +304,7 @@ GroupsAndSelectionModesDarkTheme.story = {
 
 export const ItemsAsLinksDarkTheme = (): string => html`
   <calcite-dropdown
-    theme="dark"
+    class="calcite-theme-dark"
     placement="${select("placement", calcite_placements, "bottom-leading")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     width="${select("width", ["s", "m", "l"], "m")}"
@@ -312,7 +312,7 @@ export const ItemsAsLinksDarkTheme = (): string => html`
     ${boolean("disable-close-on-select", false)}
     ${boolean("disabled", false)}
   >
-    <calcite-button theme="dark" slot="dropdown-trigger">Open Dropdown</calcite-button>
+    <calcite-button slot="dropdown-trigger">Open Dropdown</calcite-button>
     <calcite-dropdown-group selection-mode="none" group-title="Select one">
       <calcite-dropdown-item href="http://google.com" target="_blank" title="Test title"
         >Throw Apples</calcite-dropdown-item
diff --git a/src/components/calcite-fab/calcite-fab.stories.ts b/src/components/calcite-fab/calcite-fab.stories.ts
index 34d493b5f0a..8cc56e2d5de 100644
--- a/src/components/calcite-fab/calcite-fab.stories.ts
+++ b/src/components/calcite-fab/calcite-fab.stories.ts
@@ -95,9 +95,9 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue);
+          this.value = select("class", theme.values, theme.defaultValue);
           delete this.build;
           return this;
         }
@@ -111,14 +111,14 @@ export const basic = (): string => create("calcite-fab", createAttributes());
 export const darkThemeRTL = (): string =>
   create(
     "calcite-fab",
-    createAttributes({ exceptions: ["dir", "theme"] }).concat([
+    createAttributes({ exceptions: ["dir", "class"] }).concat([
       {
         name: "dir",
         value: "rtl"
       },
       {
-        name: "theme",
-        value: "dark"
+        name: "class",
+        value: "calcite-theme-dark"
       }
     ])
   );
diff --git a/src/components/calcite-flow/calcite-flow.stories.ts b/src/components/calcite-flow/calcite-flow.stories.ts
index 576155f6a30..89a32419f3a 100644
--- a/src/components/calcite-flow/calcite-flow.stories.ts
+++ b/src/components/calcite-flow/calcite-flow.stories.ts
@@ -38,9 +38,9 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue, group);
+          this.value = select("class", theme.values, theme.defaultValue, group);
           delete this.build;
           return this;
         }
diff --git a/src/components/calcite-icon/calcite-icon.stories.ts b/src/components/calcite-icon/calcite-icon.stories.ts
index 13eb907d54c..5c27509212c 100644
--- a/src/components/calcite-icon/calcite-icon.stories.ts
+++ b/src/components/calcite-icon/calcite-icon.stories.ts
@@ -29,7 +29,7 @@ export const darkMode = (): string => html`
       color: var(--calcite-ui-warning);
     }
   </style>
-  <calcite-icon icon="${select("icon", iconNames, sampleIcon)}" theme="dark"></calcite-icon>
+  <calcite-icon icon="${select("icon", iconNames, sampleIcon)}" class="calcite-theme-dark"></calcite-icon>
 `;
 
 darkMode.parameters = { backgrounds: darkBackground };
diff --git a/src/components/calcite-inline-editable/calcite-inline-editable.stories.ts b/src/components/calcite-inline-editable/calcite-inline-editable.stories.ts
index 04168358959..a2a2d5ec162 100644
--- a/src/components/calcite-inline-editable/calcite-inline-editable.stories.ts
+++ b/src/components/calcite-inline-editable/calcite-inline-editable.stories.ts
@@ -95,7 +95,7 @@ export const WithoutLabelRTL = (): string => html`
 export const DarkMode = (): string => html`
   <div style="width:300px;max-width:100%;">
     <calcite-label
-      theme="dark"
+      class="calcite-theme-dark"
       status="${select("status", ["idle", "valid", "invalid"], "idle", "Label")}"
       scale="${select("scale", ["s", "m", "l"], "m", "Label")}"
       layout="${select("layout", ["default", "inline", "inline-space-between"], "default", "Label")}"
diff --git a/src/components/calcite-input-date-picker/calcite-input-date-picker.stories.ts b/src/components/calcite-input-date-picker/calcite-input-date-picker.stories.ts
index 2d4b444b1cc..54b7d4778dc 100644
--- a/src/components/calcite-input-date-picker/calcite-input-date-picker.stories.ts
+++ b/src/components/calcite-input-date-picker/calcite-input-date-picker.stories.ts
@@ -32,10 +32,9 @@ export const Simple = (): string => html`
 
 export const DarkMode = (): string => html`
   <div style="width: 400px">
-    <calcite-label layout="inline" theme="dark">
+    <calcite-label layout="inline" class="calcite-theme-dark">
       Date
       <calcite-input-date-picker
-        theme="dark"
         scale="${select("scale", ["s", "m", "l"], "m")}"
         value="${text("value", "2020-12-12")}"
         min="${text("min", "2016-08-09")}"
diff --git a/src/components/calcite-input/calcite-input.stories.ts b/src/components/calcite-input/calcite-input.stories.ts
index 5ad18a91339..2fcedd3655c 100644
--- a/src/components/calcite-input/calcite-input.stories.ts
+++ b/src/components/calcite-input/calcite-input.stories.ts
@@ -187,7 +187,7 @@ export const Textarea = (): string => html`
 
 export const SimpleDarkMode = (): string => html`
   <div style="width:300px;max-width:100%;text-align:center;">
-    <calcite-label theme="dark" status="${select("status", ["idle", "valid", "invalid"], "idle")}">
+    <calcite-label class="calcite-theme-dark" status="${select("status", ["idle", "valid", "invalid"], "idle")}">
       ${text("label text", "My great label")}
       <calcite-input
         type="${select(
diff --git a/src/components/calcite-label/calcite-label.stories.ts b/src/components/calcite-label/calcite-label.stories.ts
index 8dac388196c..fcb535bdea7 100644
--- a/src/components/calcite-label/calcite-label.stories.ts
+++ b/src/components/calcite-label/calcite-label.stories.ts
@@ -86,11 +86,11 @@ WrappingComponentsOtherThanInput.story = {
 
 export const DarkTheme = (): string => html`
   <div style="width:300px;max-width:100%;text-align:center;">
-    <calcite-label theme="dark">
+    <calcite-label class="calcite-theme-dark">
       Default label wrapping a switch
-      <calcite-switch theme="dark"></calcite-switch>
+      <calcite-switch></calcite-switch>
     </calcite-label>
-    <calcite-label theme="dark">
+    <calcite-label class="calcite-theme-dark">
       Default label wrapping a radio group
       <calcite-radio-group>
         <calcite-radio-group-item value="react" checked>React</calcite-radio-group-item>
@@ -98,49 +98,49 @@ export const DarkTheme = (): string => html`
         <calcite-radio-group-item value="angular">Angular</calcite-radio-group-item>
       </calcite-radio-group>
     </calcite-label>
-    <calcite-label theme="dark" layout="inline">
+    <calcite-label class="calcite-theme-dark" layout="inline">
       Text leading inline
-      <calcite-switch theme="dark"></calcite-switch>
+      <calcite-switch></calcite-switch>
     </calcite-label>
-    <calcite-label theme="dark" layout="inline">
-      <calcite-switch theme="dark"></calcite-switch>
+    <calcite-label class="calcite-theme-dark" layout="inline">
+      <calcite-switch></calcite-switch>
       Text trailing inline
     </calcite-label>
-    <calcite-label theme="dark" layout="inline">
+    <calcite-label class="calcite-theme-dark" layout="inline">
       Off
-      <calcite-switch theme="dark"></calcite-switch>
+      <calcite-switch></calcite-switch>
       On
     </calcite-label>
-    <calcite-label theme="dark" layout="inline">
+    <calcite-label class="calcite-theme-dark" layout="inline">
       Text leading inline
-      <calcite-checkbox theme="dark"></calcite-checkbox>
+      <calcite-checkbox></calcite-checkbox>
     </calcite-label>
-    <calcite-label theme="dark">
+    <calcite-label class="calcite-theme-dark">
       Focus slider test
-      <calcite-slider theme="dark"></calcite-slider>
+      <calcite-slider></calcite-slider>
     </calcite-label>
-    <calcite-label theme="dark">
+    <calcite-label class="calcite-theme-dark">
       Focus slider test
-      <calcite-slider theme="dark" min-value="10" max-value="80"></calcite-slider>
+      <calcite-slider min-value="10" max-value="80"></calcite-slider>
     </calcite-label>
-    <calcite-label theme="dark" layout="inline">
-      <calcite-checkbox theme="dark"></calcite-checkbox>
+    <calcite-label class="calcite-theme-dark" layout="inline">
+      <calcite-checkbox></calcite-checkbox>
       Text trailing inline
     </calcite-label>
-    <calcite-label theme="dark" layout="inline-space-between">
+    <calcite-label class="calcite-theme-dark" layout="inline-space-between">
       Text leading inline-space-between
-      <calcite-switch theme="dark"></calcite-switch>
+      <calcite-switch></calcite-switch>
     </calcite-label>
-    <calcite-label theme="dark" layout="inline-space-between">
-      <calcite-switch theme="dark"></calcite-switch>
+    <calcite-label class="calcite-theme-dark" layout="inline-space-between">
+      <calcite-switch></calcite-switch>
       Text trailing inline-space-between
     </calcite-label>
-    <calcite-label theme="dark" layout="inline-space-between">
+    <calcite-label class="calcite-theme-dark" layout="inline-space-between">
       Text leading inline-space-between
-      <calcite-checkbox theme="dark"></calcite-checkbox>
+      <calcite-checkbox></calcite-checkbox>
     </calcite-label>
-    <calcite-label theme="dark" layout="inline-space-between">
-      <calcite-checkbox theme="dark"></calcite-checkbox>
+    <calcite-label class="calcite-theme-dark" layout="inline-space-between">
+      <calcite-checkbox></calcite-checkbox>
       Text trailing inline-space-between
     </calcite-label>
   </div>
diff --git a/src/components/calcite-link/calcite-link.e2e.ts b/src/components/calcite-link/calcite-link.e2e.ts
index 9f42c383a6c..5ec5ea59602 100644
--- a/src/components/calcite-link/calcite-link.e2e.ts
+++ b/src/components/calcite-link/calcite-link.e2e.ts
@@ -217,7 +217,7 @@ describe("calcite-link", () => {
     describe("when theme attribute is dark", () => {
       it("should render link background with value tied to dark theme", async () => {
         page = await newE2EPage({
-          html: `<article theme="dark">${linkHtml}</article>`
+          html: `<article class="calcite-theme-dark">${linkHtml}</article>`
         });
         link = await page.find("calcite-link >>> a");
         linkStyles = await link.getComputedStyle();
diff --git a/src/components/calcite-link/calcite-link.stories.ts b/src/components/calcite-link/calcite-link.stories.ts
index ccd1d1324b9..87f64f86291 100644
--- a/src/components/calcite-link/calcite-link.stories.ts
+++ b/src/components/calcite-link/calcite-link.stories.ts
@@ -116,7 +116,7 @@ export const DarkMode = (): string => html`
     )}px; font-weight: ${select("containing font weight", ["300", "400", "500", "700"], "400")};"
   >
     Some wrapping text
-    <calcite-link theme="dark" href="${text("href", "")}" ${boolean("disabled", false)}
+    <calcite-link class="calcite-theme-dark" href="${text("href", "")}" ${boolean("disabled", false)}
       >${text("text", "link text here")}</calcite-link
     >
     around the link
diff --git a/src/components/calcite-loader/calcite-loader.stories.ts b/src/components/calcite-loader/calcite-loader.stories.ts
index 3259f269230..c9e6e4fe55c 100644
--- a/src/components/calcite-loader/calcite-loader.stories.ts
+++ b/src/components/calcite-loader/calcite-loader.stories.ts
@@ -39,7 +39,7 @@ export const DarkMode = (): string => html`
     ${boolean("no-padding", false)}
     value="${number("value", 0, { range: true, min: 0, max: 100, step: 1 })}"
     active
-    theme="dark"
+    class="calcite-theme-dark"
   />
 `;
 
diff --git a/src/components/calcite-modal/calcite-modal.stories.ts b/src/components/calcite-modal/calcite-modal.stories.ts
index 77bf7db7635..d6854cc6729 100644
--- a/src/components/calcite-modal/calcite-modal.stories.ts
+++ b/src/components/calcite-modal/calcite-modal.stories.ts
@@ -56,7 +56,7 @@ export const CustomSize = (): string => html`
 
 export const DarkMode = (): string => html`
   <calcite-modal
-    theme="dark"
+    class="calcite-theme-dark"
     ${boolean("active", true)}
     color="${select("color", { blue: "blue", red: "red", none: "" }, "")}"
     background-color="${select("background-color", ["white", "grey"], "white")}"
@@ -72,11 +72,11 @@ export const DarkMode = (): string => html`
     <div slot="content">
       <p>The small modal is perfect for short confirmation dialogs or very compact interfaces with few elements.</p>
     </div>
-    <calcite-button theme="dark" slot="back" color="neutral" appearance="outline" icon="chevron-left" width="full"
+    <calcite-button slot="back" color="neutral" appearance="outline" icon="chevron-left" width="full"
       >Back</calcite-button
     >
-    <calcite-button theme="dark" slot="secondary" width="full" appearance="outline">Cancel</calcite-button>
-    <calcite-button theme="dark" slot="primary" width="full">Save</calcite-button>
+    <calcite-button slot="secondary" width="full" appearance="outline">Cancel</calcite-button>
+    <calcite-button slot="primary" width="full">Save</calcite-button>
   </calcite-modal>
 `;
 
diff --git a/src/components/calcite-notice/calcite-notice.stories.ts b/src/components/calcite-notice/calcite-notice.stories.ts
index 44692215264..5b04dbc2e39 100644
--- a/src/components/calcite-notice/calcite-notice.stories.ts
+++ b/src/components/calcite-notice/calcite-notice.stories.ts
@@ -15,7 +15,7 @@ export default {
 export const Simple = (): string => html`
   <div style="width:600px;max-width:100%;text-align:center;">
     <calcite-notice
-      theme="light"
+      class="calcite-theme-light"
       ${boolean("icon", true)}
       ${boolean("active", true)}
       ${boolean("dismissible", true)}
@@ -33,7 +33,7 @@ export const Simple = (): string => html`
 export const CustomIcon = (): string => html`
   <div style="width:600px;max-width:100%;text-align:center;">
     <calcite-notice
-      theme="light"
+      class="calcite-theme-light"
       icon="${select("icon", iconNames, iconNames[0])}"
       ${boolean("active", true)}
       ${boolean("dismissible", true)}
@@ -55,7 +55,7 @@ CustomIcon.story = {
 export const DarkMode = (): string => html`
   <div style="width:600px;max-width:100%;text-align:center;">
     <calcite-notice
-      theme="dark"
+      class="calcite-theme-dark"
       ${boolean("icon", true)}
       ${boolean("active", true)}
       ${boolean("dismissible", false)}
@@ -76,7 +76,7 @@ DarkMode.story = {
 export const Rtl = (): string => html`
   <div dir="rtl" style="width:600px;max-width:100%;text-align:center;">
     <calcite-notice
-      theme="light"
+      class="calcite-theme-light"
       ${boolean("icon", true)}
       ${boolean("active", true)}
       ${boolean("dismissible", true)}
diff --git a/src/components/calcite-pagination/calcite-pagination.stories.ts b/src/components/calcite-pagination/calcite-pagination.stories.ts
index 0ad256e3914..fb61c7def64 100644
--- a/src/components/calcite-pagination/calcite-pagination.stories.ts
+++ b/src/components/calcite-pagination/calcite-pagination.stories.ts
@@ -19,7 +19,7 @@ export const Simple = (): string => html`
     total="${number("total", 128)}"
     num="${number("num", 20)}"
     dir="${select("dir", ["ltr", "rtl"], "ltr")}"
-    theme="light"
+    class="calcite-theme-light"
   >
   </calcite-pagination>
 `;
@@ -31,7 +31,7 @@ export const DarkMode = (): string => html`
     total="${number("total", 128)}"
     num="${number("num", 20)}"
     dir="${select("dir", ["ltr", "rtl"], "ltr")}"
-    theme="dark"
+    class="calcite-theme-dark"
   >
   </calcite-pagination>
 `;
@@ -48,7 +48,7 @@ export const RTL = (): string => html`
     total="${number("total", 128)}"
     num="${number("num", 20)}"
     dir="${select("dir", ["ltr", "rtl"], "ltr")}"
-    theme="light"
+    class="calcite-theme-light"
   >
   </calcite-pagination>
 `;
diff --git a/src/components/calcite-panel/calcite-panel.stories.ts b/src/components/calcite-panel/calcite-panel.stories.ts
index 5b15af80e2a..9b65825bd2b 100644
--- a/src/components/calcite-panel/calcite-panel.stories.ts
+++ b/src/components/calcite-panel/calcite-panel.stories.ts
@@ -81,9 +81,9 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue);
+          this.value = select("class", theme.values, theme.defaultValue);
           delete this.build;
           return this;
         }
@@ -136,14 +136,14 @@ export const basic = (): string => create("calcite-panel", createAttributes(), p
 export const darkThemeRTL = (): string =>
   create(
     "calcite-panel",
-    createAttributes({ exceptions: ["dir", "theme"] }).concat([
+    createAttributes({ exceptions: ["dir", "class"] }).concat([
       {
         name: "dir",
         value: "rtl"
       },
       {
-        name: "theme",
-        value: "dark"
+        name: "class",
+        value: "calcite-theme-dark"
       }
     ]),
     panelContent
diff --git a/src/components/calcite-pick-list/calcite-pick-list.stories.ts b/src/components/calcite-pick-list/calcite-pick-list.stories.ts
index 2b91b2a6869..21e0b7dada5 100644
--- a/src/components/calcite-pick-list/calcite-pick-list.stories.ts
+++ b/src/components/calcite-pick-list/calcite-pick-list.stories.ts
@@ -64,9 +64,9 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue);
+          this.value = select("class", theme.values, theme.defaultValue);
           delete this.build;
           return this;
         }
@@ -105,14 +105,14 @@ export const basic = (): string =>
 export const darkThemeRTL = (): string =>
   create(
     "calcite-pick-list",
-    createAttributes({ exceptions: ["dir", "theme"] }).concat([
+    createAttributes({ exceptions: ["dir", "class"] }).concat([
       {
         name: "dir",
         value: "rtl"
       },
       {
-        name: "theme",
-        value: "dark"
+        name: "class",
+        value: "calcite-theme-dark"
       }
     ]),
     html`
diff --git a/src/components/calcite-popover/calcite-popover.stories.ts b/src/components/calcite-popover/calcite-popover.stories.ts
index fb804f47ef3..ea1ca7e3799 100644
--- a/src/components/calcite-popover/calcite-popover.stories.ts
+++ b/src/components/calcite-popover/calcite-popover.stories.ts
@@ -61,7 +61,7 @@ export const Simple = (): string => {
       <div>
         ${referenceElementHTML}
         <calcite-popover
-          theme="light"
+        class="calcite-theme-light"
           ${boolean("close-button", false)}
           ${boolean("disable-flip", false)}
           ${boolean("disable-pointer", false)}
@@ -85,7 +85,7 @@ export const RTL = (): string => {
       <div dir="rtl">
         ${referenceElementHTML}
         <calcite-popover
-          theme="${select("theme", theme.values, theme.defaultValue)}"
+          class="${select("class", theme.values, theme.defaultValue)}"
           ${boolean("close-button", false)}
           ${boolean("disable-flip", false)}
           ${boolean("disable-pointer", false)}
@@ -107,7 +107,7 @@ export const DarkMode = (): string => {
       <div>
         ${referenceElementHTML}
         <calcite-popover
-          theme="dark"
+        class="calcite-theme-dark"
           ${boolean("close-button", false)}
           ${boolean("disable-flip", false)}
           ${boolean("disable-pointer", false)}
diff --git a/src/components/calcite-progress/calcite-progress.stories.ts b/src/components/calcite-progress/calcite-progress.stories.ts
index 0256946958b..85c3487f94a 100644
--- a/src/components/calcite-progress/calcite-progress.stories.ts
+++ b/src/components/calcite-progress/calcite-progress.stories.ts
@@ -30,7 +30,7 @@ export const Indeterminate = (): string => html`
 
 export const DarkMode = (): string => html`
   <calcite-progress
-    theme="dark"
+    class="calcite-theme-dark"
     type="${select("type", { determinate: "determinate", indeterminate: "indeterminate" }, "indeterminate")}"
     value="${number("value", 0, { range: true, min: 0, max: 1, step: 0.01 })}"
     text="${text("text", "")}"
diff --git a/src/components/calcite-radio-button-group/calcite-radio-button-group.stories.ts b/src/components/calcite-radio-button-group/calcite-radio-button-group.stories.ts
index b7a142f68c0..7005a573274 100644
--- a/src/components/calcite-radio-button-group/calcite-radio-button-group.stories.ts
+++ b/src/components/calcite-radio-button-group/calcite-radio-button-group.stories.ts
@@ -41,7 +41,7 @@ export const LightTheme = (): string => html`
 
 export const DarkTheme = (): string => html`
   <calcite-radio-button-group
-    theme="dark"
+    class="calcite-theme-dark"
     name="dark"
     ${boolean("disabled", false)}
     ${boolean("hidden", false)}
diff --git a/src/components/calcite-radio-button/calcite-radio-button.stories.ts b/src/components/calcite-radio-button/calcite-radio-button.stories.ts
index 16ba073eefa..be413e6ddc3 100644
--- a/src/components/calcite-radio-button/calcite-radio-button.stories.ts
+++ b/src/components/calcite-radio-button/calcite-radio-button.stories.ts
@@ -28,7 +28,7 @@ export const LightTheme = (): string => html`
 `;
 
 export const DarkTheme = (): string => html`
-  <calcite-label layout="inline" theme="dark">
+  <calcite-label layout="inline" class="calcite-theme-dark">
     <calcite-radio-button
       ${boolean("checked", false)}
       ${boolean("disabled", false)}
@@ -36,7 +36,6 @@ export const DarkTheme = (): string => html`
       ${boolean("focused", false)}
       name="dark"
       scale="${select("scale", ["s", "m", "l"], "m")}"
-      theme="dark"
       value="value"
     >
     </calcite-radio-button>
diff --git a/src/components/calcite-radio-group/calcite-radio-group.stories.ts b/src/components/calcite-radio-group/calcite-radio-group.stories.ts
index e92dd11a298..35faf056a5d 100644
--- a/src/components/calcite-radio-group/calcite-radio-group.stories.ts
+++ b/src/components/calcite-radio-group/calcite-radio-group.stories.ts
@@ -67,7 +67,7 @@ WithIcons.story = {
 
 export const DarkMode = (): string => html`
   <calcite-radio-group
-    theme="dark"
+    class="calcite-theme-dark"
     layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
     appearance="${select("appearance", ["solid", "outline"], "solid")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
diff --git a/src/components/calcite-rating/calcite-rating.stories.ts b/src/components/calcite-rating/calcite-rating.stories.ts
index 315d0b53fa4..12a1e6fab76 100644
--- a/src/components/calcite-rating/calcite-rating.stories.ts
+++ b/src/components/calcite-rating/calcite-rating.stories.ts
@@ -28,7 +28,7 @@ export const Simple = (): string => html`
 
 export const DarkMode = (): string => html`
   <calcite-rating
-    theme="dark"
+    class="calcite-theme-dark"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     value="${number("value", 0)}"
     ${boolean("show-chip", true)}
diff --git a/src/components/calcite-scrim/calcite-scrim.e2e.ts b/src/components/calcite-scrim/calcite-scrim.e2e.ts
index c41d32909cd..af983433d3e 100644
--- a/src/components/calcite-scrim/calcite-scrim.e2e.ts
+++ b/src/components/calcite-scrim/calcite-scrim.e2e.ts
@@ -75,7 +75,7 @@ describe("calcite-scrim", () => {
     describe("when theme attribute is dark", () => {
       it("should render scrim background with value tied to dark theme", async () => {
         page = await newE2EPage({
-          html: `<div theme="dark">${scrimSnippet}</div>`
+          html: `<div class="calcite-theme-dark">${scrimSnippet}</div>`
         });
         scrim = await page.find("calcite-scrim >>> .scrim");
         scrimStyles = await scrim.getComputedStyle();
diff --git a/src/components/calcite-scrim/calcite-scrim.stories.ts b/src/components/calcite-scrim/calcite-scrim.stories.ts
index 12485010d0c..280bd64a5ab 100644
--- a/src/components/calcite-scrim/calcite-scrim.stories.ts
+++ b/src/components/calcite-scrim/calcite-scrim.stories.ts
@@ -43,7 +43,7 @@ export const Simple = (): string => html`
 
 export const DarkMode = (): string => html`
   <div tabindex="0" style="position: relative; width: 400px; height: 400px">
-    <calcite-scrim theme="dark" ${boolean("loading", false)}></calcite-scrim>
+    <calcite-scrim class="calcite-theme-dark" ${boolean("loading", false)}></calcite-scrim>
     <div style="width: 400px; height: 400px; overflow: auto">
       <p>
         Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
diff --git a/src/components/calcite-select/calcite-select.stories.ts b/src/components/calcite-select/calcite-select.stories.ts
index af7f8a367fe..43fdf38018d 100644
--- a/src/components/calcite-select/calcite-select.stories.ts
+++ b/src/components/calcite-select/calcite-select.stories.ts
@@ -37,9 +37,9 @@ const createSelectAttributes: (options?: { exceptions: string[] }) => Attributes
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue, group);
+          this.value = select("class", theme.values, theme.defaultValue, group);
           delete this.build;
           return this;
         }
diff --git a/src/components/calcite-shell/calcite-shell.stories.ts b/src/components/calcite-shell/calcite-shell.stories.ts
index 5b343e6412e..6167d0dab35 100644
--- a/src/components/calcite-shell/calcite-shell.stories.ts
+++ b/src/components/calcite-shell/calcite-shell.stories.ts
@@ -39,9 +39,9 @@ const createAttributes: (group: string, options?: { exceptions: string[] }) => A
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue, group);
+          this.value = select("class", theme.values, theme.defaultValue, group);
           delete this.build;
           return this;
         }
@@ -123,11 +123,13 @@ const actionBarContextualContentHTML = html`
 `;
 
 const actionBarPrimaryHTML = html`
-  <calcite-action-bar theme="dark" slot="action-bar"> ${actionBarPrimaryContentHTML} </calcite-action-bar>
+  <calcite-action-bar class="calcite-theme-dark" slot="action-bar"> ${actionBarPrimaryContentHTML} </calcite-action-bar>
 `;
 
 const actionBarContextualHTML = html`
-  <calcite-action-bar theme="light" slot="action-bar"> ${actionBarContextualContentHTML} </calcite-action-bar>
+  <calcite-action-bar class="calcite-theme-light" slot="action-bar">
+    ${actionBarContextualContentHTML}
+  </calcite-action-bar>
 `;
 
 const leadingPanelHTML = html`
diff --git a/src/components/calcite-shell/readme.md b/src/components/calcite-shell/readme.md
index a45cb61e00c..33dd1a4a358 100644
--- a/src/components/calcite-shell/readme.md
+++ b/src/components/calcite-shell/readme.md
@@ -17,7 +17,7 @@ Renders a shell with leading and trailing floating panels, action bar/pad, block
 ```html
 <calcite-shell>
   <calcite-shell-panel slot="primary-panel" position="start" detached>
-    <calcite-action-bar slot="action-bar" theme="dark">
+    <calcite-action-bar slot="action-bar">
       <calcite-action-group>
         <calcite-action text="Add" icon="plus"></calcite-action>
         <calcite-action text="Save" disabled icon="save"></calcite-action>
diff --git a/src/components/calcite-shell/usage/advanced.md b/src/components/calcite-shell/usage/advanced.md
index 9cbe339532b..222530d6732 100644
--- a/src/components/calcite-shell/usage/advanced.md
+++ b/src/components/calcite-shell/usage/advanced.md
@@ -5,7 +5,7 @@ Renders a shell with leading and trailing floating panels, action bar/pad, block
 ```html
 <calcite-shell>
   <calcite-shell-panel slot="primary-panel" position="start" detached>
-    <calcite-action-bar slot="action-bar" theme="dark">
+    <calcite-action-bar slot="action-bar">
       <calcite-action-group>
         <calcite-action text="Add" icon="plus"></calcite-action>
         <calcite-action text="Save" disabled icon="save"></calcite-action>
diff --git a/src/components/calcite-slider/calcite-slider.stories.ts b/src/components/calcite-slider/calcite-slider.stories.ts
index c2b131e34b8..ac6952ffaca 100644
--- a/src/components/calcite-slider/calcite-slider.stories.ts
+++ b/src/components/calcite-slider/calcite-slider.stories.ts
@@ -72,7 +72,7 @@ export const Histogram = (): HTMLCalciteSliderElement => {
 };
 
 export const DarkMode = (): string => html`
-  <calcite-slider min="0" max="100" value="50" step="1" label="Temperature" theme="dark"></calcite-slider>
+  <calcite-slider min="0" max="100" value="50" step="1" label="Temperature" class="calcite-theme-dark"></calcite-slider>
 `;
 
 DarkMode.story = {
diff --git a/src/components/calcite-split-button/calcite-split-button.stories.ts b/src/components/calcite-split-button/calcite-split-button.stories.ts
index eef1cf7a22c..30c89fec051 100644
--- a/src/components/calcite-split-button/calcite-split-button.stories.ts
+++ b/src/components/calcite-split-button/calcite-split-button.stories.ts
@@ -119,7 +119,7 @@ export const DarkMode = (): string => html`
     primary-text="${text("primary-text", "Primary Option")}"
     dropdown-label="${text("dropdown-label", "Additional Options")}"
     dropdown-icon-type="${select("dropdown-icon-type", ["chevron", "caret", "ellipsis", "overflow"], "chevron")}"
-    theme="dark"
+    class="calcite-theme-dark"
   >
     <calcite-dropdown-group selection-mode="none">
       <calcite-dropdown-item>Option 2</calcite-dropdown-item>
diff --git a/src/components/calcite-stepper/calcite-stepper.stories.ts b/src/components/calcite-stepper/calcite-stepper.stories.ts
index df915702ae6..3e955d00988 100644
--- a/src/components/calcite-stepper/calcite-stepper.stories.ts
+++ b/src/components/calcite-stepper/calcite-stepper.stories.ts
@@ -95,7 +95,7 @@ NoContent.story = {
 
 export const DarkMode = (): string => html`
   <calcite-stepper
-    theme="dark"
+  class="calcite-theme-dark"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
diff --git a/src/components/calcite-switch/calcite-switch.stories.ts b/src/components/calcite-switch/calcite-switch.stories.ts
index f16e5345a48..aedea21d7e3 100644
--- a/src/components/calcite-switch/calcite-switch.stories.ts
+++ b/src/components/calcite-switch/calcite-switch.stories.ts
@@ -43,7 +43,7 @@ WrappingCalciteLabel.story = {
 
 export const DarkMode = (): string => html`
   <calcite-switch
-    theme="dark"
+    class="calcite-theme-dark"
     name="setting"
     value="enabled"
     ${boolean("switched", true)}
diff --git a/src/components/calcite-tabs/calcite-tabs.stories.ts b/src/components/calcite-tabs/calcite-tabs.stories.ts
index 95add339ecb..be3e9e7f623 100644
--- a/src/components/calcite-tabs/calcite-tabs.stories.ts
+++ b/src/components/calcite-tabs/calcite-tabs.stories.ts
@@ -65,7 +65,7 @@ WithIcons.story = {
 
 export const DarkMode = (): string => html`
   <calcite-tabs
-    theme="dark"
+    class="calcite-theme-dark"
     layout="${select("layout", ["inline", "center"], "inline")}"
     position="${select("position", ["above", "below"], "above")}"
   >
diff --git a/src/components/calcite-tile-select-group/calcite-tile-select-group.stories.ts b/src/components/calcite-tile-select-group/calcite-tile-select-group.stories.ts
index 29985d2bae7..a32ca9e9f41 100644
--- a/src/components/calcite-tile-select-group/calcite-tile-select-group.stories.ts
+++ b/src/components/calcite-tile-select-group/calcite-tile-select-group.stories.ts
@@ -73,7 +73,7 @@ export const Dark = (): string => html`
 <calcite-tile-select-group
   layout="${select("layout", ["horizontal", "vertical"], "horizontal", "Tile Select Group")}"
   dir="${select("dir", ["ltr", "rtl"], "ltr", "Tile Select Group")}"
-  theme="dark"
+  class="calcite-theme-dark"
 >
   <calcite-tile-select
     checked
diff --git a/src/components/calcite-tile-select/calcite-tile-select.stories.ts b/src/components/calcite-tile-select/calcite-tile-select.stories.ts
index 3ea1a8710ba..80a38d2effc 100644
--- a/src/components/calcite-tile-select/calcite-tile-select.stories.ts
+++ b/src/components/calcite-tile-select/calcite-tile-select.stories.ts
@@ -45,7 +45,7 @@ export const Dark = (): string => html`
     name="${text("name", "tile-select-demo")}"
     ${boolean("input-enabled", true)}
     input-alignment="${select("input-alignment", ["start", "end"], "end")}"
-    theme="dark"
+    class="calcite-theme-dark"
     type="${select("type", ["radio", "checkbox"], "radio")}"
     value="${text("value", "one")}"
   >
diff --git a/src/components/calcite-tile/calcite-tile.stories.ts b/src/components/calcite-tile/calcite-tile.stories.ts
index 6eec607b44c..8068957ea06 100644
--- a/src/components/calcite-tile/calcite-tile.stories.ts
+++ b/src/components/calcite-tile/calcite-tile.stories.ts
@@ -38,7 +38,7 @@ export const Dark = (): string => html`
     ${boolean("hidden", false)}
     href="${text("href", "#")}"
     icon="${select("icon", iconNames, "layer")}"
-    theme="dark"
+    class="calcite-theme-dark"
   >
   </calcite-tile>
 `;
diff --git a/src/components/calcite-tip-manager/calcite-tip-manager.stories.ts b/src/components/calcite-tip-manager/calcite-tip-manager.stories.ts
index 82e12ca2e39..953ed4dfd57 100644
--- a/src/components/calcite-tip-manager/calcite-tip-manager.stories.ts
+++ b/src/components/calcite-tip-manager/calcite-tip-manager.stories.ts
@@ -81,9 +81,9 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue);
+          this.value = select("class", theme.values, theme.defaultValue);
           delete this.build;
           return this;
         }
@@ -142,9 +142,9 @@ export const basic = (): string => create("calcite-tip-manager", createAttribute
 export const darkThemeRTL = (): string =>
   create(
     "calcite-tip-manager",
-    createAttributes({ exceptions: ["dir", "theme"] }).concat([
+    createAttributes({ exceptions: ["dir", "class"] }).concat([
       { name: "dir", value: "rtl" },
-      { name: "theme", value: "dark" }
+      { name: "class", value: "calcite-theme-dark" }
     ]),
     tipContent
   );
diff --git a/src/components/calcite-tip/calcite-tip.stories.ts b/src/components/calcite-tip/calcite-tip.stories.ts
index b7a53dd3845..c13a6bb2b7f 100644
--- a/src/components/calcite-tip/calcite-tip.stories.ts
+++ b/src/components/calcite-tip/calcite-tip.stories.ts
@@ -65,9 +65,9 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue);
+          this.value = select("class", theme.values, theme.defaultValue);
           delete this.build;
           return this;
         }
@@ -86,9 +86,9 @@ export const basic = (): string => create("calcite-tip", createAttributes(), htm
 export const darkThemeRTL = (): string =>
   create(
     "calcite-tip",
-    createAttributes({ exceptions: ["dir", "theme"] }).concat([
+    createAttributes({ exceptions: ["dir", "class"] }).concat([
       { name: "dir", value: "rtl" },
-      { name: "theme", value: "dark" }
+      { name: "class", value: "calcite-theme-dark" }
     ]),
     html
   );
diff --git a/src/components/calcite-tooltip/calcite-tooltip.stories.ts b/src/components/calcite-tooltip/calcite-tooltip.stories.ts
index 883714b049e..4a0fed4175d 100644
--- a/src/components/calcite-tooltip/calcite-tooltip.stories.ts
+++ b/src/components/calcite-tooltip/calcite-tooltip.stories.ts
@@ -42,7 +42,7 @@ export const Simple = (): string => {
       <div>
         ${referenceElementHTML}
         <calcite-tooltip
-          theme="light"
+        class="calcite-theme-dark"
           reference-element="reference-element"
           placement="${select("placement", calcite_placements, "auto")}"
           offset-distance="${number("offset-distance", 6)}"
@@ -77,7 +77,7 @@ export const DarkMode = (): string => {
       <div>
         ${referenceElementHTML}
         <calcite-tooltip
-          theme="dark"
+        class="calcite-theme-dark"
           reference-element="reference-element"
           placement="${select("placement", calcite_placements, "auto")}"
           offset-distance="${number("offset-distance", 6)}"
diff --git a/src/components/calcite-tree/calcite-tree.stories.ts b/src/components/calcite-tree/calcite-tree.stories.ts
index 032e4f97115..c79ca973c0f 100644
--- a/src/components/calcite-tree/calcite-tree.stories.ts
+++ b/src/components/calcite-tree/calcite-tree.stories.ts
@@ -73,7 +73,7 @@ export const RTL = (): string => html`
 
 export const DarkMode = (): string => html`
   <calcite-tree
-    theme="dark"
+    class="calcite-theme-dark"
     ${boolean("lines", false)}
     selection-mode="${select("selection-mode", ["single", "multi", "children", "multi-children"], "single")}"
     size="${select("size", ["s", "m"], "m")}"
diff --git a/src/components/calcite-value-list/calcite-value-list.stories.ts b/src/components/calcite-value-list/calcite-value-list.stories.ts
index e8e2a95104e..e9bf6608dc8 100644
--- a/src/components/calcite-value-list/calcite-value-list.stories.ts
+++ b/src/components/calcite-value-list/calcite-value-list.stories.ts
@@ -72,9 +72,9 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
         }
       },
       {
-        name: "theme",
+        name: "class",
         commit(): Attribute {
-          this.value = select("theme", theme.values, theme.defaultValue);
+          this.value = select("class", theme.values, theme.defaultValue);
           delete this.build;
           return this;
         }
@@ -119,9 +119,9 @@ export const basic = (): string =>
 export const darkThemeRTL = (): string =>
   create(
     "calcite-value-list",
-    createAttributes({ exceptions: ["dir", "theme"] }).concat([
+    createAttributes({ exceptions: ["dir", "class"] }).concat([
       { name: "dir", value: "rtl" },
-      { name: "theme", value: "dark" }
+      { name: "class", value: "calcite-theme-dark" }
     ]),
     html`
       <calcite-value-list-item label="Dogs" description="Man's best friend" value="dogs">
diff --git a/src/components/interfaces.ts b/src/components/interfaces.ts
index ec5afbfe5b8..5524d170fd2 100644
--- a/src/components/interfaces.ts
+++ b/src/components/interfaces.ts
@@ -7,5 +7,5 @@ export type Layout = "horizontal" | "vertical" | "grid";
 export type Position = "start" | "end";
 export type Scale = "s" | "m" | "l";
 export type Status = "invalid" | "valid" | "idle";
-export type Theme = "light" | "dark";
+export type ThemeClass = "calcite-theme-light" | "calcite-theme-dark" | "calcite-theme-auto";
 export type Width = "auto" | "half" | "full";
diff --git a/src/demos/_assets/toggles.template b/src/demos/_assets/toggles.template
index 85bbc5e96b3..e43ad9b6798 100644
--- a/src/demos/_assets/toggles.template
+++ b/src/demos/_assets/toggles.template
@@ -51,7 +51,7 @@ function dragElement(elmnt) {
   }
 }
   </script>
-  <div class="toggles" id="toggles-drag" dir="ltr" theme="dark">
+  <div class="toggles" id="toggles-drag" dir="ltr" class="calcite-theme-dark">
     <calcite-panel dismissible width-scale="s" data-excluded>
       <div slot="header-content">Demo Toggles</div>
         <calcite-action data-excluded data-js-id="loading" text="Loading" text-enabled></calcite-action>
diff --git a/src/demos/shell/demo-app-advanced-3.html b/src/demos/shell/demo-app-advanced-3.html
index d3ff78d2213..78263b690ec 100644
--- a/src/demos/shell/demo-app-advanced-3.html
+++ b/src/demos/shell/demo-app-advanced-3.html
@@ -72,7 +72,12 @@
               ><span> Shell Floating Panel Content </span>
             </calcite-panel>
 
-            <calcite-action-bar slot="action-bar" theme="dark" intl-collapse="Collapse" intl-expand="Expand" expand
+            <calcite-action-bar
+              slot="action-bar"
+              class="calcite-theme-dark"
+              intl-collapse="Collapse"
+              intl-expand="Expand"
+              expand
               ><calcite-action-group class="js-action-group" slot="" calcite-hydrated=""
                 ><calcite-action
                   id="adddata"
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 1818559f679..5273dcbaafc 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -1,4 +1,3 @@
-import { Theme } from "../components/interfaces";
 import { CSS_UTILITY } from "./resources";
 import { guid } from "./guid";
 
@@ -29,8 +28,8 @@ export function getAttributes(el: HTMLElement, blockList: string[]): Record<stri
     .reduce((acc, { name, value }) => ({ ...acc, [name]: value }), {});
 }
 
-export function getThemeName(el: HTMLElement): Theme {
-  return closestElementCrossShadowBoundary(`.${CSS_UTILITY.darkTheme}, [theme=dark]`, el) ? "dark" : "light";
+export function getThemeName(el: HTMLElement): "light" | "dark" {
+  return closestElementCrossShadowBoundary(`.${CSS_UTILITY.darkTheme}`, el) ? "dark" : "light";
 }
 
 export function getElementDir(el: HTMLElement): Direction {