diff --git a/change/@fluentui-web-components-664a860d-0606-46e5-9e2d-c1d7508e2e62.json b/change/@fluentui-web-components-664a860d-0606-46e5-9e2d-c1d7508e2e62.json
new file mode 100644
index 0000000000000..127bf3a54b9e3
--- /dev/null
+++ b/change/@fluentui-web-components-664a860d-0606-46e5-9e2d-c1d7508e2e62.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat(web-components): relax setTheme() argument type to allow custom tokens",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
index 8f6857a647d97..559e656021545 100644
--- a/packages/web-components/docs/api-report.md
+++ b/packages/web-components/docs/api-report.md
@@ -17,7 +17,6 @@ import type { HostController } from '@microsoft/fast-element';
 import { HTMLDirective } from '@microsoft/fast-element';
 import { Orientation } from '@microsoft/fast-web-utilities';
 import type { SyntheticViewTemplate } from '@microsoft/fast-element';
-import type { Theme } from '@fluentui/tokens';
 import { ViewTemplate } from '@microsoft/fast-element';
 
 // @public
@@ -3541,6 +3540,11 @@ export const TextWeight: {
 // @public
 export type TextWeight = ValuesOf<typeof TextWeight>;
 
+// Warning: (ae-internal-missing-underscore) The name "Theme" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal
+export type Theme = Record<string, string | number>;
+
 // @public
 export class ToggleButton extends Button {
     // (undocumented)
diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
index e4528a3013380..2974a1e499f8b 100644
--- a/packages/web-components/src/index.ts
+++ b/packages/web-components/src/index.ts
@@ -244,7 +244,7 @@ export {
   TextWeight,
 } from './text/index.js';
 export * from './theme/design-tokens.js';
-export { setTheme, setThemeFor } from './theme/index.js';
+export { setTheme, setThemeFor, type Theme } from './theme/index.js';
 export {
   ToggleButton,
   ToggleButtonAppearance,
diff --git a/packages/web-components/src/theme/index.ts b/packages/web-components/src/theme/index.ts
index 5457adce5905a..6982cbda59a2d 100644
--- a/packages/web-components/src/theme/index.ts
+++ b/packages/web-components/src/theme/index.ts
@@ -384,4 +384,4 @@ export {
   shadow28Brand,
   shadow64Brand,
 } from './design-tokens.js';
-export { setTheme, setThemeFor } from './set-theme.js';
+export { setTheme, setThemeFor, type Theme } from './set-theme.js';
diff --git a/packages/web-components/src/theme/set-theme.ts b/packages/web-components/src/theme/set-theme.ts
index 2e971850fee6f..919e4f9591306 100644
--- a/packages/web-components/src/theme/set-theme.ts
+++ b/packages/web-components/src/theme/set-theme.ts
@@ -1,6 +1,12 @@
-import type { Theme } from '@fluentui/tokens';
 import * as tokens from './design-tokens.js';
 
+/**
+ * Not using the `Theme` type from `@fluentui/tokens` package to allow custom
+ * tokens to be added.
+ * @internal
+ */
+export type Theme = Record<string, string | number>;
+
 const tokenNames = Object.keys(tokens) as (keyof Theme)[];
 
 const SUPPORTS_REGISTER_PROPERTY = 'registerProperty' in CSS;