diff --git a/packages/calcite-components/src/components/dropdown-group/dropdown-group.e2e.ts b/packages/calcite-components/src/components/dropdown-group/dropdown-group.e2e.ts
index 59195d6a6d3..0add1eba961 100644
--- a/packages/calcite-components/src/components/dropdown-group/dropdown-group.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown-group/dropdown-group.e2e.ts
@@ -4,6 +4,8 @@ import { describe, expect, it } from "vitest";
 import { defaults, hidden, reflects, renders } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { findAll } from "../../tests/utils";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 describe("calcite-dropdown-group", () => {
   describe("defaults", () => {
@@ -73,4 +75,30 @@ describe("calcite-dropdown-group", () => {
       expect(await item.getProperty("selectionMode")).toBe("none");
     }
   });
+
+  describe("theme", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-dropdown-group-border-color": [
+        {
+          targetProp: "borderColor",
+          shadowSelector: `.${CSS.title}`,
+          selector: `calcite-dropdown-group`,
+        },
+        {
+          targetProp: "backgroundColor",
+          shadowSelector: `.${CSS.separator}`,
+          selector: `calcite-dropdown-group.two`,
+        },
+      ],
+      "--calcite-dropdown-group-title-text-color": {
+        targetProp: "color",
+        shadowSelector: `.${CSS.title}`,
+        selector: `calcite-dropdown-group`,
+      },
+    };
+    themed(
+      `<calcite-dropdown open><calcite-dropdown-group group-title="one"><calcite-dropdown-item>A</calcite-dropdown-item></calcite-dropdown-group><calcite-dropdown-group group-title="two" class="two"><calcite-dropdown-item>A</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`,
+      tokens,
+    );
+  });
 });
diff --git a/packages/calcite-components/src/components/dropdown-group/dropdown-group.scss b/packages/calcite-components/src/components/dropdown-group/dropdown-group.scss
index f557cf48bde..7e5d1b92051 100644
--- a/packages/calcite-components/src/components/dropdown-group/dropdown-group.scss
+++ b/packages/calcite-components/src/components/dropdown-group/dropdown-group.scss
@@ -1,3 +1,12 @@
+/**
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-dropdown-group-border-color: Specifies the color of the dropdown's border.
+* @prop --calcite-dropdown-group-title-text-color: Specifies the color of the dropdown's title.
+*/
+
 :host {
   @apply block;
 }
@@ -7,9 +16,7 @@
 }
 
 .dropdown-title {
-  @apply border-color-3
-  text-color-2
-  -mb-px
+  @apply -mb-px
   block
   cursor-default
   break-words
@@ -17,11 +24,14 @@
   border-b
   border-solid
   font-bold;
+
+  border-color: var(--calcite-dropdown-group-border-color, var(--calcite-color-border-3));
+  color: var(--calcite-dropdown-group-title-text-color, var(--calcite-color-text-2));
 }
 
 .dropdown-separator {
   @apply block h-px;
-  background-color: theme("borderColor.color.3");
+  background-color: var(--calcite-dropdown-group-border-color, var(--calcite-color-border-3));
 }
 
 :host([scale="s"]) {
diff --git a/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx b/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
index 1fc67a7227b..2c1eafd2252 100644
--- a/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
+++ b/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
@@ -3,8 +3,9 @@ import { PropertyValues } from "lit";
 import { LitElement, property, createEvent, h, JsxNode } from "@arcgis/lumina";
 import { Scale, SelectionMode } from "../interfaces";
 import { createObserver } from "../../utils/observers";
-import { CSS } from "../dropdown-item/resources";
+import { CSS as ItemCSS } from "../dropdown-item/resources";
 import type { DropdownItem } from "../dropdown-item/dropdown-item";
+import { CSS } from "./resources";
 import { RequestedItem } from "./interfaces";
 import { styles } from "./dropdown-group.scss";
 
@@ -135,13 +136,13 @@ export class DropdownGroup extends LitElement {
 
   override render(): JsxNode {
     const groupTitle = this.groupTitle ? (
-      <span ariaHidden="true" class="dropdown-title">
+      <span ariaHidden="true" class={CSS.title}>
         {this.groupTitle}
       </span>
     ) : null;
 
     const dropdownSeparator =
-      this.groupPosition > 0 ? <div class="dropdown-separator" role="separator" /> : null;
+      this.groupPosition > 0 ? <div class={CSS.separator} role="separator" /> : null;
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
     this.el.ariaLabel = this.groupTitle;
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
@@ -150,7 +151,7 @@ export class DropdownGroup extends LitElement {
     return (
       <div
         class={{
-          [CSS.container]: true,
+          [ItemCSS.container]: true,
         }}
       >
         {dropdownSeparator}
diff --git a/packages/calcite-components/src/components/dropdown-group/resources.ts b/packages/calcite-components/src/components/dropdown-group/resources.ts
new file mode 100644
index 00000000000..f758f3a2918
--- /dev/null
+++ b/packages/calcite-components/src/components/dropdown-group/resources.ts
@@ -0,0 +1,4 @@
+export const CSS = {
+  title: "dropdown-title",
+  separator: "dropdown-separator",
+};
diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.e2e.ts b/packages/calcite-components/src/components/dropdown-item/dropdown-item.e2e.ts
index 2e9ea86c24c..5969634a9d3 100644
--- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.e2e.ts
@@ -1,6 +1,8 @@
 import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
-import { focusable, renders, hidden, disabled } from "../../tests/commonTests";
+import { focusable, renders, hidden, disabled, themed } from "../../tests/commonTests";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 describe("calcite-dropdown-item", () => {
   describe("renders", () => {
@@ -50,4 +52,95 @@ describe("calcite-dropdown-item", () => {
 
     expect(itemChangeSpy).toHaveReceivedEventTimes(3);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-dropdown-item-text-color": {
+          targetProp: "color",
+          shadowSelector: `.${CSS.container}`,
+          selector: `calcite-dropdown-item`,
+        },
+        "--calcite-dropdown-item-background-color-hover": {
+          targetProp: "backgroundColor",
+          shadowSelector: `.${CSS.container}`,
+          state: "hover",
+          selector: `calcite-dropdown-item`,
+        },
+        "--calcite-dropdown-item-background-color-press": {
+          targetProp: "backgroundColor",
+          shadowSelector: `.${CSS.container}`,
+          state: { press: `calcite-dropdown-item >>> .${CSS.container}` },
+          selector: `calcite-dropdown-item`,
+        },
+        "--calcite-dropdown-item-icon-color-hover": {
+          targetProp: "color",
+          shadowSelector: `.${CSS.icon}`,
+          state: "hover",
+          selector: "calcite-dropdown-item",
+        },
+        "--calcite-dropdown-item-text-color-press": [
+          {
+            targetProp: "color",
+            shadowSelector: `.${CSS.container}`,
+            selector: "calcite-dropdown-item",
+            state: "focus",
+          },
+          {
+            targetProp: "color",
+            shadowSelector: `.${CSS.container}`,
+            selector: "calcite-dropdown-item",
+            state: "hover",
+          },
+          {
+            targetProp: "color",
+            shadowSelector: `.${CSS.link}`,
+            selector: "calcite-dropdown-item",
+            state: "hover",
+          },
+          {
+            targetProp: "color",
+            shadowSelector: `.${CSS.container}`,
+            selector: "calcite-dropdown-item",
+            state: { press: `calcite-dropdown-item >>> .${CSS.container}` },
+          },
+          {
+            targetProp: "color",
+            shadowSelector: `.${CSS.link}`,
+            selector: "calcite-dropdown-item",
+            state: { press: `calcite-dropdown-item >>> .${CSS.container}` },
+          },
+        ],
+      };
+      themed(
+        `<calcite-dropdown open>
+          <calcite-dropdown-item href="esri.com">1</calcite-dropdown-item>
+          <calcite-dropdown-item>2</calcite-dropdown-item>
+        </calcite-dropdown>`,
+        tokens,
+      );
+    });
+    describe("selected", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-dropdown-item-icon-color-press": {
+          targetProp: "color",
+          shadowSelector: `calcite-icon`,
+          selector: `calcite-dropdown-item`,
+        },
+        "--calcite-dropdown-item-text-color-press": {
+          targetProp: "color",
+          shadowSelector: `.${CSS.container}`,
+          selector: `calcite-dropdown-item`,
+        },
+      };
+      themed(
+        `<calcite-dropdown selectionMode="multiple" open>
+          <calcite-dropdown-item href="esri.com" selected icon-start="home">1</calcite-dropdown-item>
+          <calcite-dropdown-item href="esri.com" selected>2</calcite-dropdown-item>
+          <calcite-dropdown-item selected class="selected">3</calcite-dropdown-item>
+        </calcite-dropdown>`,
+        tokens,
+      );
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss b/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss
index 084f6ebb548..6bfc30f142c 100644
--- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss
+++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss
@@ -1,11 +1,25 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-dropdown-item-background-color-hover: Specifies the background color of the dropdown item when hovered.
+ * @prop --calcite-dropdown-item-background-color-press: Specifies the background color of the dropdown item when selected or active.
+ * @prop --calcite-dropdown-item-icon-color-hover: Specifies the color of the dropdown item icon when hovered. 
+ * @prop --calcite-dropdown-item-icon-color-press: Specifies the color of the dropdown item icons when selected or active.
+ * @prop --calcite-dropdown-item-text-color-press: Specifies the color of the dropdown item text when selected or active.
+ * @prop --calcite-dropdown-item-text-color: Specifies the color of the dropdown item text.
+*/
+
 @mixin item-styling {
-  @apply text-color-3
-    relative
+  @apply relative
     flex
     flex-grow
     cursor-pointer
     items-center
     no-underline;
+
+  color: var(--calcite-dropdown-item-text-color, var(--calcite-color-text-3));
 }
 
 :host {
@@ -88,39 +102,48 @@
 :host(:focus) {
   .container {
     @apply focus-inset text-color-1 no-underline;
+    color: var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1));
+  }
+}
+
+:host(:hover:not([disabled])) {
+  .container {
+    background-color: var(--calcite-dropdown-item-background-color-hover, var(--calcite-color-foreground-2));
   }
 }
 
+:host(:active:not([disabled])) .container {
+  background-color: var(--calcite-dropdown-item-background-color-press, var(--calcite-color-foreground-3));
+}
+
 :host(:hover:not([disabled])),
 :host(:active:not([disabled])) {
   .container {
-    @apply bg-foreground-2 text-color-1 no-underline;
+    @apply no-underline;
+    color: var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1));
   }
 
   .dropdown-link {
-    @apply text-color-1;
+    color: var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1));
   }
 }
 
-:host(:active:not([disabled])) .container {
-  @apply bg-foreground-3;
-}
-
 :host([selected]) .container:not(.container--none-selection),
 :host([selected]) .dropdown-link {
-  @apply text-color-1 font-medium;
-  & calcite-icon {
-    color: theme("backgroundColor.brand");
+  @apply font-medium;
+  color: var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1));
+
+  calcite-icon {
+    color: var(--calcite-dropdown-item-icon-color-press, var(--calcite-color-brand));
   }
 }
 
 :host(:hover:not([disabled])) .dropdown-item-icon {
-  color: theme("borderColor.color.1");
+  color: var(--calcite-dropdown-item-icon-color-hover, var(--calcite-color-border-1));
   @apply opacity-100;
 }
 
 :host([selected]) .dropdown-item-icon {
-  color: theme("backgroundColor.brand");
   @apply opacity-100;
 }
 
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
index abd3d67cc07..ddcf8d5d258 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
@@ -22,6 +22,7 @@ import {
 } from "../../tests/utils";
 import type { DropdownItem } from "../dropdown-item/dropdown-item";
 import type { Button } from "../button/button";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
 import { CSS } from "./resources";
 
 describe("calcite-dropdown", () => {
@@ -1467,4 +1468,18 @@ describe("calcite-dropdown", () => {
       expect(await isElementFocused(page, "#item-2")).toBe(true);
     });
   });
+
+  describe("theme", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-dropdown-width": {
+        targetProp: "inlineSize",
+        shadowSelector: `.${CSS.content}`,
+      },
+      "--calcite-dropdown-background-color": {
+        targetProp: "backgroundColor",
+        shadowSelector: `.${CSS.content}`,
+      },
+    };
+    themed(`<calcite-dropdown open></calcite-dropdown>`, tokens);
+  });
 });
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.scss b/packages/calcite-components/src/components/dropdown/dropdown.scss
index b5588f0b87d..7a2347dc0b0 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.scss
+++ b/packages/calcite-components/src/components/dropdown/dropdown.scss
@@ -4,6 +4,7 @@
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-dropdown-width: Specifies the width of the component's wrapper.
+* @prop --calcite-dropdown-background-color: Specifies the background color of the component.
 */
 
 :host {
@@ -18,12 +19,12 @@
 @include floating-ui-elem-anim(".calcite-dropdown-wrapper");
 
 .calcite-dropdown-content {
-  @apply bg-foreground-1
-  w-auto
+  @apply w-auto
   overflow-y-auto
   overflow-x-hidden
   max-h-menu;
-  inline-size: var(--calcite-dropdown-width);
+  inline-size: var(--calcite-dropdown-width, var(--calcite-internal-dropdown-width));
+  background-color: var(--calcite-dropdown-background-color, var(--calcite-color-foreground-1));
 }
 
 .calcite-trigger-container {
@@ -32,21 +33,21 @@
 }
 
 .width-s {
-  --calcite-dropdown-width: theme("spacing.48");
+  --calcite-internal-dropdown-width: theme("spacing.48");
 }
 
 .width-m {
-  --calcite-dropdown-width: theme("spacing.56");
+  --calcite-internal-dropdown-width: theme("spacing.56");
 }
 
 .width-l {
-  --calcite-dropdown-width: theme("spacing.64");
+  --calcite-internal-dropdown-width: theme("spacing.64");
 }
 
 @media (forced-colors: active) {
   /* use real border since box-shadow is removed in high contrast mode */
   :host([open]) .calcite-dropdown-wrapper {
-    border: 1px solid canvasText;
+    border: var(--calcite-border-width-sm) solid canvasText;
   }
 }
 
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index fc6be4faae7..ba204147148 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -23,7 +23,7 @@ import { checkbox, checkboxTokens } from "./custom-theme/checkbox";
 import { chips, chipTokens } from "./custom-theme/chips";
 import { comboboxItem } from "./custom-theme/combobox-item";
 import { datePicker, datePickerRange, datePickerTokens } from "./custom-theme/date-picker";
-import { dropdown } from "./custom-theme/dropdown";
+import { dropdown, DropdownGroupTokens, DropdownItemTokens, DropdownTokens } from "./custom-theme/dropdown";
 import { flow, flowTokens } from "./custom-theme/flow";
 import { graph, graphTokens } from "./custom-theme/graph";
 import { handle, handleTokens } from "./custom-theme/handle";
@@ -175,6 +175,9 @@ const componentTokens = {
   ...checkboxTokens,
   ...chipTokens,
   ...datePickerTokens,
+  ...DropdownTokens,
+  ...DropdownItemTokens,
+  ...DropdownGroupTokens,
   ...flowTokens,
   ...handleTokens,
   ...inlineEditableTokens,
diff --git a/packages/calcite-components/src/custom-theme/dropdown.ts b/packages/calcite-components/src/custom-theme/dropdown.ts
index b1321acf630..774ad2fcbc6 100644
--- a/packages/calcite-components/src/custom-theme/dropdown.ts
+++ b/packages/calcite-components/src/custom-theme/dropdown.ts
@@ -1,10 +1,32 @@
 import { html } from "../../support/formatting";
 
-export const dropdown = html`<calcite-dropdown>
+export const DropdownTokens = {
+  calciteDropdownWidth: "",
+  calciteDropdownBackgroundColor: "",
+};
+
+export const DropdownGroupTokens = {
+  calciteDropdownGroupBorderColor: "",
+  calciteDropdownGroupTitleTextColor: "",
+};
+
+export const DropdownItemTokens = {
+  calciteDropdownItemTextColor: "",
+  calciteDropdownItemBackgroundColorHover: "",
+  calciteDropdownItemBackgroundColorPress: "",
+  calciteDropdownItemIconColorHover: "",
+  calciteDropdownItemIconColorPress: "",
+  calciteDropdownItemTextColorPress: "",
+};
+
+export const dropdown = html`<calcite-dropdown open>
   <calcite-button slot="trigger">Primary</calcite-button>
   <calcite-dropdown-group group-title="View">
     <calcite-dropdown-item icon-start="list-bullet" selected>List</calcite-dropdown-item>
     <calcite-dropdown-item icon-start="grid">Grid</calcite-dropdown-item>
     <calcite-dropdown-item icon-start="table">Table</calcite-dropdown-item>
   </calcite-dropdown-group>
+  <calcite-dropdown-group>
+    <calcite-dropdown-item href="esri.com" icon-start="home">Home</calcite-dropdown-item>
+  </calcite-dropdown-group>
 </calcite-dropdown>`;