diff --git a/change/@fluentui-react-provider-51de7ed7-e932-4b2f-aa6b-c871f1b8c016.json b/change/@fluentui-react-provider-51de7ed7-e932-4b2f-aa6b-c871f1b8c016.json
new file mode 100644
index 0000000000000..f09e6a7a33ed5
--- /dev/null
+++ b/change/@fluentui-react-provider-51de7ed7-e932-4b2f-aa6b-c871f1b8c016.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Render theme CSS variables in SSR style element",
+  "packageName": "@fluentui/react-provider",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-provider/etc/react-provider.api.md b/packages/react-components/react-provider/etc/react-provider.api.md
index d0255a7bceaa6..af4ee0d9cbc89 100644
--- a/packages/react-components/react-provider/etc/react-provider.api.md
+++ b/packages/react-components/react-provider/etc/react-provider.api.md
@@ -61,6 +61,10 @@ export type FluentProviderSlots = {
 export type FluentProviderState = ComponentState<FluentProviderSlots> & Pick<FluentProviderProps, 'targetDocument'> & Required<Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>> & {
     theme: ThemeContextValue_unstable;
     themeClassName: string;
+    serverStyleProps: {
+        cssRule: string;
+        attributes: Record<string, string>;
+    };
 };
 
 // @public
@@ -75,8 +79,13 @@ export function useFluentProviderContextValues_unstable(state: FluentProviderSta
 // @public
 export const useFluentProviderStyles_unstable: (state: FluentProviderState) => FluentProviderState;
 
-// @public
-export const useFluentProviderThemeStyleTag: (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => string;
+// @internal
+export const useFluentProviderThemeStyleTag: (options: Pick<FluentProviderState, 'theme' | 'targetDocument'> & {
+    rendererAttributes: Record<string, string>;
+}) => {
+    styleTagId: string;
+    rule: string;
+};
 
 // (No @packageDocumentation comment for this package)
 
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
new file mode 100644
index 0000000000000..178716721acbd
--- /dev/null
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider-node.test.tsx
@@ -0,0 +1,74 @@
+/*
+ * @jest-environment node
+ */
+
+// 👆 this is intentionally to test in SSR like environment
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/server';
+import { resetIdsForTests } from '@fluentui/react-utilities';
+import { FluentProvider } from './FluentProvider';
+import * as prettier from 'prettier';
+import { createDOMRenderer } from '@griffel/core';
+import { RendererProvider } from '@griffel/react';
+import { PartialTheme } from '@fluentui/react-theme';
+
+const parseHTMLString = (html: string) => {
+  return prettier.format(html, { parser: 'html' });
+};
+
+describe('FluentProvider (node)', () => {
+  const testTheme: PartialTheme = {
+    colorNeutralForeground1: 'black',
+    colorNeutralBackground1: 'white',
+  };
+
+  afterEach(() => {
+    resetIdsForTests();
+  });
+
+  it('should render CSS variables as inline style', () => {
+    const html = ReactDOM.renderToStaticMarkup(<FluentProvider theme={testTheme} />);
+
+    expect(parseHTMLString(html)).toMatchInlineSnapshot(`
+      "<div
+        dir="ltr"
+        class="fui-FluentProvider fui-FluentProvider1 "
+      >
+        <style id="fui-FluentProvider1">
+          .fui-FluentProvider1 {
+            --colorNeutralForeground1: black;
+            --colorNeutralBackground1: white;
+          }
+        </style>
+      </div>"
+    `);
+  });
+
+  it('renders nonce with SSR style element', () => {
+    const nonce = 'random';
+    const renderer = createDOMRenderer(undefined, {
+      styleElementAttributes: { nonce },
+    });
+
+    const html = ReactDOM.renderToStaticMarkup(
+      <RendererProvider renderer={renderer}>
+        <FluentProvider theme={testTheme} />
+      </RendererProvider>,
+    );
+
+    expect(parseHTMLString(html)).toMatchInlineSnapshot(`
+      "<div
+        dir="ltr"
+        class="fui-FluentProvider fui-FluentProvider1 "
+      >
+        <style nonce="random" id="fui-FluentProvider1">
+          .fui-FluentProvider1 {
+            --colorNeutralForeground1: black;
+            --colorNeutralBackground1: white;
+          }
+        </style>
+      </div>"
+    `);
+  });
+});
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
index 7d0e5992c44da..edf895890f0d7 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.test.tsx
@@ -1,10 +1,11 @@
 import { resetIdsForTests } from '@fluentui/react-utilities';
 import { render } from '@testing-library/react';
 import * as React from 'react';
-import * as renderer from 'react-test-renderer';
+import * as reactTestRenderer from 'react-test-renderer';
 
 import { FluentProvider } from './FluentProvider';
 import { isConformant } from '../../testing/isConformant';
+import { teamsLightTheme } from '@fluentui/react-theme';
 
 describe('FluentProvider', () => {
   // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -28,13 +29,18 @@ describe('FluentProvider', () => {
    * Note: see more visual regression tests for FluentProvider in /apps/vr-tests.
    */
   it('renders a default state', () => {
-    const component = renderer.create(
+    const component = reactTestRenderer.create(
       <FluentProvider theme={{ colorBrandBackground2: '#fff' }}>Default FluentProvider</FluentProvider>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
+  it('does not render style element when not in SSR', () => {
+    const { container } = render(<FluentProvider theme={teamsLightTheme} />);
+    expect(container.querySelector('style')).toBeNull();
+  });
+
   describe('applies "dir" attribute', () => {
     it('ltr', () => {
       const { getByText } = render(<FluentProvider dir="ltr">Test</FluentProvider>);
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts
index 3d6f2230e564f..462d4293f76a8 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts
@@ -48,6 +48,19 @@ export type FluentProviderState = ComponentState<FluentProviderSlots> &
   > & {
     theme: ThemeContextValue;
     themeClassName: string;
+    /**
+     * Props used to render SSR theme variables style element
+     */
+    serverStyleProps: {
+      /**
+       * CSS rule containing CSS variables
+       */
+      cssRule: string;
+      /**
+       * Additional attributes applied to the style element
+       */
+      attributes: Record<string, string>;
+    };
   };
 
 export type FluentProviderContextValues = Pick<
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx b/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
index d7af3e313d314..9276aab3c6f29 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
@@ -9,8 +9,8 @@ import {
   CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,
   CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,
 } from '@fluentui/react-shared-contexts';
-import { getSlots } from '@fluentui/react-utilities';
-import type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';
+import { canUseDOM, getSlots } from '@fluentui/react-utilities';
+import type { FluentProviderContextValues, FluentProviderState, FluentProviderSlots } from './FluentProvider.types';
 
 /**
  * Render the final JSX of FluentProvider
@@ -35,7 +35,18 @@ export const renderFluentProvider_unstable = (
             <TooltipVisibilityProvider value={contextValues.tooltip}>
               <TextDirectionProvider dir={contextValues.textDirection}>
                 <OverridesProvider value={contextValues.overrides_unstable}>
-                  <slots.root {...slotProps.root}>{state.root.children}</slots.root>
+                  <slots.root {...slotProps.root}>
+                    {canUseDOM() ? null : (
+                      <style
+                        // Using dangerous HTML because react can escape characters
+                        // which can lead to invalid CSS.
+                        // eslint-disable-next-line react/no-danger
+                        dangerouslySetInnerHTML={{ __html: state.serverStyleProps.cssRule }}
+                        {...state.serverStyleProps.attributes}
+                      />
+                    )}
+                    {slotProps.root.children}
+                  </slots.root>
                 </OverridesProvider>
               </TextDirectionProvider>
             </TooltipVisibilityProvider>
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
index faf476bb6b2b2..d1ef14183c685 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
@@ -14,6 +14,7 @@ import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities'
 import * as React from 'react';
 import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
 import type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';
+import { useRenderer_unstable } from '@griffel/react';
 
 /**
  * Create the state required to render FluentProvider.
@@ -69,6 +70,12 @@ export const useFluentProvider_unstable = (
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const renderer = useRenderer_unstable();
+  const { styleTagId, rule } = useFluentProviderThemeStyleTag({
+    theme: mergedTheme,
+    targetDocument,
+    rendererAttributes: renderer.styleElementAttributes ?? {},
+  });
   return {
     applyStylesToPortals,
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -78,7 +85,7 @@ export const useFluentProvider_unstable = (
     theme: mergedTheme,
     // eslint-disable-next-line @typescript-eslint/naming-convention
     overrides_unstable: mergedOverrides,
-    themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),
+    themeClassName: styleTagId,
 
     components: {
       root: 'div',
@@ -89,6 +96,14 @@ export const useFluentProvider_unstable = (
       dir,
       ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })),
     }),
+
+    serverStyleProps: {
+      cssRule: rule,
+      attributes: {
+        ...renderer.styleElementAttributes,
+        id: styleTagId,
+      },
+    },
   };
 };
 
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
index 44e6b104d0b6c..4f59835acae0a 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
@@ -1,12 +1,18 @@
-import { createDOMRenderer, RendererProvider } from '@griffel/react';
 import type { Theme } from '@fluentui/react-theme';
 import { resetIdsForTests } from '@fluentui/react-utilities';
 import { renderHook } from '@testing-library/react-hooks';
-import * as React from 'react';
 
 import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
 
 jest.mock('@fluentui/react-theme');
+const createDocumentMock = (): Document => {
+  const externalDocument = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
+  const body = document.createElement('body');
+  const head = document.createElement('head');
+  externalDocument.documentElement.appendChild(head);
+  externalDocument.documentElement.appendChild(body);
+  return externalDocument;
+};
 
 describe('useFluentProviderThemeStyleTag', () => {
   const defaultTheme = {
@@ -21,70 +27,91 @@ describe('useFluentProviderThemeStyleTag', () => {
   it('should render style tag', () => {
     // Act
     const { result } = renderHook(() =>
-      useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document }),
+      useFluentProviderThemeStyleTag({
+        theme: defaultTheme,
+        targetDocument: document,
+        rendererAttributes: {},
+      }),
     );
 
     // Assert
-    expect(document.getElementById(result.current)).not.toBeNull();
+    expect(document.getElementById(result.current.styleTagId)).not.toBeNull();
   });
 
   it('should remove style tag on unmount', () => {
     // Arrange
     const { result, unmount } = renderHook(() =>
-      useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document }),
+      useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document, rendererAttributes: {} }),
     );
 
     // Act
     unmount();
 
     // Assert
-    expect(document.getElementById(result.current)).toBeNull();
+    expect(document.getElementById(result.current.styleTagId)).toBeNull();
   });
 
   it('should render css variables in theme', () => {
     // Act
     const { result } = renderHook(() =>
-      useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document }),
+      useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document, rendererAttributes: {} }),
     );
 
     // Assert
-    const tag = document.getElementById(result.current) as HTMLStyleElement;
+    const tag = document.getElementById(result.current.styleTagId) as HTMLStyleElement;
     const sheet = tag.sheet as CSSStyleSheet;
     const rule = sheet.cssRules[0] as CSSStyleRule;
 
-    expect(rule.selectorText).toEqual(`.${result.current}`);
+    expect(rule.selectorText).toEqual(`.${result.current.styleTagId}`);
     expect(rule.cssText).toMatchInlineSnapshot(`".fui-FluentProvider1 {--css-variable-1: 1; --css-variable-2: 2;}"`);
   });
 
   it('should update style tag on theme change', () => {
     // Arrange
     let theme = defaultTheme;
-    const { result, rerender } = renderHook(() => useFluentProviderThemeStyleTag({ theme, targetDocument: document }));
+    const { result, rerender } = renderHook(() =>
+      useFluentProviderThemeStyleTag({ theme, targetDocument: document, rendererAttributes: {} }),
+    );
 
     // Act
     theme = { 'css-variable-update': 'xxx' } as unknown as Theme;
     rerender();
 
     // Assert
-    const tag = document.getElementById(result.current) as HTMLStyleElement;
+    const tag = document.getElementById(result.current.styleTagId) as HTMLStyleElement;
     const sheet = tag.sheet as CSSStyleSheet;
     const rule = sheet.cssRules[0] as CSSStyleRule;
-    expect(rule.selectorText).toEqual(`.${result.current}`);
+    expect(rule.selectorText).toEqual(`.${result.current.styleTagId}`);
     expect(rule.cssText).toMatchInlineSnapshot(`".fui-FluentProvider1 {--css-variable-update: xxx;}"`);
   });
 
   it('should update style tag on theme change', () => {
-    const renderer = createDOMRenderer(document, {
-      styleElementAttributes: { nonce: 'random' },
-    });
-
-    const { result } = renderHook(
-      () => useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument: document }),
-      { wrapper: props => <RendererProvider renderer={renderer}>{props.children}</RendererProvider> },
+    const { result } = renderHook(() =>
+      useFluentProviderThemeStyleTag({
+        theme: defaultTheme,
+        targetDocument: document,
+        rendererAttributes: { nonce: 'random' },
+      }),
     );
-    const tag = document.getElementById(result.current) as HTMLStyleElement;
+    const tag = document.getElementById(result.current.styleTagId) as HTMLStyleElement;
 
     expect(tag.getAttribute('id')).toBe('fui-FluentProvider1');
     expect(tag.getAttribute('nonce')).toBe('random');
   });
+
+  it('should move style tags in body to head on first render', () => {
+    const targetDocument = createDocumentMock();
+    const ssrStyleElement = targetDocument.createElement('style');
+    // Kinda hacky - assume the useId call returns as expected (ids are reset after each test)
+    ssrStyleElement.setAttribute('id', 'fui-FluentProvider1');
+    targetDocument.body.append(ssrStyleElement);
+
+    jest.spyOn(targetDocument, 'createElement');
+    renderHook(() => useFluentProviderThemeStyleTag({ theme: defaultTheme, targetDocument, rendererAttributes: {} }));
+
+    expect(targetDocument.body.querySelector('style')).toBeNull();
+    expect(targetDocument.head.querySelectorAll('style').length).toBe(1);
+    // eslint-disable-next-line deprecation/deprecation
+    expect(targetDocument.createElement).toHaveBeenCalledTimes(0);
+  });
 });
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
index afe33b6d5bef8..4145979442488 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
@@ -1,5 +1,4 @@
 import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
-import { useRenderer_unstable } from '@griffel/react';
 import * as React from 'react';
 
 import type { FluentProviderState } from './FluentProvider.types';
@@ -41,17 +40,18 @@ const insertSheet = (tag: HTMLStyleElement, rule: string) => {
 
 /**
  * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
- *
+ * @internal
  * @returns CSS class to apply the rule
  */
-export const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {
-  const { targetDocument, theme } = options;
+export const useFluentProviderThemeStyleTag = (
+  options: Pick<FluentProviderState, 'theme' | 'targetDocument'> & { rendererAttributes: Record<string, string> },
+) => {
+  const { targetDocument, theme, rendererAttributes } = options;
 
-  const renderer = useRenderer_unstable();
-  const styleTag = React.useRef<HTMLStyleElement>();
+  const styleTag = React.useRef<HTMLStyleElement | undefined | null>();
 
   const styleTagId = useId(fluentProviderClassNames.root);
-  const styleElementAttributes = renderer.styleElementAttributes;
+  const styleElementAttributes = rendererAttributes;
 
   const cssVarsAsString = React.useMemo(() => {
     return theme
@@ -64,17 +64,40 @@ export const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState
 
   const rule = `.${styleTagId} { ${cssVarsAsString} }`;
 
+  useHandleSSRStyleElements(targetDocument, styleTagId);
   useInsertionEffect(() => {
-    styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });
-
-    if (styleTag.current) {
-      insertSheet(styleTag.current, rule);
-
-      return () => {
-        styleTag.current?.remove();
-      };
+    // The style element could already have been created during SSR - no need to recreate it
+    const ssrStyleElement = targetDocument?.getElementById(styleTagId);
+    if (ssrStyleElement) {
+      styleTag.current = ssrStyleElement as HTMLStyleElement;
+    } else {
+      styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });
+      if (styleTag.current) {
+        insertSheet(styleTag.current, rule);
+      }
     }
+
+    return () => {
+      styleTag.current?.remove();
+    };
   }, [styleTagId, targetDocument, rule, styleElementAttributes]);
 
-  return styleTagId;
+  return { styleTagId, rule };
 };
+
+function useHandleSSRStyleElements(targetDocument: Document | undefined | null, styleTagId: string) {
+  // Using a state factory so that this logic only runs once per render
+  // Each FluentProvider can create its own style element during SSR as a slot
+  // Moves all theme style elements to document head during render to avoid hydration errors.
+  // Should be strict mode safe since the logic is idempotent.
+  React.useState(() => {
+    if (!targetDocument) {
+      return;
+    }
+
+    const themeStyleElement = targetDocument.getElementById(styleTagId);
+    if (themeStyleElement) {
+      targetDocument.head.append(themeStyleElement);
+    }
+  });
+}